【工作流】LogicFlow：一款高颜值、高易用性的前端流程编排神器！
文章目录
- 引言：什么是 LogicFlow？
- 一、 为什么选择 LogicFlow？它的核心优势是什么？
- 二、 核心概念快速理解
- 三、 实战：5分钟创建一个你的第一个流程图
- 四、 进阶：自定义一个业务节点
- 五、 数据：流程图的输入与输出
- 六、 生态系统与未来
- 总结
引言：什么是 LogicFlow？
想象一下，你需要在你管理的后台系统中，加入一个功能：让用户能够像搭积木一样，通过拖拽来定义一个复杂的业务流程（比如审批流、数据流转等）。
官网地址：https://07.logic-flow.cn/
❓你会怎么做？
- 使用现成的流程图工具？ (如
draw.io嵌入) -> 功能固定，难以与业务深度集成。 - 从零开始用
Canvas或SVG手写一个？ -> 工程量巨大，坑多到怀疑人生。
这时候，LogicFlow 就像一位“天降神兵”，它是一款专注于业务流程图编辑的前端开源框架。它不关心你的后端是什么，只专注于在前端页面上，为你提供一个功能强大、易于扩展的流程图绘制区域。
🎯核心定位：让开发者能快速、轻松地在自己的网页应用中集成一个专业的流程图设计器。
一、 为什么选择 LogicFlow？它的核心优势是什么？
- 极易上手，API 设计友好
LogicFlow 的 API 设计非常直观。只需几行代码，你就能创建一个基础的流程图编辑器。对于新手极其友好。 - 高扩展性，你的想象力是唯一的限制
这是LogicFlow最强大的地方。它几乎允许你自定义所有东西：- 节点：除了基础矩形、圆形，你可以自定义成“用户任务”、“系统任务”、“网关”等任何业务节点。
- 连线：自定义连线的样式、箭头，甚至在线条上嵌入文案或图标。
- 插件：官方和社区提供了丰富的插件，如菜单、缩略图、BPMN适配等。
- 数据驱动，与业务无缝集成
LogicFlow 采用纯粹的数据驱动模式。你不需要直接操作DOM，只需关心图的数据。获取到的JSON数据可以轻松保存到数据库或发送给后端。 - 国产开源，中文文档齐全
由国内团队精心打造，拥有完善的中文文档和活跃的社区，沟通无障碍，解决问题快人一步。
提示：LogicFlow 支持html、vue、react等前端框架，本文使用html集成。
二、 核心概念快速理解
在开始写代码前，我们先建立三个核心心智模型：
| 概念 | 是什么？ | 类比 |
|---|---|---|
| GraphModel (图模型) | 整个流程图的数据和逻辑核心。它管理着所有的节点和边。 | 一个家族的“族谱”，记录了所有成员（节点）和他们之间的关系（边）。 |
| Node (节点) | 流程图中的一个个基础元素，比如步骤、任务。 | 族谱中的一个个“人”，比如父亲、儿子。 |
| Edge (边/连线) | 连接两个节点的线，表示流程的走向。 | 族谱中的“父子关系”，连接着两个人。 |
理解了这三点，你就掌握了 LogicFlow 80% 的运作方式。
三、 实战：5分钟创建一个你的第一个流程图
俗话说，光说不练假把式。让我们来真刀真枪地创建一个简单的流程图。
步骤 1：初始化项目并安装
# 创建一个新的目录并初始化mkdir my-logicflow-demo cd my-logicflow-demo npm init -y # 安装 LogicFlownpminstall @logicflow/core 步骤 2：创建 HTML 容器
创建一个 index.html 文件：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的第一个 LogicFlow 流程图</title><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/style/index.css"/></head><body><!-- 准备一个容器，LogicFlow 会在这个 div 里渲染画布 --><divid="container"style="width: 1000px;height: 600px;border: 1px solid #aaa;"></div><scriptsrc="./app.js"></script></body></html>步骤 3：编写 JavaScript 逻辑
创建一个 app.js 文件：
// 引入 LogicFlowimport{ LogicFlow }from'@logicflow/core';// 注意：如果直接在浏览器中运行，请使用 CDN 方式引入，这里为了演示使用 ES Module。// 1. 配置画布const lf =newLogicFlow({ container: document.querySelector('#container'), grid:true,// 开启网格，方便对齐// width: 1000,// height: 600,});// 2. 渲染画布 lf.render();// 3. 设置默认节点和连线类型（这样拖拽出来的节点才是我们想要的） lf.setDefaultEdgeType('polyline');// 设置默认连线为折线// 4. 举个栗子：在画布上添加一些初始节点和连线 lf.addNode({ type:'rect', x:100, y:100, text:'开始节点',}); lf.addNode({ type:'circle', x:300, y:100, text:'处理节点',}); lf.addEdge({ type:'polyline', sourceNodeId:1,// 第一个节点的ID targetNodeId:2,// 第二个节点的ID});注意：上面的 ES Module 写法在部分浏览器中可能直接运行会报错。更稳妥的方式是使用构建工具（如 Vite, Webpack）或者直接通过 CDN <script> 标签引入。CDN 方式如下：在 index.html 的 </body> 前加入：
<scriptsrc="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script><script>// 将 app.js 的内容放在这里const{ LogicFlow }= window.LogicFlow;// ... 其余代码与上面 app.js 相同</script>步骤 4：查看结果！
用浏览器打开你的 index.html 文件，你将看到一个包含两个节点和一条连线的流程图！你可以尝试用鼠标拖拽它们。
四、 进阶：自定义一个业务节点
基础节点太单调？我们来创建一个“审批节点”。
// 继承 RectNode 来创建自定义节点import{ RectNode, RectNodeModel }from'@logicflow/core';// 1. 定义视图（View）：控制节点的外观长什么样classApprovalNodeextendsRectNode{// 这里可以重写获取形状的方法，比如添加图标}// 2. 定义模型（Model）：控制节点的数据和行为逻辑classApprovalNodeModelextendsRectNodeModel{// 在构造函数中设置自定义属性initNodeData(data){super.initNodeData(data);this.width =120;this.height =80;this.radius =10;// 圆角矩形this.stroke ='#2980b9';// 边框颜色this.fill ='#d6eaf8';// 填充颜色}// 自定义节点文字样式getTextStyle(){const style =super.getTextStyle(); style.fontSize =16; style.color ='#2c3e50';return style;}}// 3. 注册自定义节点 lf.register('approval',{ view: ApprovalNode, model: ApprovalNodeModel,});// 4. 现在，你可以添加这个自定义节点了！ lf.addNode({ type:'approval',// 使用注册的类型名 x:500, y:200, text:'主管审批',});刷新页面，你会看到一个风格独特的“主管审批”节点！通过这种强大的自定义能力，你可以构建出完全贴合你业务需求的流程图。
五、 数据：流程图的输入与输出
LogicFlow 的核心是数据。
- 获取数据（保存）：当你设计好流程图后，调用
lf.getGraphData()即可得到一个JSON数据。这个数据描述了整个图的结构，你可以把它存到数据库里。
const graphData = lf.getGraphData(); console.log(JSON.stringify(graphData));// 输出： {"nodes": [...], "edges": [...]}- 渲染数据（回显）：当你从后端拿到之前保存的
JSON数据时，只需在lf.render()时传入即可。
const previouslySavedData ={...};// 从API获取的数据 lf.render(previouslySavedData);六、 生态系统与未来
LogicFlow 拥有一个繁荣的插件生态系统：
- @logicflow/extension： 官方扩展包，包含了：
- BPMN： 让你能绘制符合 BPMN 2.0 规范的流程图。
- MiniMap： 缩略图，用于在大图中快速导航。
- SelectionSelect： 框选工具。
- …等等
使用插件通常非常简单：
import{ BpmnElement }from'@logicflow/extension';// 注册插件 lf.use(BpmnElement);// 之后你就可以使用 'bpmn:startEvent' 等 BPMN 类型的节点了总结
- LogicFlow 是什么？
它是一个强大、易扩展的前端流程图编辑框架。 - 它解决了什么问题？
它让在网页应用中嵌入一个专业的、可高度定制的流程图设计器变得异常简单，极大地提升了开发效率和用户体验。 - 它的学习曲线如何？
入门极快，核心概念清晰。官方文档和示例非常丰富，能让你在短时间内搭建出可用的原型。而它的高扩展性又能支撑起极其复杂的业务场景。
无论是做 OA 审批、自动化运维、低代码平台，还是任何需要可视化编排的场景，LogicFlow 都绝对值得你花时间去了解和尝试。
