前端拓扑图插件选型对比

前端生成拓扑图、关系图、流程图的JavaScript插件有很多,各种编辑器五法八门。
本文对比各插件的优缺点,为选型提供一些参考。

一、免费插件

1. jTopo

简介:jTopo(Javascript Topology library)是一款完全基于 HTML5 Canvas 的关系、拓扑图形化界面开发工具包。
背景:个人、国产
官网:http://www.jtopo.com/
示例:https://github.com/winyuan/jtopo_topology

jtopo

  • 优点
    • 免费
    • 轻量
    • 无明显性能问题
    • 功能丰富,支持各种自定义操作
    • 国产,文档简单,上手容易
  • 缺点
    • 未开放源代码,如需做功能增强,对着混淆后的 js 代码做修改比较费时间
    • 2015 年就停更了,作者在 2019 年表示正在准备新版本,当前进度未知
    • 有一些 bug(比如自动布局)
    • 不是采用模块化编程的,在现代化框架(比如 vuejs)中使用比较麻烦(但可以实现)
  • 建议
    • 小项目中可以使用,大型项目不建议
    • 新手使用,可以提高自己的 js 功底

2. Vis.js

简介:vis.js 基于 HTML5 Canvas 开发的动态可视化库。该库被设计为易于使用,处理大量的动态数据,并支持对数据的操作和交互。
背景:Almende B.V、国外
官网:https://visjs.org/
示例:https://visjs.github.io/vis-network/examples/

visjs

  • 优点
    • 开源免费
    • 无明显性能问题
    • 功能丰富,支持各种自定义操作
    • 支持自动布局(防碰撞算法)
  • 缺点
    • 需要投入一些时间通读文档,英文不好的人会比较费力
    • 自带的连线样式中没有折线的样式
  • 建议
    • 先搞清楚 vis 中的数据结构 DataSet,再入手使用
    • 耐心看文档,其实文档写的挺好的

3. AntV G6

简介:G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。
背景:蚂蚁金服-AntV、国产
官网:https://antv.vision/zh
示例:https://github.com/winyuan/cceditor

AntV G6

  • 优点
    • 开源免费
    • 上手简单,可扩展性强
    • 功能丰富,支持各种自定义操作
    • 由蚂蚁金服-AntV团队开发,从维护性和生态圈角度考虑相对有保障
    • 支持自动布局(早期借助 d3-force 实现,后期已经被内部支持)
  • 缺点
    • 有性能问题(> 200 个网元单位)
    • 文档易用性一般(缺少全文搜索功能)
    • 有时候文档和版本会脱节(可以理解,问题不大)
  • 建议
    • 大厂团队开发维护,后期有保障,大小项目都可以使用
    • 可以学习里面的一些编程思想和技巧

4. jsPlumb

简介:jsPlumb 是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素。
背景:个人、国外
官网:https://jsplumbtoolkit.com/
中文:https://wdd.js.org/jsplumb-chinese-tutorial

jsplumb

  • 优点
    • 开源免费
    • 功能丰富,支持各种自定义操作
  • 缺点
    • demo 过于简单
    • 多条线时可能会叠在一起
    • 从demo来看感受不到可以从哪开始连线
  • 建议
    • 感兴趣的可以尝试下

5. JointJs

简介:JointJS 是一个开源前端框架,支持绘制各种各样的流程图、工作流图等。Rappid 是 Joint 的商业版,提供了一些更强的插件。
背景:公司、国外
官网:https://www.jointjs.com/

JointJs

  • 优点
    • 连线可设置项较为全面
    • 原生支持拖拽和缩放
    • 线可以手动添加转折点
    • 有根据已添加点和线自动布局功能
    • 扩展相对容易
  • 缺点
    • 对于线的交互方式有点反直觉
    • demo 上有 bug,修改了信息不刷新
    • demo 的流程图不是以像素为基本单位,拖拽会感觉卡顿
    • 纯英文文档,有的人会觉得读起来费力
  • 建议
    • 感兴趣的可以尝试下

6. D3

特点:大都靠自己实现

7. ECharts

简介:ECharts 关系图。
背景:百度、国产
官网:https://www.echartsjs.com/zh/index.html

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

  • 优点
    • 省事
    • 有一定颜值
  • 缺点
    • 对普通需求来说,有些功能显得臃肿
    • 不利于二开,需要事件扩展时如果原生不支持可能会非常麻烦(不过既然花钱了,应该可以联系厂家定制)
  • 建议
    • 有预算的团队可以考虑

博文对你有帮助吗?如果有的话,想不想送我一本书呢?
  目录