原帖地址：https://juejin.cn/post/705256...LogicFlow是一个流程图编辑框架，提供一系列的流程图交互和编辑所需的功能和自定义节点、边、插件等灵活的扩展机制，可以支持流程图、思维导图、BPMN流程等多种逻辑编排场景的开发。LogicFlow的特点Inheritance-basedcustomizationmechanismLogicFlow的定制机制是基于继承实现的。开发者可以继承LogicFlow内置的节点和边，然后使用面向对象的重写机制。重写相关方法，实现自定义节点的效果。下面是一个LogicFlow自定义模型的示例图（PS：这个图也是用LogicFlow画的）：在LogicFlow中自定义一个节点，不仅需要定义节点的模型，还需要使用这种继承方式来自定义节点的视图。这是因为LogicFlow采用了mvvm的开发模式。基于mvvm的开发模型LogicFlow旨在在开发过程中将开发体验与当前流行的前端开发体验对齐，更好地理解代码层面，让更多人参与。我们选择在前端工程中开发应用程序。用于开发的广泛MVVM模式。定义图的View和Model层，同时将视图更新交给框架，让工程代码有一定程度的解耦。如果你熟悉react开发，可以直接阅读我们的源码。你会发现整个项目的阅读难度和你平时开发的业务系统差不多。所有非核心功能插件支持LogicFlow发布代码分为两个包：@logicflow/core和@logicflow/extension。核心包只包含了图编辑的核心功能和对外暴露的图编辑API。对于非图形编辑功能，如菜单、控制条、导航、bpmn支持、节点缩放等，在扩展包中以插件的形式提供。在实际应用中，您可以根据自己的产品逻辑自由选择插件。如果您对插件感到不满意，您也可以根据自己的需要重新实现一个。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项目已经开源一年，未来还有很多事情要做。2022年，我们将继续迭代维护LogicFlow。近期我们将重点关注BPMN功能对接、产品化、引擎开发：BPMN功能对接主要是因为我们目前内置的bpmn元素只支持bpmn2.0中的基本能力，我们会继续增加功能如未来的子过程、边界事件和中间事件。在产品化方面，我们打算基于LogicFlow的能力孵化一个开箱即用的流程图绘制工具。也就是上面画图工具的例子。在引擎化方面，我们会提供一个JS版本的流程执行引擎，让前端拥有“编辑流程=>流程数据=>执行流程”的完整技术栈，完善我们的技术生态，也希望使闭环业务变现诉求的前端团队。最后，LogicFlow整体还是一个比较新的框架，还请大家耐心等待，欢迎大家一起参与，帮助我们发现问题，共同建设。对于LogicFlow技术本身的实现细节，类似业务的讨论，以及使用LogicFlow遇到的问题，欢迎大家进群交流。LogicFlow官网：logic-flow.orggithub仓库地址：https://github.com/didi/Logic...添加微信号到用户群：logic-flow
