前端拓扑图插件选型对比

前端生成拓扑图、关系图、流程图的 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

优点开源免费

功能丰富，支持各种自定义操作

缺点demo 过于简单

多条线时可能会叠在一起

从 demo 来看感受不到可以从哪开始连线

建议感兴趣的可以尝试下

5. JointJs

简介：JointJS 是一个开源前端框架，支持绘制各种各样的流程图、工作流图等。Rappid 是 Joint 的商业版，提供了一些更强的插件。

背景：公司、国外

官网：https://www.jointjs.com/

优点连线可设置项较为全面

原生支持拖拽和缩放

线可以手动添加转折点

有根据已添加点和线自动布局功能

扩展相对容易

缺点对于线的交互方式有点反直觉

demo 上有 bug，修改了信息不刷新

demo 的流程图不是以像素为基本单位，拖拽会感觉卡顿

纯英文文档，有的人会觉得读起来费力

建议感兴趣的可以尝试下

6. D3

特点：大都靠自己实现

7. ECharts

优点上手非常简单

缺点扩展性弱(毕竟不是专做图编辑器的，关系图只是 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，就是一款由个人(小团队)领衔开发的产品化编辑器，之所以说是产品化，因为它集成了很多解决方案，可以说是开箱即用了。相信在可视化这个领域，会不断涌现出优秀的作品，对开发者而言，自然少不了可以借鉴和学习的地方。

最后

市面上有很多同类的插件，以上只是我调研的一部分，在选型对比中，肯定也会有疏漏，如果有其他想法，欢迎在评论区留言！