前端生成拓撲圖、關系圖、流程圖的 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，就是一款由個人（小團隊）領銜開發的產品化編輯器，之所以說是產品化，因為它集成了很多解決方案，可以說是開箱即用了。相信在可視化這個領域，會不斷涌現出優秀的作品，對開發者而言，自然少不了可以借鑒和學習的地方。
最后
市面上有很多同類的插件，以上只是我調研的一部分，在選型對比中，肯定也會有疏漏，如果有其他想法，歡迎在評論區留言！