流程图绘图插件选型

一、 需求场景

通过流程图来进行数据建模，如protocol的state以及流程性签核所需要的数据，目前是通过表单输入建模，或去GUI 的state model模块建模。现需在MES里集成可视化流程图绘图插件，以方便建模。
对于库的选择，除了功能是否能满足项目需求外，还需要看这个项目本身的发展情况，如 GitHub 的 contributors 页面能看出这个项目是否活跃如长期提交的，说明发展稳定，用户量大，如果长时间不更新发版，意味着项目可能已经弃坑了。鉴于此，第一优先考虑大厂的、稳定的、长期活跃的库。
列入考虑范围的有以下六个：

1. mxGraph：
2. jsPlumb:
3. @acimini/cm-d3-graphs: github上star太少，且默认样式单调。更主要的原因是这款是图表类型插件，其中包含pie chart, line, tree等等，其中包括flow chart。Therefore , it’s not professional enough.
4. Flowable：企业版支持angular集成但付费。opensource版不支持ng2集成。
5. Logic Flow
6. AntV X6
   以上，第三和第四由于备注原因不做详细调研，其余四种详细信息如下所示。

二、 框架选项

Option I. mxGraph

mxGraph是一个强大的JavaScript流程图前端库,在github上有三千多个star，提供了90多个demo。支持复杂的数据结构的表达，例如图的节点很多时，可以对图的节点和边进行布局,mxGraph支持树状布局、力导向布局和层次布局等常见布局算法。
其中draw.io 是一个比较知名的开源绘图网站，就是用 mxGraph 进行开发的。大厂背书，reliable enough。
优点：

1. 支持图层管理
   管理图形的层叠可以通过mxGraph 暴露的API处理，不需要自己使用原生 z-index。
2. 支持边界扩充
3. 利用mxGraph的api，可以绘制各种复杂图形和对图进行数据分析，以及对图进行一些复杂操作，如折叠展开，树状布局，层次布局等。

缺点：

1. mxGraph对样式的支持是非常不完善的。
   首先不支持css。意味着无法使用样式继承，样式类这些特性，修改的时候需要通过API函数，传入JSON对象，这样会导致很多重复样式代码，同时不方便样式覆盖。比如实现一个高亮样式的，如果支持CSS，只需要写个高亮样式，增删类名即可。
   但是mxgraph要写成对象，同时在取消高亮时要手动清除对应属性。相同的功能，代码量多出20-30行，且通过js对样式基本属性进行修改,降低了渲染性能。考虑到用户进行拖拽、连线功能时的操作频率，有卡顿的风险。
2. 只有英文文档，增加了一定的开发成本。
3. 文档不够完善。部分配置、参数未说明，且官方实例无明显的阅读顺序，无法结合代码说明问题，导致学习成本比较大。

Option II. jsPlumb

jsPlumb是一个强大的JavaScript连线库，提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等，比如思维导图，流程图，状态机，组织架构图等。
jsPlumb 的 start数、npm下载量都是绘图框架中非常高的，是主流的绘图框架巨头。分为两个版本，community免费版和toolkit收费版。对于没有复杂交互和精美动画的业务需求免费版即可。

优点：

1. 采用的是svg和html混排的做法，所有节点都是html，所有连线都是单独的svg节点包裹的path元素，对于高度定制化节点样式是非常方便的，适合静态展示的图形的绘制。
2. 图表中的项目锚点和连接的所有参数都是非常精细可控的。

缺点：

1. 社区版不支持angular集成。
2. 没有内置导航：第一是放大、缩小，第二是可拖拽改变视口的 minimap。无法无限拓展画布。
3. 没有做图层管理：导致绘图过程中做不到一些想要的图层叠加效果，如果用 z-index 去控制，增加了项目维护成本，因为jsPlumb 的靶点是通过绝对定位附着在节点上的，不仅仅是节点的 z-index 还有靶点的 z-index都需要处理。

Option II. jsPlumb

Logic Flow是由滴滴智能体验平台研发的一款流程可视化前端框架，具备流程图应用的常用功能，扩展性强。框架提供了流程图交互、节点自定义、插件等拓展机制等。可应用于工作审批配置、流程配置、ER图、BPMN流程等场景。
优点：

1. 不仅支持开发固定的整体样式，也支持实现自由控制样式的作图工具。见上图。
2. 提供了丰富的 API ，内置插件丰富，如miniMap、面板拖拽功能等。
3. 支持自定义插件，当Logic flow提供的普适性的插件，不一定都符合业务需求时，可以基于自己的业务场景自定义插件。

缺点：

1. 官方文档没有angular集成实例，只有react和vue。Github也只有三个angular版本的repo。
2. 内置连线功能较弱，定制复杂节点比较麻烦。
3. 相比较大厂的antv旗下产品，Logic Flow文档比较粗略。

Option IV. AntV X6

X6 是 AntV 旗下的图形编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，满足搭建图编辑类应用的需求。
相较于其他数据可视化工具（偏向于图可视化与分析应用），例如Antv G6,不能满足重图编辑(multigraph)需求（比如拖拽加入节点、从锚点拖拽创建边、编辑边的形状）。
鉴于此，蚂蚁基于内部的机器学习算法建模平台，推出了另一个图可视化领域的分支，即X6, 专业服务于重图编辑（如工作流、审批流、状态机）。
此外，在2022年12月，x6从1.xx 全新升级到2.0。具体改善的地方见以下优点。

优点：

1. 解决了渲染性能瓶颈。
   X6 的2.0 版通过重新设计渲染架构、异步模式、优先级调度、渲染任务合并等优化，新的渲染引擎比通用的 SVG 渲染引擎快 5 倍以上，无论是首屏还是交互方面，都提高了体验的丝滑感。

缺点：

1. 已经在GUI上实现的state model，得到反馈是线条连接不好用，至于原因是框架本身，或是1.0版本存在的易用性缺陷，还是操作原因，或是逻辑实现原因，待考证。
2. Version 2.0文档不完善。官方文档仅更新了教程部分。API 文档以及示例的部分是没有的，故有哪些功能及如何调用如何传参需查源码解决。
3. 官方支持vue、react来渲染节点内容，但不支持angular。解决思路：X6 的核心能力和框架无关，仍可参考x6的html版本进行开发，另外也可在npm 下载@antv/x6-angular-shape这个非官方社区插件（但仅限于x6 version 1.x）。

三、 总结

因为目前的需求（工作流，业务流）主要是在重图编辑，故Logic flow 和 Antv X6 更适合。
其中Antv旗下的数据可视化框架非常多，如G2、G6、Ant Design Charts等，各自侧重点不同，而X6侧重于快速搭建 DAG 图（有向无环图）、流程图、血缘图等，更符合目前需求。

mxGraph作为老牌的、强大的JavaScript流程图前端库,在此参与下载量数据对比。

mxGraph，AntV X6和Logic Flow：

• mxGraph学习成本比较大，且不再维护更新。AntV学习成本相对来说小很多，一直在持续更新。

• npmjs上的近一年下载量，Antv X6 明显优于 mxGraph和Logic Flow。

具体数据如下图所示：