定义
LogicFlow 是一套面向前端开发的流程图编辑框架，目标是让研发人员在业务系统内快速搭建具备类流程图编辑能力的应用。它提供流程图交互与编辑所必需的基础功能，并给出节点自定义、插件扩展等机制，使框架能够适配不同产品各自的流程编辑需求[2]。其核心包为 @logicflow/core，官方插件集合位于 @logicflow/extension，代码与文档基于 Apache-2.0 协议开源[2][3]。项目定位为专注业务自定义的流程图编辑框架，可支持流程图、脑图、ER 图、UML、工作流等多种图编辑场景[2]。
原理
在渲染方案上，LogicFlow 没有采用纯 Canvas，而是选择 HTML 与 SVG 混合的方式。图形和连线由 SVG 图层承载，文本、菜单、背景等内容则由 HTML 层实现，原因是流程图场景节点数量通常在数千以内、动画诉求不高，基于 DOM 的 SVG 在开发成本与可扩展性上更合适[1]。框架内部把图抽象为多个图层，组件层负责扩展 UI 组件，网格层渲染网格，背景层添加自定义背景，图形渲染则封装为 Rect、Circle、Polygon、Path、PolyLine、Text 等基础形状[1]。
LogicFlow 的编辑器基于 MVVM 模式构建，区分图的 View 与 Model 层，并引入 Mobx 实现状态管理与数据响应，一张图共享一份 Model 做状态通信，从而使重做与撤销功能可以按数据驱动视图的方式实现[1]。为降低操作 DOM 的开销，框架还引入 Virtual DOM 处理视图更新[1]。事件方面，内部通过 Behavior 封装拖拽等复杂交互，通过 EventCenter 事件总线统一上报用户行为，再由 LogicFlow 类与宿主程序交互[1]。此外，框架提供坐标系转换、折线路径合并、连线切点计算等几何算法工具，并用两个栈存储重做与撤销记录[1]。
发展历程
LogicFlow 源于滴滴客服业务的流程可视化需求。滴滴体验平台技术团队几乎支持了集团所有事业部的客服系统，面对多样性高、逻辑变更快的场景，传统的面向场景编程方式成本高、周期长，因此团队建设了线上配置化运营系统，让运营与产品人员通过画流程图的方式变更线上业务逻辑[4][5]。
在自研之前，团队调研了 BPMN.js、X6、Jsplumb、G6-editor 等市面框架，认为它们在拓展能力、自定义节点支持、按需引入、与后端流程引擎的数据适配以及文档示例等方面存在不足[1][4]。2020 年上半年，LogicFlow 项目正式启动，用于支撑各系统的流程可视化需求[1]。2021 年 8 月，滴滴开源 LogicFlow，明确其定位为专注流程可视化的前端框架[4]。团队当时计划在 2021 年 4 月发布 1.0 版本，并将配套流程引擎 Turbo 与 LogicFlow 组合为端到端解决方案[1]。
应用
LogicFlow 最初的应用场景是滴滴客服业务，已支持互动式语音应答、工单流转、智能机器人等多个运营系统，在各系统不同的流程配置需求中得到验证[1][5]。在页面逻辑编排方面，滴滴客服团队把写代码的过程拆解为事件节点、数据节点、行为节点等逻辑单元，再用流程串联，并配套实现编排器、执行器与调试器；其中执行器基于可在 JavaScript 环境运行的流程引擎 LogicFlow Engine，使流程图能在浏览器中按编排逻辑运行[6]。据相关文章介绍，过去 4 年中滴滴客服内部多个系统通过配置产出了 12900 个以上 PC 页面与 7900 个以上 H5 页面[3]。
从通用能力看，LogicFlow 支持节点拖拽、拖拽创建连线、连线调整、双击编辑文本等交互，并提供网格、对齐线、上一步与下一步、键盘快捷键、画布缩放等编辑效率工具。BPMN 规范节点、审批流等由 extension 包提供，可单独安装并按需引入。框架还可用于脑图、比赛晋级图、泳道图等自由样式作图工具的开发。
局限
LogicFlow 在 BPMN 2.0 规范支持上不如 BPMN.js 全面，实现 BPMN 规范所需的流程节点与数据格式需要开发者额外开发[7]。它只解决前端流程图编辑的技术问题，图数据如何定义、流程最终如何被执行仍需要配套的流程引擎，团队为此提供了 Turbo 作为对应方案[1]。
在渲染层面，由于 SVG 标签内部不支持插入 div 等元素，实现某些功能时需要结合其他 HTML 标签[1]。团队也指出,框架的 API 丰富程度与文档示例完善程度仍需经过大量用户和不同类型系统的验证[1]。
参见
-
BPMN —— 业务流程建模与标注规范，LogicFlow 提供面向该规范的节点与数据转换能力。
-
SVG —— LogicFlow 用于绘制节点与连线的基础图形技术。
-
Canvas —— 另一种前端绘图方案，LogicFlow 在选型中未将其作为主要渲染方式。
-
Model-View-ViewModel —— LogicFlow 图编辑器采用的设计模式，用于解耦图的视图与数据模型。
-
DOM —— 浏览器文档对象模型，SVG 与 HTML 渲染均基于它。
参考资料
- # LogicFlow 的设计和架构 [引用日期2026-10-14]
- 简体中文 | [English](/README [引用日期2026-10-14]
- gitcode.com 上的网页 [引用日期2026-10-14]
- 滴滴开源 LogicFlow：专注流程可视化的前端框架 [引用日期2026-10-14]
- Home - Skip to content [引用日期2026-10-14]
- LogicFlow引领页面逻辑编排新风尚 [引用日期2026-10-14]
- 工作流开发前端选型探讨bpmnjs与LogicFlow [引用日期2026-10-14]