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 写法需配合构建工具（如 Vite, Webpack）。若直接在浏览器运行，建议使用 CDN 方式引入。

步骤 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 支持、缩略图、框选工具等。

使用插件示例：

import { BpmnElement } from '@logicflow/extension';

// 注册插件
lf.use(BpmnElement);
// 之后可以使用 'bpmn:startEvent' 等 BPMN 类型的节点

总结

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

无论是做 OA 审批、自动化运维、低代码平台，还是任何可视化编排场景，LogicFlow 都值得尝试。