原贴地址：https://juejin.cn/post/705256…
LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所需的性能和灵便的自定义节点、边、插件等拓展机制，能够反对研发各种逻辑编排场景，如流程图、脑图、BPMN 流程等。
LogicFlow 的特点
基于继承的自定义机制
LogicFlow 的自定义机制是基于继承来实现。开发者能够继承 LogicFlow 内置的节点、边，而后利用面向对象的重写机制。重写样相干的办法，来达到自定义节点的成果。
以下是 LogicFlow 自定义 model 示例图（PS: 此图也是用 LogicFlow 绘制）:
LogicFlow 中要想自定义一个节点，不仅须要定义这个节点的 model, 还须要利用这种继承形式来自定义节点的 view，这是因为 LogicFlow 采纳 mvvm 这种开发模式。
基于 mvvm 的开发模式
LogicFlow 为了开发的时候将开发体验和当初前端风行的开发体验对齐，也为了在代码层面更好的了解，让更多的人能够参加进来，咱们抉择了在前端工程发利用十分宽泛的 MVVM 模式进行开发。定义图的 View 和 Model 层，同时将视图更新交给框架来做，使工程代码具备肯定的解耦。如果大家相熟 react 开发的话，能够间接浏览咱们的源码，你们能够发现整个我的项目浏览起来难度和您平时开发的业务零碎差不多。
所有非核心性能插件化反对
LogicFlow 公布代码分为 @logicflow/core 和 @logicflow/extension 两个包，其中 core 包仅蕴含图编辑的外围性能和对外裸露的图编辑 API。而对于非图编辑的性能，例如菜单、管制栏、导航、bpmn 反对、节点缩放等都是以插件的模式提供在 extension 包中。在理论利用中，能够依照本人的产品逻辑自由选择插件，如果感觉插件不称心，也齐全能够基于本人的需要从新实现一个。
LogicFlow 场景示例
LogicFlow 开发的核心思想之一是高扩展性。咱们开发 LogicFlow 的初衷就是在流程图相干的业务上，让前端不再成为产品的瓶颈。上面是咱们实现的局部示例：
bpmn 示例
LogicFlow 实现了 BPMN 扩大，能够间接应用 LogicFlow 来绘制兼容 BPMN2.0 标准的流程，并且其导出的数据能够在 Activiti 流程引擎上运行。
地址: http://logic-flow.org/usage/b…
示例图如下:
作图工具示例
LogicFlow 不仅反对开发相似 bpmn.js 这种固定整体款式、更偏差生成数据在流程引擎可执行的流程图工具。也反对实现相似 ProcessOn 这种自在管制款式的作图工具。
地址：http://logic-flow.org/mvp/ind…
示例图如下：
审批流示例
这里是咱们在 react 我的项目中实现的审批流示例
地址：http://logic-flow.org/usage/a…
自定义场景
这里是咱们在 vue 我的项目中实现的自定义场景示例
地址：https://github.com/xinxin93/l…
LogicFlow 将来布局
LogicFlow 我的项目开源曾经满 1 年，在将来依然还有很多事件要做，在 2022 年咱们会持续作为迭代保护 LogicFlow，近期咱们的重点在 BPMN 性能对齐、产品化、引擎话这些方向发力：
BPMN 性能对齐次要是咱们目前内置的 bpmn 元素只反对 bpmn 2.0 中的根底能力，后续咱们会持续减少子流程、边界事件、两头事件等性能。
产品化方面，咱们打算基于 LogicFlow 的能力来孵化一款开箱即用的流程图作图工具。也就是下面作图工具示例。
引擎化方面，咱们将提供一款 JS 版的流程执行引擎，让前端具备“编辑流程 => 流程数据 => 执行流程”这一整套技术栈，欠缺咱们的技术生态，也心愿赋能有闭环业务实现诉求的前端团队。
最初
LogicFlow 整体来说还是一个比拟新的框架，请大家多一点急躁，也欢送大家一起参加进来，帮忙咱们发现问题，一起共建。对于 LogicFlow 技术自身的实现细节、对于类似业务的探讨、应用 LogicFlow 遇到的问题也都欢送大家进群来交换。
LogicFlow 官方网站：logic-flow.org
github 仓库地址：https://github.com/didi/Logic…
增加微信号进用户群：logic-flow