Repolode
提交项目
didi

didi/LogicFlow

一款基于 TypeScript 的流程图编辑框架，可在业务系统中嵌入流程图、脑图、ER 图等可定制的图编辑器。

可替代:Microsoft VisioLucidchart

在 GitHub 查看官网
Star
11,773
Fork
1,386
未关闭 Issue
124
最近提交
15天前

这是什么？

LogicFlow 是一款流程图编辑框架，提供流程图交互与编辑所需的基础功能，并通过自定义节点、连接器、样式和插件等机制，帮助开发者快速在业务系统中实现类流程图的编辑需求。

除绘图外，LogicFlow 支持与 BPMN、Turbo 等后端执行引擎的数据结构互相转换，并提供可在浏览器端运行的流程图执行引擎。项目以 @logicflow/core、@logicflow/extension 等 npm 包形式发布，布局插件作为独立包提供。

框架使用 TypeScript 编写，官网提供教程与示例。npm 包内还附带本地文档，便于 AI 编程工具调用。

核心功能

  • 01支持自定义节点、连接器和样式，适配特定业务的图形需求。
  • 02提供插件机制，并有官方扩展与布局插件包。
  • 03支持与 BPMN、Turbo 等数据结构之间的互相转换。
  • 04内置可在浏览器端运行的流程图执行引擎。
  • 05基于 SVG 渲染的画布编辑器。

适用场景

  • 在内部业务系统中加入流程图或审批流程设计器。
  • 基于同一套图编辑基础构建 ER 图、UML 或脑图编辑器。
  • 将可视化工作流导出为 BPMN，供后端工作流引擎使用。
  • 在浏览器中直接执行简单的流程图逻辑。

快速上手

  1. 1

    使用 npm 安装核心和扩展包

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

    在 HTML 页面中添加容器元素

  3. 3

    创建 LogicFlow 实例并渲染数据

使用前须知

  • 需要浏览器前端环境以及 TypeScript 或 JavaScript 开发基础。

收录于专题

图表、示意图与动画可视化工具

标签

#flowchart#diagramming#visualization#typescript#svg#bpmn#graph-editor#diagram#didi#flow

常见问题

LogicFlow 是什么？
一款基于 TypeScript 的流程图编辑框架，可在业务系统中嵌入流程图、脑图、ER 图等可定制的图编辑器。 LogicFlow 是一款流程图编辑框架，提供流程图交互与编辑所需的基础功能，并通过自定义节点、连接器、样式和插件等机制，帮助开发者快速在业务系统中实现类流程图的编辑需求。
LogicFlow 可以免费使用吗？用的什么许可证？
LogicFlow 以 Apache-2.0 许可证开源。用于商业产品前，请先确认许可证条款。
LogicFlow 还在维护吗？
活跃维护中。LogicFlow 最近一次提交是在 2026年10月24日。
LogicFlow 适合用来做什么？
在内部业务系统中加入流程图或审批流程设计器。 基于同一套图编辑基础构建 ER 图、UML 或脑图编辑器。 将可视化工作流导出为 BPMN，供后端工作流引擎使用。 在浏览器中直接执行简单的流程图逻辑。
LogicFlow 怎么安装和运行？
使用 npm 安装核心和扩展包: npm install @logicflow/core @logicflow/extension --save 在 HTML 页面中添加容器元素 创建 LogicFlow 实例并渲染数据
在哪里获取 LogicFlow？
源代码和安装说明在 GitHub 上：https://github.com/didi/LogicFlow

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目