前端流程图别再从零造：滴滴开源 LogicFlow 上手指南

前端项目里一旦出现审批流、工作流、脑图、 ER 图或 UML 编辑器，真正费时间的往往不是把画布显示出来，而是节点样式、连线规则、选中态、拖拽交互、导入导出和后续扩展。

滴滴开源的 LogicFlow，定位就是一套面向业务定制的流程图编辑框架。 GitHub 页面目前显示约 1.16 万颗 Star，仓库采用 Apache-2.0 协议。它把画布交互、节点模型、边、插件和数据转换拆开，业务系统可以在现成能力上继续改，而不是重新实现一整套图编辑器。

LogicFlow 适合解决什么问题

它提供的能力可以概括成四层：

画布和交互：创建、编辑、拖拽、连接、选中、删除流程节点。
节点定制：可以自定义节点、连接器和样式，适配审批节点、条件分支、角色节点等业务语义。
插件扩展：官方提供扩展包，也支持根据业务需要编写插件。
数据和执行：支持 LogicFlow 数据与 BPMN 、 Turbo 等后端执行引擎的数据结构转换，并提供浏览器端执行流程逻辑的能力。

这类框架的价值，在于把“图形编辑”和“业务规则”分开。产品团队可以先把图画出来，再逐步接入校验、保存、发布和执行逻辑。

安装方式

LogicFlow 的核心包和扩展包可以一起安装：

npm install @logicflow/core @logicflow/extension --save

项目也支持 Yarn 和 pnpm：

yarn add @logicflow/core @logicflow/extension

pnpm add @logicflow/core @logicflow/extension

仓库要求 Node.js 16 及以上，开发仓库使用 pnpm 。实际项目建议把 @logicflow/core 和 @logicflow/extension 固定在同一个版本范围，减少升级时的接口差异。

跑通一个最小流程图

先准备一个容器：

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

然后准备节点和边的数据：

const data = {
  nodes: [
    {
      id: '21',
      type: 'rect',
      x: 100,
      y: 200,
      text: '矩形节点',
    },
    {
      id: '50',
      type: 'circle',
      x: 300,
      y: 400,
      text: '圆形节点',
    },
  ],
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '50',
      targetNodeId: '21',
    },
  ],
};

最后创建实例并渲染：

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

const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600,
});

lf.render(data);

这段代码只做了三件事：定义节点、定义边、把数据交给画布。后续的业务能力可以围绕这三层继续加，例如限制哪些节点可以相连、为节点增加表单属性、在保存前输出后端需要的 JSON，或者把画布数据转换为 BPMN 。

自定义节点是它的重点

审批流里的“开始”“条件判断”“人工审批”“抄送”“结束”，通常都不适合直接使用通用矩形。 LogicFlow 提供了节点模型、视图和主题等扩展点，业务可以把节点做成自己的视觉和交互组件。

一个实用的落地顺序是：

先用内置节点跑通画布、保存和恢复。
再把业务节点拆成稳定的类型，例如 start、approval、condition、end。
为每个类型定义展示文字、颜色、可连接规则和配置面板。
最后接入校验和发布，避免把“画得出来”误当成“流程能执行”。

这样做的好处是，节点类型本身就成为业务协议。前端展示、后端校验和执行引擎可以围绕同一份数据模型协作。

插件和数据转换怎么用

常见的编辑器功能，例如小地图、控制面板、快照、对齐、框选、剪贴板和 BPMN 相关能力，可以优先查看 @logicflow/extension，避免在业务项目里重复造轮子。

仓库还提供 LogicFlow 与 BPMN 、 Turbo 等数据结构之间的转换能力。对于已有后端流程引擎的团队，这一点很重要：前端负责编辑体验，后端继续负责权限、版本、发布和执行，双方通过转换层交换数据。

AI 编程支持也被放进了 npm 包

当前 README 里新增了 AI 编程支持说明：@logicflow/core@2.2.2 及以上版本会随 npm 包带上本地文档，位置在：

node_modules/@logicflow/core/dist/docs/

仓库给出的 Agent 规则要求，在实现 LogicFlow 功能前先检查本地文档，优先使用已经存在的核心能力、扩展能力或布局能力。这个做法对前端项目很实用，尤其能减少 AI 生成一套“看起来能跑、实际绕开官方 API”的重复实现。

什么时候值得选它

如果团队要做的是带业务语义的流程编辑器，LogicFlow 值得先做一个小型验证：画 5 个节点，保存一次 JSON，恢复一次 JSON，再测试一条非法连线能否被拦截。

如果只是页面里放一张不可编辑的流程示意图，使用 SVG 、 React Flow 或其他轻量方案可能更直接。 LogicFlow 的优势在可编辑、可扩展和可接入业务规则，项目也需要承担节点模型、版本兼容、数据迁移和流程执行边界这些工程工作。

建议先从一个可回滚的小场景开始，例如内部审批或测试环境编排。跑通“创建 → 编辑 → 保存 → 恢复 → 校验 → 发布”这条路径，再决定是否扩展到更复杂的 BPMN 或多租户流程平台。

来源链接： https://github.com/didi/LogicFlow https://site.logic-flow.cn/

LogicFlow 的代码和文档基于 Apache-2.0 License 开源。使用仓库代码前，仍然要结合具体版本查看许可证、依赖和发布说明。

来源：https://github.com/didi/LogicFlow