FlowGraph 流程图

OrganizationChart 组织结构图

FlowDirectionGraph 流向图

何时使用

展示了从开始到结束的整个流程。每个节点代表一个特定的步骤或决策点，边则表示步骤之间的顺序和关系。

适用于需要展示线性流程或步骤的场景

规划和跟踪项目进度，明确任务的先后顺序和依赖关系

构建决策树，展示不同决策点和路径的场景

API

FlowGraph

属性	说明	类型	默认值
data	数据	Data	-
labelField	指定节点标签内容 - 从数据中选择一个字段，对应字段的值作为节点的标签 - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签	string \| ((node: NodeData) => string)	节点 ID
layout	Dagre 布局配置	Layout	-

Data

图数据。若开启“展开-收起”交互，需确保数据中包含 children 字段。

const graphData = {
  nodes: [
    { id: '1', label: 'Node 1', children: ['2', '3'] },
    { id: '2', label: 'Node 2', children: ['4'] },
    { id: '3', label: 'Node 3' },
    { id: '4', label: 'Node 4' },
  ],
  edges: [
    { source: '1', target: '2' },
    { source: '1', target: '3' },
    { source: '2', target: '4' },
  ],
};

Layout

Dagre 层次布局。配置如下：

也可以参考 Dagre Wiki

属性	说明	类型	默认值
rankdir	节点排列方向。可以是 `TB`、`BT`、`LR` 或 `RL`，其中 T = 上，B = 下，L = 左，R = 右	string	`TB`
align	节点排列对齐方式。可以是 `UL`、`UR`、`DL` 或 `DR`，其中 U = 上，D = 下，L = 左，R = 右	string	`undefined`
nodesep	布局中节点水平间隔的像素数	number	`50`
edgesep	布局中边水平间隔的像素数	number	`10`
ranksep	布局中每个等级之间的像素数	number	`50`
marginx	图表左右两侧的边距像素数	number	`0`
marginy	图表上下两侧的边距像素数	number	`0`
acyclicer	如果设置为 greedy，则使用贪婪启发式算法来找到图的反馈弧集。反馈弧集是可以移除以使图无环的边集	string	`undefined`
ranker	为输入图中的每个节点分配等级的算法类型。可能的值：`network-simplex`、`tight-tree` 或 `longest-path`	string	`network-simplex`

Ant Design Charts

FlowGraph 流程图

何时使用

代码演示

基本用法

高亮元素及其所在链路

自定义节点

API

FlowGraph

Data

Layout