引言:什么是 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
npm install @logicflow/core
步骤 2:创建 HTML 容器
创建一个 index.html 文件:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个 LogicFlow 流程图</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/style/index.css"/>
</head>
<body>
<div id="container" style="width: 1000px;height: 600px;border: 1px solid #aaa;"></div>
<script src="./app.js"></script>
</body>
</html>
步骤 3:编写 JavaScript 逻辑
创建一个 app.js 文件:
import { LogicFlow } from '@logicflow/core';
const lf = new LogicFlow({
container: document.querySelector('#container'),
grid: true,
});
lf.render();
lf.setDefaultEdgeType('polyline');
lf.addNode({ type:'rect', x:100, y:100, text:'开始节点',});
lf.addNode({ type:'circle', x:300, y:100, text:'处理节点',});
lf.addEdge({ type:'polyline', sourceNodeId:1,
注意:上面的 ES Module 写法在部分浏览器中可能直接运行会报错。更稳妥的方式是使用构建工具(如 Vite, Webpack)或者直接通过 CDN <script> 标签引入。CDN 方式如下:
在 index.html 的 </body> 前加入:
<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script>
<script>
const { LogicFlow } = window.LogicFlow;
</script>
步骤 4:查看结果!
用浏览器打开你的 index.html 文件,你将看到一个包含两个节点和一条连线的流程图!你可以尝试用鼠标拖拽它们。
四、进阶:自定义一个业务节点
基础节点太单调?我们来创建一个'审批节点'。
import { RectNode, RectNodeModel } from '@logicflow/core';
class ApprovalNode extends RectNode {
}
class ApprovalNodeModel extends RectNodeModel {
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;
}
}
lf.(, { : , : , });
lf.({ :,
刷新页面,你会看到一个风格独特的'主管审批'节点!通过这种强大的自定义能力,你可以构建出完全贴合你业务需求的流程图。
五、数据:流程图的输入与输出
LogicFlow 的核心是数据。
- 获取数据(保存):当你设计好流程图后,调用
lf.getGraphData() 即可得到一个 JSON 数据。这个数据描述了整个图的结构,你可以把它存到数据库里。
const graphData = lf.getGraphData();
console.log(JSON.stringify(graphData));
- 渲染数据(回显):当你从后端拿到之前保存的
JSON 数据时,只需在 lf.render() 时传入即可。
const previouslySavedData = {...};
lf.render(previouslySavedData);
六、生态系统与未来
LogicFlow 拥有一个繁荣的插件生态系统:
- @logicflow/extension:官方扩展包,包含了:
- BPMN:让你能绘制符合 BPMN 2.0 规范的流程图。
- MiniMap:缩略图,用于在大图中快速导航。
- SelectionSelect:框选工具。
- …等等
使用插件通常非常简单:
import { BpmnElement } from '@logicflow/extension';
lf.use(BpmnElement);
总结
- LogicFlow 是什么?
它是一个强大、易扩展的前端流程图编辑框架。
- 它解决了什么问题?
它让在网页应用中嵌入一个专业的、可高度定制的流程图设计器变得异常简单,极大地提升了开发效率和用户体验。
- 它的学习曲线如何?
入门极快,核心概念清晰。官方文档和示例非常丰富,能让你在短时间内搭建出可用的原型。而它的高扩展性又能支撑起极其复杂的业务场景。
无论是做 OA 审批、自动化运维、低代码平台,还是任何需要可视化编排的场景,LogicFlow 都绝对值得你花时间去了解和尝试。