再见了付费工具，滴滴这款开源框架，好用到飞起！

做业务流程设计时，要么遇到工具定制性差、没法贴合自家业务风格，要么动态执行流程得依赖后端、操作臃肿，想加个专属功能还得硬改源码

今天给大家介绍一款由滴滴开源的、专注于业务自定义的流程图编辑框架 – LogicFlow，能帮我们轻松在业务系统内搭建出满足各种需求的流程图功能！

项目简介

LogicFlow是一款基于 TypeScript 开发的流程图编辑框架，专注解决业务场景下的定制化需求。它不仅能画常规流程图，还支持脑图、ER图、UML、工作流等多种图形，还提供了节点自定义、插件扩展等机制，能帮我们快速在业务系统里满足各类流程图需求，不管是个人开发者还是美团、滴滴这样的大厂，都能用它解决实际业务问题。

目前已经在Github上收获了 10.5K+ Star，非常的热门！

功能特性

• 高可定制性：节点样式、连接器、主题都能按业务需求改，自定义形状、颜色、图标、属性面板也不在话下。

• 丰富交互与可视化：支持节点拖拽、连线、复制、撤销、缩放等常见交互，通过拖拖拽拽就能创建、编辑复杂逻辑流程图。
• 灵活插件与扩展：内置属性面板、布局、mini-map 等常用插件，还能根据自身需求开发复杂插件，扩展能力拉满。

• 前端自执行引擎：无需依赖后端，在浏览器端就能执行流程图逻辑。
• 多数据格式互转：支持与 BPMN、Turbo 等后端执行引擎的数据结构互转，集成到现有业务系统时更方便，不用反复调整数据格式。
• 多框架与场景适配：官方提供 React、Vue、原生 JS 示例，支持流程图、UML、ER 图、脑图等多种场景，多种常见需求都能满足。

快速安装使用

上手 LogicFlow 非常简单，通过 npm/yarn/pnpm 就可以快速安装。

1. 安装方式

LogicFlow 支持 npm、yarn、pnpm 三种安装方式，大家根据自己常用的包管理工具选择即可，命令简单好记：

# npm 安装
npm install @logicflow/core @logicflow/extension --save

# yarn 安装
yarn add @logicflow/core @logicflow/extension

# pnpm 安装
pnpm add @logicflow/core @logicflow/extension

2. 基础使用

只需几步，就能快速渲染一个基础流程图，哪怕是新手也能轻松上手： 首先在页面中创建一个容器 DOM，用来承载流程图：

<div id="container"></div>

然后编写 JS 代码，准备流程图数据并初始化渲染：

// 引入 LogicFlow 核心和扩展
import LogicFlow from'@logicflow/core';
import'@logicflow/extension';

// 准备节点和边的数据
const data = {
// 节点数组：包含矩形、圆形两种节点，定义了ID、类型、位置和显示文本
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'
    }
  ]
};

// 初始化 LogicFlow 实例，指定容器、宽度和高度
const lf = new LogicFlow({
container: document.querySelector('#container'),
width: 700,
height: 600
});

// 渲染流程图
lf.render(data);

运行代码后，一个包含矩形节点、圆形节点和连接边的基础流程图就会显示在页面上，后续还能根据需求调整样式和交互。

另外，官方还提供了在线调试功能，有丰富的示例供大家体验，比如审批流、比赛晋级图、泳道图等，不用本地部署就能感受 LogicFlow 的核心能力，低成本了解它的使用方式。

小结

LogicFlow是一款非常出色的国产开源项目。它不仅仅是一个简单的绘图工具，更是一个专注于解决业务场景下流程图需求的专业级框架。如果你的项目正有此需求，不妨试试 LogicFlow！

更多细节功能，感兴趣的可以到项目地址查看：

https://github.com/didi/LogicFlow