# @camunda/process-landscape 中文文档

规范地址：https://npmcn.com/package/%40camunda/process-landscape/

版本：0\.5\.1
npm 元数据更新时间：2026-10-30T15:26:09.907Z
中文译文更新时间：2026-11-09T00:51:16.872Z
软件包许可：SEE LICENSE IN LICENSE\.txt

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40camunda/process-landscape
原文对照：https://npmcn.com/package/%40camunda/process-landscape/?lang=original
项目主页：https://github.com/camunda/process-landscape#readme
源码仓库：https://github.com/camunda/process-landscape

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.5 MB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2024-12-18T07:51:12.497Z
- 最新版本发布：2026-09-21T15:06:25.620Z
- 近 30 天下载量：11320（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 2 个）

## 中文简介

过程地貌是一个可视化工具,提供 **_对相互关联的进程的分级视图_**,允许用户探索多个进程层面之间的关系和依赖关系. 此工具 **_自动_** 生成风景色

## 安装

```sh
npm install @camunda/process-landscape
```

也可以使用：`pnpm add @camunda/process-landscape`、`yarn add @camunda/process-landscape`、`bun add @camunda/process-landscape`

## README

# 进程景观

过程地貌是一个可视化工具,提供 **_对相互关联的进程的分级视图_**,允许用户探索多个进程层面之间的关系和依赖关系. 此工具 **_自动_** 生成项目内所有 BPMN 图表的地貌视图,提供不需人工维护或更新的见解.

![image](https://github.com/user-attachments/assets/07cbaa17-01ec-42ec-8448-a8d7b42b3bbe)

## 安装

> **_说明:_** 安装指令即将到来.

## 构建和运行

```bash
# get all required dependencies
npm install

# run our sandbox testing environment (either command)
npm start
npm run dev

# run our test suites
npm run test

# run the full CI in one command
npm run all
```

## 使用量

要开始,请创建新的 `ProcessLandscape` 实例,可以将进程地貌图计划制成页面正文(或任何其他目标根).

```javascript
const processLandscape = new ProcessLandscape({
  root: document.body,
  data: exampleLandscapeData,
});
```

要进行配置实验,看看我们的沙盒环境.

## 自定义

过程地貌高度定制. 这些配置通过与这些服务相关的服务和配置属性进行管理.

服务也可能被完全重新实施,但这需要深入了解代码库.

一些特别的 **融合服务** 完全没有在图书馆内执行,需要由执行图书馆按照预期的接口来定义.

如果您不确定如何使用服务与服务配置,可在读取器的结尾处提供带示例的段落.

### 融合服务

| 服务 | 作用 | 接口 |
| --- | --- | --- |
| `linkHandler` | 确定进程地平面节点的名称是否应该作为链接来渲染,并定义单击时的行为. | `{ hasLink(node), onClickLink(node) }` |

见 `SandboxNodeLinkHandler.js` (和我们沙盒的其他整合实例)以更好地理解我们服务的界面,并遵循 [详细的整合实例](https://npmcn.com/package/%40camunda/process-landscape/#readme-linkhandler-integration-example) 学习如何构建您的整合模块.

### 用规则构建器自定义

"规则构建"(RuleBuilder)是一种灵活的方式,用于定义动态样式,调色器,以及进程地貌不同部分的行为.

与 `RuleBuilder`,可以在自定义规则的基础上,对特定元素(如节点,链接,或标签)进行声明性地应用样式和装饰.

#### 示例规则

以下是一些规则的示例配置

```javascript
import { RuleBuilder as Rule } from "@camunda/process-landscape";

const rules = [
  Rule.forLandscape().apply({
    horizontalNodeSpacing: 120,
    verticalNodeSpacing: 100,
  }),

  Rule.forLabels().apply({
    styles: {
      fill: "black",
      fontWeight: "bold",
    },
  }),

  Rule.forMarkers().apply({
    styles: {
      scale: 0.5,
    },
  }),

  Rule.forNodes().apply({
    styles: {
      strokeWidth: 1,
    },
    adorners: {
      definitions: [
        getAdornerInfo: () => ({
          content: "draft",
          position: "top-right",
          styles: {
            fontSize: "12px",
            fill: "gray",
          },
        }),
      ],
    },
  }),
];

const processLandscape = new ProcessLandscape({
  root: /* ... */,
  data: /* ... */,
  rules: rules
});
```

#### 如何运作

1.  规则声明:使用 `RuleBuilder.for` 用于瞄准特定组件(景观、节点、链接、标签或标记)的方法.
2.  应用规则:每个规则定义了应当被应用于地貌元素的视觉,例如样式和/或装饰.
3.  排序:规则按定义顺序"合并". 确保您稍后定义更具体的规则,否则规则将永远不适用.

### 其他模块的细节

-   [特性/倡导者](https://npmcn.com/lib/features/adorners/README.md) - 为地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高地高

## 实例

### 整合模块实例

你可以提供 **综合单元** 以组合全部 [融合服务](https://npmcn.com/package/%40camunda/process-landscape/#readme-integration-services) 向进程环境提供。 这是你如何设置的, 举例来说 `linkHandler` 服务.

#### 作为类执行服务

我们在这里定义一个自定义 `linkHandler` 根据其预期接口.

```javascript
class ExampleLinkHandler {
  hasLink(node) {
    return node && node.businessObject.externalData?.link; // Example: check if the node has a "link" externalData property.
  }

  onClickLink(node) {
    console.log("Link clicked:", node.name); // Example: log the node name when the link is clicked.
  }
}
```

#### 将您的服务装入模块

这里重要的是财产名称, _链接汉德勒_ 在这种情况下,匹配,因为它是 代码库将寻找.

```javascript
const IntegrationModule = {
  __init__: ["linkHandler"], // Initialize the linkHandler service.
  linkHandler: ["type", ExampleLinkHandler],
};
```

#### 向进程景观构建器提供集成模块

```javascript
const processLandscape = new ProcessLandscape({
  root: diagramContainerRef.current,
  data: landscapeData, // Your process landscape data.
  additionalModules: [IntegrationModule],
});
```

到了,你成功地 调整了过程的地貌 为工作 **** 环境.

### 模块配置示例

假设我们想设置 `myProperty` 财产的财产 `myService`这一点可以简单地通过以下方式实现: `ProcessLandscape` 构造器如下:

```javascript
const processLandscape = new ProcessLandscape({
  root: document.body,
  data: exampleLandscapeData,
  myService: {
    myProperty: "myValue", // Custom value for myProperty.
  },
});
```

### 景观导航助手

过程地貌可以很容易地通过几个导航辅助器进行扩展,例如:

-   缩放级别控制
-   景观缩略图

喜欢 _缩放_ 详细情况或 _缩放_ 更广阔的画面? 这个功能是 **框中可用的**但您需要增加UI控制以释放它的魔法. 以下是应用程序中如何管理缩放级的简单例子:

```javascript
const handleZoomIn = () => myDiagram.get("zoomScroll").stepZoom(1);
const handleZoomOut = () => myDiagram.get("zoomScroll").stepZoom(-1);

// Somewhere in your UI:
<button onClick={handleZoomIn}>Zoom In</button>
<button onClick={handleZoomOut}>Zoom Out</button>
```

迷失在元素之海? 集成一个迷你地图,所以你总是知道你在哪里! 🏴‍☠️ 刚刚初始化你的地貌 `minimapModule` 使用此示例:

```javascript
import "diagram-js-minimap/assets/diagram-js-minimap.css";
import minimapModule from "diagram-js-minimap";

const processLandscape = new ProcessLandscape({
  root: diagramContainerRef.current,
  data: landscapeData,
  additionalModules: [minimapModule], // Add minimapModule here.
});

const toggleMinimap = () => processLandscape.get("minimap").toggle();

// Somewhere in your UI:
<button onClick={toggleMinimap}>Toggle Minimap</button>;
```

所有设置,你已经成功地集成 导航助手到你的地貌 永远不会再次迷路.

> 需要更多背景吗? 见 [图表对话框组件](https://npmcn.com/sandbox/render/DiagramSandbox.jsx) 详细信息.

## 常见问题

### @camunda/process-landscape 是什么？

过程地貌是一个可视化工具,提供 对相互关联的进程的分级视图,允许用户探索多个进程层面之间的关系和依赖关系\. 此工具 自动 生成风景色

### 如何安装 @camunda/process-landscape？

在项目目录运行 npm install @camunda/process-landscape，或使用 pnpm add / yarn add / bun add。

### @camunda/process-landscape 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @camunda/process-landscape 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @camunda/process-landscape 可以商用吗？

@camunda/process-landscape 使用 SEE LICENSE IN LICENSE\.txt 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @camunda/process-landscape 的下载量有多少？

根据 npm 官方下载统计，@camunda/process-landscape 在 2026/10/09 – 2026/11/07 这 30 天内被下载 11,320 次，日均约 377 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @camunda/process-landscape 还在维护吗？

最新版本 0\.5\.1 发布于 2026/09/21（1 个月前）；至今共发布 8 个版本，其中过去 12 个月发布了 2 个；首次发布于 2024/12/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。