从0到1实现流程图应用01-开篇

Posted 2021-09-07 6d7sk8rn

开始

一个图可以简单的解释一个复杂的思想，同样，一个流程图可以清晰的可视化展示组织、工作流等复杂层次结构。在后面的一系列文章中，将会从 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 更适合来完成我们的流程图应用。

1. 源码：传送门
2. 记得给 X6 仓库加星