LogicFlow：前端流程图编辑框架入门与实战

步骤 3：编写 JavaScript 逻辑

创建 app.js 文件：

// 引入 LogicFlow
import { LogicFlow } from '@logicflow/core';

// 1. 配置画布
const lf = new LogicFlow({
    container: document.querySelector('#container'),
    grid: true, // 开启网格，方便对齐
});

// 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, targetNodeId: 2 });

注意：ES Module 写法在部分浏览器中可能需构建工具支持。CDN 方式如下：

在 index.html 的 </body> 前加入：

<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script>
<script>
    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、MiniMap（缩略图）、SelectionSelect（框选工具）等。

使用插件通常非常简单：

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

总结

1. LogicFlow 是什么？ 强大、易扩展的前端流程图编辑框架。
2. 解决了什么问题？ 简化了在网页应用中嵌入专业流程图设计器的过程，提升开发效率和用户体验。
3. 学习曲线如何？ 入门快，核心概念清晰，文档丰富，支持复杂业务场景。

适用于 OA 审批、自动化运维、低代码平台等可视化编排场景。