开始
一个图能够简略的解释一个简单的思维，同样，一个流程图能够清晰的可视化展现组织、工作流等简单层次结构。在前面的一系列文章中，将会从 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 更适宜来实现咱们的流程图利用。
- 源码：传送门
- 记得给 X6 仓库加星