LogicFlow：滴滴开源流程图编辑引擎安装与使用指南

一、项目官方信息

LogicFlow 是滴滴开源的前端流程图编辑引擎，提供流程图、BPMN、ER 图等可视化能力，可快速搭建流程设计器、审批流、知识图谱等应用。

二、官方图片

上图为 LogicFlow 仓库在 GitHub 上的官方 Logo。

三、环境要求

• 现代浏览器；
• Node.js 16+；
• 原生 JS/TS，可配合 React/Vue。

四、安装步骤

1. 安装依赖

npm install @logicflow/core

如需扩展组件，可安装 @logicflow/extension。

2. 初始化画布

<div id="container"></div>

import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';

const lf = new LogicFlow({
  container: document.querySelector('#container'),
  grid: true,
});
lf.render({
  nodes: [
    { id: '1', type: 'rect', x: 100, y: 100, text: '节点1' },
  ],
  edges: [],
});

3. 自定义节点

lf.registerNode('custom-node', {
  // 自定义节点
});

4. 导出数据

const graphData = lf.getGraphData();

五、使用方法

• 流程图：节点、连线、锚点；
• 扩展能力：菜单、右键、小地图、对齐线；
• 数据驱动：JSON 描述图，可序列化；
• BPMN 支持：基于 BPMN 扩展包；
• 二次开发：自定义节点与面板。

六、常见问题 FAQ

1. LogicFlow 是什么？ 流程图编辑引擎，用于搭建可视化设计器。

2. 怎么安装？ npm install @logicflow/core。

3. 支持 React/Vue 吗？ 原生 JS，可在任意框架中使用。

4. 怎么导出数据？ lf.getGraphData() 得到 JSON。

5. 支持 BPMN 吗？ 通过扩展包支持。

6. 谁开源的？ 滴滴。

七、跳转链接

• GitHub 仓库：didi/LogicFlow
• 官网：site.logic-flow.cn
• npm：@logicflow/core