本文从0开始，介绍如何开发一个流程图应用，对比了多种前端绘图库，如jTopo、Vis.js、LogicFlow、Jsplumb、Joint、AntV G6和AntV X6。最终，基于AntV X6的选择理由是其图形定制能力强大，上手成本低，并且适合流程图场景。文章提供了一个系列文章的开篇，后续将深入探讨具体实现。
开始
一个图可以简单的解释一个复杂的思想，同样，一个流程图可以清晰的可视化展示组织、工作流等复杂层次结构。在后面的一系列文章中，将会从 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 开发的动态可视化库。该
最低0.47元/天 解锁文章
566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
