前端关系图谱插件

前端拓扑图插件选型对比

前端生成拓扑图、关系图、流程图的 JavaScript 插件有很多，各种编辑器五法八门。

本文对比各插件的优缺点，为选型提供一些参考。

前言

目标：

实现一个网络拓扑图的可视化界面

可通过托拉拽的方式对图进行编辑(节点、连线、属性)

能跟后台数据进行动态绑定

具有告警功能

其它一些细节

为什么选择第三方插件：主要还是省事，避免重复造轮子。如果要自己手写实现一个，开发时间周期较长；作为学习的话，可以投入这方面的精力。

既然决定用插件了，肯定要有个选型的过程。下面先列举下我对市面上主要几种插件的选型对比。

免费插件

1. jTopo

简介：jTopo(Javascript Topology library)是一款完全基于 HTML5 Canvas 的关系、拓扑图形化界面开发工具包。

背景：个人、国产

官网：http://www.jtopo.com/

示例：https://github.com/wenyuan/jtopo_topology

优点免费

轻量

无明显性能问题

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

国产，文档简单，上手容易

缺点未开放源代码，如需做功能增强，对着混淆后的 js 代码做修改比较费时间

2015 年就停更了，作者在 2019 年表示正在准备新版本，当前进度未知