滴滴 LogicFlow：业务流程图编辑框架的完全指南

Fen9Pi2026/7/31大约 11 分钟

前言：当流程图遇上业务需求

想象这样一个场景：

你的业务系统需要一个流程图编辑器，让用户可以：

可视化设计业务流程
自定义节点和连接器
集成到现有系统中
执行流程图逻辑

传统方案的痛点：

功能不够灵活，难以定制
缺乏扩展机制，无法满足业务需求
集成复杂，需要大量开发工作
缺少文档和示例，学习成本高

如果有一个专注于业务自定义的流程图编辑框架呢？

LogicFlow 正是这样的解决方案：一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制。

今天，我们就来深入分析这个来自滴滴的开源项目。

一、项目概览

1.1 是什么？

LogicFlow 是滴滴开源的流程图编辑框架。

核心特点：

✅ 可视化模型：直观的可视化界面，轻松创建、编辑和管理复杂的逻辑流程图
✅ 高可定制性：定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图
✅ 灵活易拓展：内置丰富的插件，可定制复杂插件实现业务需求
✅ 自执行引擎：支持浏览器端执行流程图逻辑，为无代码执行提供新思路
✅ 数据可转换：支持与 BPMN、Turbo 等各种后端执行引擎数据结构转换
✅ TypeScript：完全使用 TypeScript 编写，类型安全
✅ SVG 渲染：基于 SVG 的渲染引擎，性能优异
✅ 开源免费：Apache-2.0 协议，完全开源

项目地址：https://github.com/didi/LogicFlow 官网：https://site.logic-flow.cn NPM：https://www.npmjs.com/package/@logicflow/core 开源协议：Apache-2.0 License Stars：11.6k+

1.2 核心价值

传统流程图编辑器的痛点：

功能不够灵活，难以定制
缺乏扩展机制，无法满足业务需求
集成复杂，需要大量开发工作
缺少文档和示例，学习成本高

LogicFlow 的解决方案：

高可定制性：可以定制节点、连接器和样式
灵活易拓展：内置丰富的插件，可定制复杂插件
简单易用：提供直观的可视化界面
文档完善：提供详细的文档和示例

二、核心架构

2.1 整体架构

核心思想： LogicFlow 采用模块化设计，将核心功能与扩展功能分离，提供灵活的定制能力。

流程图1

2.2 核心模块

1. @logicflow/core

Canvas：画布管理
Nodes：节点渲染
Edges：边渲染
Models：数据模型
Events：事件系统
Rendering：渲染引擎
Themes：主题系统
Interactions：交互系统

2. @logicflow/extension

Control：控制面板（缩放、适应画布等）
Menu：菜单插件
Selection：选择插件
DndPanel：拖拽面板
Bpmn：BPMN 元素
Snapshot：快照功能

3. @logicflow/layout

Dagre：分层布局
Tree：树形布局
Grid：网格布局

三、核心功能

3.1 可视化模型

核心思想：通过 LogicFlow 提供的直观可视化界面，用户可以轻松创建、编辑和管理复杂的逻辑流程图。

能力：

节点创建：支持矩形、圆形、椭圆、多边形等多种节点类型
边创建：支持直线、折线、曲线等多种边类型
拖拽编辑：支持节点和边的拖拽
缩放平移：支持画布的缩放和平移
对齐辅助：提供对齐线和网格辅助
快捷键：支持键盘快捷键操作

优势：

直观易用
功能完整
交互流畅

3.2 高可定制性

核心思想：用户可以根据自己的需要定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图。

定制能力：

1. 节点定制

// 自定义节点
class CustomNode extends RectNode {
  // 自定义渲染
  getShape() {
    const { model } = this.props;
    const { x, y, width, height, radius } = model;
    const h = factory.createSVGElement('rect');
    factory.createSVGElement(h, {
      x: x - width / 2,
      y: y - height / 2,
      width,
      height,
      radius,
    });
    return h;
  }
}

2. 连接器定制

// 自定义连接器
lf.register('custom-edge', CustomEdge);

3. 样式定制

// 自定义主题
lf.setTheme({
  rect: {
    fill: '#ffffff',
    stroke: '#000000',
    strokeWidth: 2,
  },
  circle: {
    fill: '#ffffff',
    stroke: '#000000',
    strokeWidth: 2,
  },
});

优势：

完全定制
灵活扩展
符合业务需求

3.3 灵活易拓展

核心思想：内置提供丰富的插件，用户也可根据自身需求定制复杂插件实现业务需求。

官方插件：

1. Control 插件

提供缩放、适应画布、重置等功能
支持自定义控制按钮

2. Menu 插件

提供右键菜单
支持自定义菜单项

3. Selection 插件

提供框选功能
支持多选操作

4. DndPanel 插件

提供拖拽面板
支持自定义拖拽项

5. Bpmn 插件

提供 BPMN 元素
支持 BPMN 标准

6. Snapshot 插件

提供快照功能
支持导出图片

自定义插件：

// 自定义插件
class CustomPlugin {
  constructor({ lf }) {
    this lf = lf;
  }
  render(lf, container) {
    // 自定义渲染逻辑
  }
  destroy() {
    // 清理逻辑
  }
}

优势：

内置丰富插件
易于扩展
满足业务需求

3.4 自执行引擎

核心思想：执行引擎支持浏览器端执行流程图逻辑，为无代码执行提供新思路。

能力：

浏览器端执行：支持在浏览器端执行流程图逻辑
节点执行：支持节点的执行逻辑
边执行：支持边的执行逻辑
条件判断：支持条件判断和分支
循环执行：支持循环执行
并行执行：支持并行执行

示例：

// 执行流程图
lf.executed((data) => {
  console.log('执行结果:', data);
});

优势：

无代码执行
浏览器端运行
灵活扩展

3.5 数据可转换

核心思想：支持 LogicFlow 数据与 BPMN、Turbo 等各种后端执行引擎数据结构转换能力。

转换能力：

LogicFlow → BPMN：将 LogicFlow 数据转换为 BPMN 格式
BPMN → LogicFlow：将 BPMN 数据转换为 LogicFlow 格式
LogicFlow → Turbo：将 LogicFlow 数据转换为 Turbo 格式
Turbo → LogicFlow：将 Turbo 数据转换为 LogicFlow 格式

示例：

// 转换为 BPMN
const bpmnData = lf.toBPMN();

// 从 BPMN 转换
lf.parseFromBPMN(bpmnData);

优势：

支持多种格式
易于集成
标准兼容

四、安装与使用

4.1 安装

NPM：

npm install @logicflow/core @logicflow/extension --save

Yarn：

yarn add @logicflow/core @logicflow/extension

PNPM：

pnpm add @logicflow/core @logicflow/extension

4.2 快速上手

1. 准备容器：

<!-- LogicFlow 容器 DOM -->"
<div id="container"></div>

2. 准备数据：

// 准备数据
const data = {
  // 节点
  nodes: [
    {
      id: '21',
      type: 'rect',
      x: 100,
      y: 200,
      text: '矩形节点',
    },
    {
      id: '50',
      type: 'circle',
      x: 300,
      y: 400,
      text: '圆形节点',
    },
  ],
  // 边
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '50',
      targetNodeId: '21',
    },
  ],
};

3. 渲染画布：

// 渲染画布
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600,
});

lf.render(data);

4.3 使用插件

1. Control 插件：

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

lf.use(Control);

2. Menu 插件：

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

lf.use(Menu);

3. Selection 插件：

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

lf.use(Selection);

4. DndPanel 插件：

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

lf.use(DndPanel);

4.4 自定义节点

1. 定义节点：

class CustomNode extends RectNode {
  getShape() {
    const { model } = this.props;
    const { x, y, width, height, radius } = model;
    const style = model.getNodeStyle();
    return h('g', {}, [
      h('rect', {
        ...style,
        x: x - width / 2,
        y: y - height / 2,
        rx: radius,
        ry: radius,
        width,
        height,
      }),
      h('text', {
        x: x,
        y: y,
        fontSize: '12px',
        fill: '#000000',
        textAnchor: 'middle',
        dominantBaseline: 'middle',
      }, model.getText()),
    ]);
  }
}

2. 注册节点：

lf.register({
  type: 'custom-node',
  view: CustomNode,
  model: CustomNodeModel,
});

五、实际应用场景

5.1 工作流编辑器

场景：

企业审批流程
业务流程设计
工作流自动化

使用 LogicFlow：

// 定义工作流节点
const workflowNodes = [
  { type: 'start', text: '开始' },
  { type: 'task', text: '任务' },
  { type: 'gateway', text: '网关' },
  { type: 'end', text: '结束' },
];

// 渲染工作流
lf.render({
  nodes: workflowNodes,
  edges: [...],
});

优势：

可视化设计
灵活定制
易于集成

5.2 脑图编辑器

场景：

思维导图
知识图谱
概念图

使用 LogicFlow：

// 定义脑图节点
const mindMapNodes = [
  { type: 'root', text: '中心主题' },
  { type: 'branch', text: '分支1' },
  { type: 'branch', text: '分支2' },
];

// 使用树形布局
import { DagreLayout } from '@logicflow/layout';
lf.use(DagreLayout);

// 渲染脑图
lf.render({
  nodes: mindMapNodes,
  edges: [...],
});

优势：

自动布局
易于扩展
支持大型图

5.3 ER 图编辑器

场景：

数据库设计
表关系设计
数据模型设计

使用 LogicFlow：

// 定义 ER 图节点
const erNodes = [
  { type: 'table', text: '用户表' },
  { type: 'table', text: '订单表' },
];

// 定义关系边
const erEdges = [
  { type: 'relation', sourceNodeId: '用户表', targetNodeId: '订单表' },
];

// 渲染 ER 图
lf.render({
  nodes: erNodes,
  edges: erEdges,
});

优势：

可视化设计
关系清晰
易于维护

5.4 UML 编辑器

场景：

类图设计
时序图设计
活动图设计

使用 LogicFlow：

// 定义 UML 节点
const umlNodes = [
  { type: 'class', text: 'User' },
  { type: 'class', text: 'Order' },
];

// 定义关系边
const umlEdges = [
  { type: 'association', sourceNodeId: 'User', targetNodeId: 'Order' },
];

// 渲染 UML 图
lf.render({
  nodes: umlNodes,
  edges: umlEdges,
});