引言：什么是 LogicFlow？
想象一下，你需要在你管理的后台系统中，加入一个功能：让用户能够像搭积木一样，通过拖拽来定义一个复杂的业务流程（比如审批流、数据流转等）。
官网地址：https://07.logic-flow.***/
❓你会怎么做？
- 使用现成的流程图工具？ (如
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
# 安装 LogicFlow
npm install @logicflow/core
步骤 2：创建 HTML 容器
创建一个 index.html 文件：
<!DOCTYPE html>
<html lang="zh-***">
<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.***/npm/@logicflow/core/dist/style/index.css" />
</head>
<body>
<!-- 准备一个容器，LogicFlow 会在这个 div 里渲染画布 -->
<div id="container" style="width: 1000px; height: 600px; border: 1px solid #aaa;"></div>
<script src="./app.js"></script>
</body>
</html>
步骤 3：编写 JavaScript 逻辑
创建一个 app.js 文件：
// 引入 LogicFlow
import { LogicFlow } from '@logicflow/core';
// 注意：如果直接在浏览器中运行，请使用 CDN 方式引入，这里为了演示使用 ES Module。
// 1. 配置画布
const lf = new LogicFlow({
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> 前加入：
<script src="https://cdn.jsdelivr.***/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）：控制节点的外观长什么样
class ApprovalNode extends RectNode {
// 这里可以重写获取形状的方法，比如添加图标
}
// 2. 定义模型（Model）：控制节点的数据和行为逻辑
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;
}
}
// 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 都绝对值得你花时间去了解和尝试。
