开始
一个图可以简单的解释一个复杂的思想，同样，一个流程图可以清晰的可视化展示组织、工作流等复杂层次结构。在后面的一系列文章中，将会从 0 到 1 完成一个流程图应用的开发。如果对你的工作有帮助或者你对图编辑引擎感兴趣，请静下心来读完这一系列文章，相信会有惊喜。
技术选型
提到绘图能力，web主要有两种实现方式：Canvas 和 SVG，我们看看这两种有什么差异：
| 方案 | 图形定制能力 | 上手难度 | 性能 |
|---|---|---|---|
| Canvas | 定制图形比较复杂 | 较高 | 大数据量场景性能突出 |
| SVG | 基于 DOM，图形定制能力强 | 较低 | 大数据量场景性能较差 |
再来看看前端社区开源解决方案：
jTopo
简介：jTopo 是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包
官网：http://www.jtopo.com/
优点：国产，文档简单，性能优越
缺点：没有开放源代码，2015 年已经停止更新，在 Vue/React/Angular 等现代框架中使用成本高
Vis.js
简介：Vis.js 是基于 HTML5 Canvas 开发的动态可视化库。该库被设计为易于使用，处理大量的动态数据
官网：https://visjs.org/
优点：开源免费，性能优越，功能比较丰富
缺点：英文文档，上手成本较高，节点定制能力较弱
LogicFlow
简介：专注流程可视化的前端解决方案
官网：http://logic-flow.org/
优点：具备流程图应用的常用功能，扩展性强
缺点：内置连线功能较弱，定制复杂节点比较麻烦
Jsplumb
简介：jsPlumb 是一个比较强大的绘图组件
官网：https://jsplumbtoolkit.com/
优点：功能丰富，支持各种自定义操作
缺点：分收费版和社区版，社区版功能较弱
Joint
简介：JointJS 是一个开源前端框架，支持绘制各种各样的流程图、工作流图等。Rappid 是 Joint 的商业版，提供了一些更强的插件
官网：https://www.jointjs.com/
优点：功能十分完善，上手比较容易
缺点：布局能力较弱，节点定制能力一般
AntV G6
简介：G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力
官网：https://g6.antv.vision/zh/
优点：功能完备，扩展性强，性能好，支持大量布局算法
缺点：节点定制能力一般
AntV X6
简介：X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用
官网：https://x6.antv.vision/zh
优点：节点极易定制，支持 React/Vue 节点，上手成本低，支持大量布局算法
缺点：基于 SVG，性能一般
最后
图形定制能力强、上手成本低是我们需要重点考虑的地方，另外一方面流程图场景，不需要渲染大量的节点，所以 X6 更适合来完成我们的流程图应用。
