LogicFlow 是一款专注于业务流程图编辑的前端开源框架。其核心优势，包括 API 友好、高扩展性、数据驱动及中文文档完善。通过实战演示了如何初始化项目、创建 HTML 容器、编写 JavaScript 逻辑来渲染基础流程图。进阶部分展示了如何自定义业务节点（如审批节点），并说明了流程图的输入输出数据格式（JSON）。此外还提及了插件生态系统，如 BPMN 适配和缩略图功能。该框架适用于 OA 审批、低代码平台等可视化编排场景，帮助开发者快速集成专业的流程图设计器。
想象一下，你需要在你管理的后台系统中，加入一个功能：让用户能够像搭积木一样，通过拖拽来定义一个复杂的业务流程（比如审批流、数据流转等）。
官网地址：https://07.logic-flow.cn/
❓你会怎么做？
draw.io 嵌入) -> 功能固定，难以与业务深度集成。Canvas 或 SVG 手写一个？ -> 工程量巨大，坑多到怀疑人生。这时候，LogicFlow 就像一位'天降神兵'，它是一款专注于业务流程图编辑的前端开源框架。它不关心你的后端是什么，只专注于在前端页面上，为你提供一个功能强大、易于扩展的流程图绘制区域。
🎯核心定位：让开发者能快速、轻松地在自己的网页应用中集成一个专业的流程图设计器。
LogicFlow 最强大的地方。它几乎允许你自定义所有东西：
DOM，只需关心图的数据。获取到的 JSON 数据可以轻松保存到数据库或发送给后端。提示：LogicFlow 支持
html、vue、react等前端框架，本文使用html集成。
在开始写代码前，我们先建立三个核心心智模型：
| 概念 | 是什么？ | 类比 |
|---|---|---|
| GraphModel (图模型) | 整个流程图的数据和逻辑核心。它管理着所有的节点和边。 | 一个家族的'族谱'，记录了所有成员（节点）和他们之间的关系（边）。 |
| Node (节点) | 流程图中的一个个基础元素，比如步骤、任务。 | 族谱中的一个个'人'，比如父亲、儿子。 |
| Edge (边/连线) | 连接两个节点的线，表示流程的走向。 | 族谱中的'父子关系'，连接着两个人。 |
理解了这三点，你就掌握了 LogicFlow 80% 的运作方式。
俗话说，光说不练假把式。让我们来真刀真枪地创建一个简单的流程图。
# 创建一个新的目录并初始化
mkdir my-logicflow-demo
cd my-logicflow-demo
npm init -y
# 安装 LogicFlow
npm install @logicflow/core
创建一个 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>
<!-- 准备一个容器，LogicFlow 会在这个 div 里渲染画布 -->
<div id="container" style="width: 1000px;height: 600px;border: 1px solid #aaa;"></div>
<script src="./app.js"></script>
</body>
</html>
创建一个 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.net/npm/@logicflow/core/dist/logic-flow.js"></script>
<script>
// 将 app.js 的内容放在这里
const { LogicFlow } = window.LogicFlow;
// ... 其余代码与上面 app.js 相同
</script>
用浏览器打开你的 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.(, { : , : , });
lf.({ :,
刷新页面，你会看到一个风格独特的'主管审批'节点！通过这种强大的自定义能力，你可以构建出完全贴合你业务需求的流程图。
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 拥有一个繁荣的插件生态系统：
使用插件通常非常简单：
import { BpmnElement } from '@logicflow/extension';
// 注册插件
lf.use(BpmnElement);
// 之后你就可以使用 'bpmn:startEvent' 等 BPMN 类型的节点了
无论是做 OA 审批、自动化运维、低代码平台，还是任何需要可视化编排的场景，LogicFlow 都绝对值得你花时间去了解和尝试。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online