# @foblex/flow-dagre-layout 中文文档

规范地址：https://npmcn.com/package/%40foblex/flow-dagre-layout/

版本：19\.4\.0
npm 元数据更新时间：2026-10-25T09:41:22.818Z
中文译文更新时间：2026-11-15T03:45:19.077Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40foblex/flow-dagre-layout
原文对照：https://npmcn.com/package/%40foblex/flow-dagre-layout/?lang=original
项目主页：https://flow.foblex.com/
源码仓库：https://github.com/Foblex/f-flow

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

- 包体积（解压后）：30.9 kB，19 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@foblex/flow ^19\.4\.0，@angular/core \>=17\.3\.0，@angular/common \>=17\.3\.0
- 首次发布：2026-04-14T10:54:28.418Z
- 最新版本发布：2026-10-25T09:41:22.548Z
- 近 30 天下载量：13558（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 15 个）

## 中文简介

Foblex Flow的Dagre排版引擎适配器.

## 安装

```sh
npm install @foblex/flow-dagre-layout
```

也可以使用：`pnpm add @foblex/flow-dagre-layout`、`yarn add @foblex/flow-dagre-layout`、`bun add @foblex/flow-dagre-layout`

## README

# @ foblex/ flow- targle- layout (英语)

`@foblex/flow-dagre-layout` 添加手动版式适配器 [达格尔](https://github.com/dagrejs/dagre) 内 [Foblex 流动](https://flow.foblex.com/)。 。 。 .

当您的图形大多是分级的时使用此软件包, 您想要对工作流程、 树、 依赖性地图或 Org- chart 样式编辑器进行可预测的左到右或上到下布局 .

## 安装

最简单的路径是:

```bash
ng add @foblex/flow-dagre-layout
```

如果您的应用程序已经单独管理了流程样式, 您可以跳过默认的主题线程 :

```bash
ng add @foblex/flow-dagre-layout --skipTheme
```

Nx 工作空间 :

```bash
nx g @foblex/flow-dagre-layout:add
```

`ng add` 确保这些软件包存在, 只添加缺失的软件包 :

-   `@foblex/flow`
-   `@foblex/platform`
-   `@foblex/mediator`
-   `@foblex/2d`
-   `@foblex/utils`
-   达格雷包本身

它还说 `node_modules/@foblex/flow/styles/default.scss` 改为缺少主题条目时的应用程序样式.

如果您喜欢手工安装 :

```bash
npm install @foblex/flow @foblex/flow-dagre-layout @foblex/platform@^1.0.4 @foblex/mediator@^1.1.3 @foblex/2d@^1.2.2 @foblex/utils@^1.1.1
```

基础 `dagre` 软件包作为此软件包的运行时依赖性被运出,所以不需要单独安装.

## 引擎会做什么

`DagreLayoutEngine` 从 :

-   节点标识
-   可选节点大小
-   源/目标连接
-   方向、间隔和算法等布局选项

引擎返回时只计算出节点位置. 您的应用程序继续负责图态 并决定如何将这些位置 合并回您的节点模型.

## 最小设置

```ts
import { Component, inject } from '@angular/core';
import {
  EFLayoutDirection,
  IFLayoutConnection,
  IFLayoutNode,
  provideFLayout,
} from '@foblex/flow';
import {
  DagreLayoutEngine,
  EDagreLayoutAlgorithm,
} from '@foblex/flow-dagre-layout';

@Component({
  standalone: true,
  providers: [provideFLayout(DagreLayoutEngine)],
  template: '',
})
export class WorkflowLayoutExample {
  private readonly _layout = inject(DagreLayoutEngine);

  protected async relayout(): Promise<void> {
    const nodes: IFLayoutNode[] = [
      { id: 'A' },
      { id: 'B' },
      { id: 'C' },
    ];
    const connections: IFLayoutConnection[] = [
      { source: 'A', target: 'B' },
      { source: 'B', target: 'C' },
    ];

    const result = await this._layout.calculate(nodes, connections, {
      direction: EFLayoutDirection.LEFT_RIGHT,
      algorithm: EDagreLayoutAlgorithm.NETWORK_SIMPLEX,
      nodeGap: 32,
      layerGap: 48,
    });

    const positions = new Map(result.nodes.map((node) => [node.id, node.position]));

    console.log(positions.get('A'));
  }
}
```

## 主要选项

-   `direction`数字 : `EFLayoutDirection`
-   `algorithm`数字 : `EDagreLayoutAlgorithm`
-   `nodeGap`: 水平间距或兄弟姐妹间距
-   `layerGap`: 等级间距
-   `defaultNodeSize`: 当节点不提供时倒数大小 `size`

可用的算法 :

-   `EDagreLayoutAlgorithm.NETWORK_SIMPLEX`
-   `EDagreLayoutAlgorithm.TIGHT_TREE`
-   `EDagreLayoutAlgorithm.LONGEST_PATH`

## 典型的一体化流动

1.  建立自己的图表数据.
2.  转换为 `IFLayoutNode[]` 财务报告和审定财务报表 `IFLayoutConnection[]`。 。 。 .
3.  打电话 `calculate(...)`。 。 。 .
4.  将返回的位置合并到您的视图模型中 .
5.  显示节点 `f-flow`。 。 。 .

## 示例

-   现场实例 : [https://flow.foblex.com/examples/dagre-layout (英语)](https://flow.foblex.com/examples/dagre-layout)
-   示例来源 : [液化液/液化液/液化液/液化液/液化液/液化液](https://github.com/Foblex/f-flow/tree/main/libs/f-examples/plugins/dagre-layout)

## 选择达格尔时

需要时选择达格:

-   快速定向布局
-   树状或分层结构
-   简单和可预测的间隔控制
-   一个比ELK.js小的选项表面

## 常见问题

### @foblex/flow-dagre-layout 是什么？

Foblex Flow的Dagre排版引擎适配器\.

### 如何安装 @foblex/flow-dagre-layout？

在项目目录运行 npm install @foblex/flow-dagre-layout，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@foblex/flow（^19\.4\.0）、@angular/core（\>=17\.3\.0）、@angular/common（\>=17\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @foblex/flow-dagre-layout 支持 TypeScript 吗？

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

### @foblex/flow-dagre-layout 支持 ESM 还是 CommonJS？

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

### @foblex/flow-dagre-layout 可以商用吗？

@foblex/flow-dagre-layout 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @foblex/flow-dagre-layout 的下载量有多少？

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

### @foblex/flow-dagre-layout 还在维护吗？

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