LogicFlow 是一款由滴滴体验平台技术研发的开源流程图编辑框架,

基本信息

• 开源与授权 ：LogicFlow 于 2020 年正式开源，采用 MIT 开源协议，允许在开源和商业项目中免费使用。
• 历史背景 ：在滴滴内部支持了客服业务下 IVR、工单流转、智能机器人等多个运营系统的流程配置需求后，逐步发展成为独立的开源项目。

特性优势

• 可视化模型 ：提供直观的可视化界面，用户可轻松创建、编辑和管理复杂的逻辑流程图，通过简单的鼠标操作如拖拽节点、连线等，快速构建流程图。
• 高可定制性 ：用户可根据自身业务需求定制节点、连接器和样式，包括节点的形状、大小、颜色，边的样式、颜色等，还能自定义节点和边的行为和属性，以满足特定用例。
• 灵活易拓展 ：内置丰富插件，如菜单、拖拽面板、小地图、控制面板等，还支持根据需求定制复杂插件，方便扩展 LogicFlow 的功能。同时，非核心功能插件化的设计，使得用户可按需引入插件，提高资源利用效率。
• 自执行引擎 ：执行引擎支持在浏览器端执行流程图逻辑，为无代码执行提供新思路，可快速验证流程图的逻辑正确性。
• 数据可转换 ：支持 LogicFlow 数据与 BPMN、Turbo 等各种后端执行引擎数据结构的转换，便于与不同系统进行集成和数据共享。
• 事件机制丰富 ：提供了丰富的事件机制，可监听节点、边的添加、删除、修改等操作，以及画布的缩放、移动等事件，方便与其他系统进行集成，实现更复杂的业务逻辑。
• 多框架支持与嵌入便捷 ：可嵌入到任何前端应用中，支持 React、Vue 等主流前端框架，方便在不同项目中使用。
• 兼容性强 ：在 IE11 及以上、Chrome 40+、Firefox、Safari、Edge 等浏览器上均能稳定运行，支持触摸屏操作，保证了在不同设备和浏览器环境下的使用体验。

核心概念

• 实例 ：LogicFlow 实例是流程图设计和管理的核心对象，负责初始化、渲染、操作和管理流程图中的所有元素，包括节点和边。通过 new LogicFlow() 创建实例，并指定渲染的容器等配置项。
• 节点 ：LogicFlow 内置了一些基础节点，如矩形、圆形、椭圆形、菱形、多边形、文本等，开发者可基于这些基础节点，定义符合自己业务逻辑的节点。节点具有唯一标识 id、类型 type、x 和 y 坐标、宽度 width 和高度 height 等属性。
• 边 ：用于表示节点与节点之间的连线，LogicFlow 的边支持基于继承的自定义机制，内置的边类型有直线边、折线边、曲线边等。边具有唯一标识 id、类型 type、起点节点 id 和终点节点 id 等属性。
• 主题 ：LogicFlow 提供了设置主题的方法，便于用户统一设置其内部所有元素的样式，如节点的背景色、边的颜色、字体颜色等，以满足不同的视觉需求。
• 网格 ：网格是指渲染 / 移动节点的最小单位，在移动节点时，保证每个节点中心点的位置都在网格上，有利于节点之间的对齐。
• 背景 ：提供可以修改画布的方法背景，包括背景颜色或背景图片，背景层位于画布的最底层。

主要组成部分

• core 包 ：包含图编辑的核心功能和对外暴露的图编辑 API，如节点、边、背景、网格、主题、事件等基础功能。
• extension 包 ：提供了非图编辑的功能插件，如菜单、控制栏、导航、bpmn 支持。

• 官方文档：https://docs.logic-flow.cn
• GitHub 仓库：https://github.com/didi/LogicFlow