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

编写逻辑

在 app.js 中初始化实例并渲染。注意，如果直接在浏览器运行，建议使用 CDN 方式引入脚本以避免 ES Module 兼容问题。

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

const lf = new LogicFlow({
  container: document.querySelector('#container'),
  grid: true, // 开启网格辅助对齐
});

lf.render();
lf.setDefaultEdgeType('polyline'); // 默认折线

若需直接使用 CDN，可在 index.html 的 </body> 前加入：

<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script>
<script>
  const { LogicFlow } = window.LogicFlow;
  // ... 其余代码同上
</script>

添加节点

通过 API 添加初始节点和连线，实际开发中这部分逻辑通常封装在业务组件内：

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 });

刷新页面，你将看到一个包含两个节点和一条连线的流程图，可以直接拖拽调整位置。

自定义业务节点

基础节点往往无法满足业务需求，例如需要特定的'审批节点'。LogicFlow 允许继承 RectNode 来定制外观和行为。

import { RectNode, RectNodeModel } from '@logicflow/core';

// 1. 定义视图：控制节点的外观长什么样
class ApprovalNode extends RectNode {
  // 这里可以重写获取形状的方法，比如添加图标
}

// 2. 定义模型：控制节点的数据和行为逻辑
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 数据保存至数据库；回显时直接将数据传入 lf.render() 即可。

// 获取数据（保存）
const graphData = lf.getGraphData();
console.log(JSON.stringify(graphData));

// 渲染数据（回显）
const previouslySavedData = {...}; // 从 API 获取的数据
lf.render(previouslySavedData);

插件生态

官方扩展包 @logicflow/extension 提供了丰富功能，如 BPMN 规范支持、缩略图导航、框选工具等。

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

// 注册插件
lf.use(BpmnElement);

// 之后你就可以使用 'bpmn:startEvent' 等 BPMN 类型的节点了

总结

LogicFlow 为前端集成专业流程图设计器提供了高效方案。它降低了开发门槛，同时保留了足够的扩展空间以应对复杂的业务场景，适用于 OA 审批、自动化运维及低代码平台等可视化编排需求。无论是做工作流引擎还是可视化配置中心，LogicFlow 都绝对值得尝试。