LogicFlow 前端流程图编辑框架实战指南 | 极客日志

JavaScriptSaaS大前端

LogicFlow 前端流程图编辑框架实战指南

综述由AI生成LogicFlow 是一款专注于业务流程图编辑的前端开源框架。其核心优势，包括 API 友好、高扩展性、数据驱动及中文文档完善。通过实战演示了如何初始化项目、创建 HTML 容器、编写 JavaScript 逻辑来渲染基础流程图。进阶部分展示了如何自定义业务节点（如审批节点），并说明了流程图的输入输出数据格式（JSON）。此外还提及了插件生态系统，如 BPMN 适配和缩略图功能。该框架适用于 OA 审批、低代码平台等可视化编排场景，帮助开发者快速集成专业的流程图设计器。

292440837发布于 2026/2/5更新于 2026/5/29296 浏览

引言：什么是 LogicFlow？

想象一下，你需要在你管理的后台系统中，加入一个功能：让用户能够像搭积木一样，通过拖拽来定义一个复杂的业务流程（比如审批流、数据流转等）。

官网地址：https://07.logic-flow.cn/

❓你会怎么做？

使用现成的流程图工具？ (如 draw.io 嵌入) -> 功能固定，难以与业务深度集成。
从零开始用 Canvas 或 SVG 手写一个？ -> 工程量巨大，坑多到怀疑人生。

这时候，LogicFlow 就像一位'天降神兵'，它是一款专注于业务流程图编辑的前端开源框架。它不关心你的后端是什么，只专注于在前端页面上，为你提供一个功能强大、易于扩展的流程图绘制区域。

🎯核心定位：让开发者能快速、轻松地在自己的网页应用中集成一个专业的流程图设计器。

一、为什么选择 LogicFlow？它的核心优势是什么？

LogicFlow 流程图示例

极易上手，API 设计友好 LogicFlow 的 API 设计非常直观。只需几行代码，你就能创建一个基础的流程图编辑器。对于新手极其友好。
高扩展性，你的想象力是唯一的限制 这是 LogicFlow 最强大的地方。它几乎允许你自定义所有东西：
- 节点：除了基础矩形、圆形，你可以自定义成'用户任务'、'系统任务'、'网关'等任何业务节点。
- 连线：自定义连线的样式、箭头，甚至在线条上嵌入文案或图标。
- 插件：官方和社区提供了丰富的插件，如菜单、缩略图、BPMN 适配等。
数据驱动，与业务无缝集成 LogicFlow 采用纯粹的数据驱动模式。你不需要直接操作 DOM，只需关心图的数据。获取到的 JSON 数据可以轻松保存到数据库或发送给后端。
国产开源，中文文档齐全 由国内团队精心打造，拥有完善的中文文档和活跃的社区，沟通无障碍，解决问题快人一步。

提示：LogicFlow 支持 html 、vue 、react 等前端框架，本文使用 html 集成。

二、核心概念快速理解

在开始写代码前，我们先建立三个核心心智模型：

概念	是什么？	类比
GraphModel (图模型)	整个流程图的数据和逻辑核心。它管理着所有的节点和边。	一个家族的'族谱'，记录了所有成员（节点）和他们之间的关系（边）。
Node (节点)	流程图中的一个个基础元素，比如步骤、任务。	族谱中的一个个'人'，比如父亲、儿子。
Edge (边/连线)	连接两个节点的线，表示流程的走向。	族谱中的'父子关系'，连接着两个人。

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

# 创建一个新的目录并初始化
mkdir my-logicflow-demo
cd my-logicflow-demo
npm init -y
# 安装 LogicFlow
npm install @logicflow/core

<!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>

// 引入 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});

<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script>
<script>
    // 将 app.js 的内容放在这里
    const { LogicFlow } = window.LogicFlow;
    // ... 其余代码与上面 app.js 相同
</script>

// 继承 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:'主管审批',});

const graphData = lf.getGraphData();
console.log(JSON.stringify(graphData)); // 输出：{"nodes": [...], "edges": [...]}

const previouslySavedData = {...}; // 从 API 获取的数据
lf.render(previouslySavedData);

import { BpmnElement } from '@logicflow/extension';
// 注册插件
lf.use(BpmnElement);
// 之后你就可以使用 'bpmn:startEvent' 等 BPMN 类型的节点了

LogicFlow 前端流程图编辑框架实战指南

引言：什么是 LogicFlow？

一、为什么选择 LogicFlow？它的核心优势是什么？

二、核心概念快速理解

更多推荐文章

相关免费在线工具

三、实战：5 分钟创建一个你的第一个流程图

步骤 1：初始化项目并安装

步骤 2：创建 HTML 容器

步骤 3：编写 JavaScript 逻辑

步骤 4：查看结果！

四、进阶：自定义一个业务节点

五、数据：流程图的输入与输出

六、生态系统与未来

总结

更多推荐文章

相关免费在线工具

LogicFlow 前端流程图编辑框架实战指南

引言：什么是 LogicFlow？

一、为什么选择 LogicFlow？它的核心优势是什么？

二、核心概念快速理解

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

三、实战：5 分钟创建一个你的第一个流程图

步骤 1：初始化项目并安装

步骤 2：创建 HTML 容器

步骤 3：编写 JavaScript 逻辑

步骤 4：查看结果！

四、进阶：自定义一个业务节点

五、数据：流程图的输入与输出

六、生态系统与未来

总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具