一个超棒的开源流程图编辑工具

本期给大家推荐一个超棒的开源流程图编辑工具。无论你是在处理简单的任务流还是复杂的业务流程，LogicFlow 都能轻松搞定。
源码地址


LogicFlow 是什么？
简单来说，LogicFlow 就是一个让你可以用积木一样的方式来构建和编辑流程图的框架。想象一下，它就像是一个数字化的乐高拼图，可以任意组合，拼出你心中的流程图样子。由滴滴开发的 LogicFlow，设计上注重灵活性和扩展性，非常适合那些需要高度定制化的场景。

在线示例

为什么选择 LogicFlow？
1、灵活又可扩展

LogicFlow 的架构像乐高积木一样，每个功能都可以像插件一样自由组合。比如，你需要在流程图中添加一个特殊的“审批”节点，只需要简单几步就可以实现。

// 自定义一个审批节点
class ApprovalNode extends lf.BaseNode {
  drawShape() {
    const rect = this.graph.createRect({
      x: this.model.x,
      y: this.model.y,
      width: 100,
      height: 50,
      rx: 5,
      ry: 5,
      fill: '#fff',
      stroke: '#000'
    });
    return rect;
  }
}
// 注册这个新节点
lf.register(ApprovalNode);

2、独立自主

LogicFlow 支持独立的流程图，这意味着它不依赖于任何特定的流程引擎，可以完美地融入各种应用场景中，比如项目管理系统或 CRM 系统中的客户跟踪流程。

const projectFlowData = {
  nodes: [
    { id: 'task1', type: 'rect', x: 100, y: 150, text: '创建任务' },
    { id: 'task2', type: 'rect', x: 300, y: 150, text: '分配任务' },
    { id: 'task3', type: 'rect', x: 500, y: 150, text: '完成任务' }
  ],
  edges: [
    { type: 'polyline', sourceNodeId: 'task1', targetNodeId: 'task2' },
    { type: 'polyline', sourceNodeId: 'task2', targetNodeId: 'task3' }
  ]
};
lf.render(projectFlowData);

3、专业又强大

LogicFlow 绝对不是普通的绘图工具，它拥有丰富的节点和连线类型，还有超级灵活的样式设置功能。不管你需要画简单的工作流，还是超复杂的业务流程，LogicFlow 都能轻松搞定。

你甚至可以用它绘制那种包含多个步骤的复杂业务流程图。

const businessFlowData = {
  nodes: [
    { id: 'step1', type: 'polygon', x: 100, y: 100, text: '起始节点' },
    { id: 'step2', type: 'polygon', x: 300, y: 100, text: '决策节点' },
    { id: 'step3', type: 'polygon', x: 500, y: 100, text: '终止节点' }
  ],
  edges: [
    { type: 'bezier', sourceNodeId: 'step1', targetNodeId: 'step2' },
    { type: 'bezier', sourceNodeId: 'step2', targetNodeId: 'step3' }
  ]
};
lf.render(businessFlowData);