前端生成拓扑图、关系图、流程图的 JavaScript 插件有很多，各种编辑器五法八门。
本文对比各插件的优缺点，为选型提供一些参考。
前言
目标：
- 实现一个网络拓扑图的可视化界面
- 可通过托拉拽的方式对图进行编辑（节点、连线、属性）
- 能跟后台数据进行动态绑定
- 具有告警功能
- 其它一些细节
为什么选择第三方插件：主要还是省事，避免重复造轮子。如果要自己手写实现一个，开发时间周期较长；作为学习的话，可以投入这方面的精力。
既然决定用插件了，肯定要有个选型的过程。下面先列举下我对市面上主要几种插件的选型对比。
免费插件
1. jTopo
简介：jTopo（Javascript Topology library）是一款完全基于 HTML5 Canvas 的关系、拓扑图形化界面开发工具包。
背景：个人、国产
官网：http://www.jtopo.com/
示例：https://github.com/wenyuan/jtopo_topology
- 优点
- 免费
- 轻量
- 无明显性能问题
- 功能丰富，支持各种自定义操作
- 国产，文档简单，上手容易
- 缺点
- 未开放源代码，如需做功能增强，对着混淆后的 js 代码做修改比较费时间
- 2015 年就停更了，作者在 2019 年表示正在准备新版本，当前进度未知
- 有一些 bug（比如自动布局）
- 不是采用模块化编程的，在现代化框架（比如 Vue.js）中使用比较麻烦（但可以实现）
- 建议
- 小项目中可以使用，大型项目不建议
- 新手使用，可以提高自己的 JavaScript 功底
2. Vis.js
简介：Vis.js 基于 HTML5 Canvas 开发的动态可视化库。该库被设计为易于使用，处理大量的动态数据，并支持对数据的操作和交互。
背景：Almende B.V、国外
官网：https://visjs.org/
示例：https://visjs.github.io/vis-network/examples/
- 优点
- 开源免费
- 无明显性能问题
- 功能丰富，支持各种自定义操作
- 支持自动布局（防碰撞算法）
- 缺点
- 需要投入一些时间通读文档，英文不好的人会比较费力
- 自带的连线样式中没有折线的样式
- 建议
- 先搞清楚 vis 中的数据结构 DataSet，再入手使用
- 耐心看文档，其实文档写的挺好的
3. AntV G6
简介：G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。
背景：蚂蚁金服 AntV、国产
官网：https://antv.vision/zh
示例：https://github.com/wenyuan/cceditor
- 优点
- 开源免费
- 上手简单，可扩展性强
- 功能丰富，支持各种自定义操作
- 由蚂蚁金服 AntV 团队开发，从维护性和生态圈角度考虑相对有保障
- 支持自动布局（早期借助 d3-force 实现，后期已经被内部支持）
- 缺点
- 有性能问题（> 200 个网元单位）
- 文档易用性一般（早期托管在语雀时，缺少全文搜索功能）
- 有时候文档和版本会脱节（可以理解，问题不大）
- 建议
- 大厂团队开发维护，后期有保障，大小项目都可以使用
- 可以学习里面的一些编程思想和技巧
4. jsPlumb
简介：jsPlumb 是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。
背景：个人、国外
官网：https://jsplumbtoolkit.com/
中文：https://wdd.js.org/jsplumb-chinese-tutorial
- 优点
- 开源免费
- 功能丰富，支持各种自定义操作
- 缺点
- demo 过于简单
- 多条线时可能会叠在一起
- 从 demo 来看感受不到可以从哪开始连线
- 建议
- 感兴趣的可以尝试下
5. JointJs
简介：JointJS 是一个开源前端框架，支持绘制各种各样的流程图、工作流图等。Rappid 是 Joint 的商业版，提供了一些更强的插件。
背景：公司、国外
官网：https://www.jointjs.com/
- 优点
- 连线可设置项较为全面
- 原生支持拖拽和缩放
- 线可以手动添加转折点
- 有根据已添加点和线自动布局功能
- 扩展相对容易
- 缺点
- 对于线的交互方式有点反直觉
- demo 上有 bug，修改了信息不刷新
- demo 的流程图不是以像素为基本单位，拖拽会感觉卡顿
- 纯英文文档，有的人会觉得读起来费力
- 建议
- 感兴趣的可以尝试下
6. D3
特点：大都靠自己实现
7. ECharts
简介：ECharts 关系图。
背景：百度、国产
官网：https://www.echartsjs.com/zh/index.html
- 优点
- 上手非常简单
- 缺点
- 扩展性弱（毕竟不是专做图编辑器的，关系图只是 ECharts 中的一项）
- 建议
- 可以用在定制化的需求中，不需要拖拉拽等功能
8. Le5le-topology
简介：Le5le-topology 是一个可视化在线绘图工具，使用 Canvas + Typescript。支持 topology, UML、微服务架构、动态流量、SCADA 场景等。
背景：个人、国产
官网：http://topology.le5le.com/
仓库：https://github.com/le5le-com/topology
- 优点
- 开源免费
- 支持的图很多
- 技术比较新（Typescript）
- 开箱即用，几乎不用额外开发成本
- 缺点
- 个人开发的，2019 年起作者在各大网站推广，持续维护性和生态圈尚不成熟
- 建议
- 再观察两年，看作者是否在持续稳定发展，或者是否会形成开发团队
付费插件
1. hightopo
- 优点
- 省事
- 支持 3D 图
- 缺点
- 贵
- 建议
- 有预算的团队可以考虑
2. Qunee
- 优点
- 省事
- 有一定颜值
- 缺点
- 贵
- 对普通需求来说，有些功能显得臃肿
- 不利于二开，需要事件扩展时如果原生不支持可能会非常麻烦（不过既然花钱了，应该可以联系厂家定制）
- 建议
- 有预算的团队可以考虑
开发历程
选型阶段主要是编写一些 Demo 级别的代码，最终采用了三种插件来实现较为完整的功能，分别是 Vis.js，jTopo，和 AntV G6。这三种插件都较好地实现了我需要的功能，但也有一些细微的坑。
第一版是 Vis.js 阶段，花了挺多时间研究文档，功能是实现了，最终考虑到扩展性和颜值，才有了第二版。
第二版是 jTopo 阶段，当时用了很短的时间实现了功能，不过由于官方文档缺失一些内容，以及对功能有一些额外的需求（比如节点上我想绑定对象类型的属性），对着混淆后的“源码”一路摸爬滚打，增删改查，很费心力。针对这个插件的完整 Demo 以及补充文档我开源了一个 GitHub repo，感兴趣的可以查看：jtopo_topology
第三版是 AntV G6 阶段，由蚂蚁金服团队开发的。第一次了解到它是在开源中国上看到了一篇推文，一下子就心动了。当时 G6 处于 1.x 和 2.x 两大版本交替期间，文档是托管在语雀上的，最大的缺点是文档的滞后，加上语雀那个时候还不够完善，阅读体验不是很好，查询起来比较费时。到了 G6 2.x 阶段，对文档比较熟悉了，所以用起来相对得心应手，这个时候最大的瓶颈就是性能问题，所以一直停留在 Demo 阶段。
在今年过年时候，我看到 AntV G6 发布了 3.x 版本，做出了 breaking change，那段时间升级后，基本上是一边找 bug 一边提 issue（这里要感谢 G6 团队，对 issue 的响应和处理非常快 ）。这个版本可以说是相对成熟了，不管是功能还是性能，都得到了增强。后来我也开源了一个 GitHub repo，感兴趣的可以查看：cceditor
经过了三次迭代，目前使用的插件是 AntV G6，在一些不需要即时编辑的场景下，我会采用 Echarts 的关系图组件，也相对容易上手。
感受
这两年在各大论坛和交流群，发现图可视化和图编辑器的需求越来越多，也踊跃出很多插件开发者的开源项目，譬如 Le5le-topology，就是一款由个人（小团队）领衔开发的产品化编辑器，之所以说是产品化，因为它集成了很多解决方案，可以说是开箱即用了。相信在可视化这个领域，会不断涌现出优秀的作品，对开发者而言，自然少不了可以借鉴和学习的地方。
最后
市面上有很多同类的插件，以上只是我调研的一部分，在选型对比中，肯定也会有疏漏，如果有其他想法，欢迎在评论区留言！