10.7k Star！滴滴出品，这款顶级流程图编辑框架，业务自定义简直绝了！

发布日期: 2025-09-30

大家好，我是热爱开源的了不起！

每次画业务流程图是不是都让你头大？商业工具太贵，开源方案又不够灵活，改个节点样式都得改源码。

今天给大家介绍一款由滴滴团队开源的LogicFlow——这可不是普通的画图工具，而是能让你”画完即运行”的流程图编辑框架！

项目简介

LogicFlow是一款基于 TypeScript 开发的流程图编辑框架，专注解决业务场景下的定制化需求。它不仅能画常规流程图，还支持脑图、ER图、UML、工作流等多种图形，最牛的是自带前端执行引擎，画好的流程图可以直接在浏览器里跑业务逻辑！

已经在Github上收获了 10.7K+ Star，非常受欢迎！

功能亮点

可视化拖拽编辑：矩形、圆形等基础节点即拖即用，支持撤销/缩放等常规操作
深度定制能力：节点样式、连接线、属性面板全可自定义，轻松适配企业UI规范
插件化生态：内置MiniMap、节点面板等插件，支持二次开发复杂业务插件
自执行引擎：流程图可在浏览器直接运行逻辑，实现无代码业务编排
多格式兼容：支持与BPMN、Turbo等引擎数据互转，企业级集成无压力
跨框架支持：完美兼容Vue/React/原生JS，现有项目无缝接入

项目安装使用

支持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

基础使用

第一步：在HTML里加个容器，用来放流程图画布；
第二步：准备节点和边的数据，定义节点类型、位置、文本；

第三步：初始化LogicFlow实例，渲染画布。
完整代码示例：

<!-- 1. 准备画布容器 -->
<div id="container"></div>

<script>
// 2. 导入LogicFlow核心和扩展
import LogicFlow from '@logicflow/core';
import '@logicflow/extension';

// 3. 准备流程图数据（节点+边）
const flowData = {
  nodes: [
    { id: 'start', type: 'rect', x: 150, y: 100, text: '流程开始' },
    { id: 'process', type: 'circle', x: 400, y: 100, text: '业务处理' },
    { id: 'end', type: 'diamond', x: 650, y: 100, text: '流程结束' }
  ],
  edges: [
    { type: 'polyline', sourceNodeId: 'start', targetNodeId: 'process' },
    { type: 'polyline', sourceNodeId: 'process', targetNodeId: 'end' }
  ]
};

// 4. 初始化并渲染
const lf = new LogicFlow({
  container: document.getElementById('container'), // 绑定容器
  width: 800, // 画布宽度
  height: 600 // 画布高度
});
lf.render(flowData); // 渲染流程图
</script>

这样一个包含“开始-处理-结束”的基础流程图就出来了，上手门槛极低。