開始
一個圖可以簡單的解釋一個復雜的思想，同樣，一個流程圖可以清晰的可視化展示組織、工作流等復雜層次結(jié)構(gòu)。在后面的一系列文章中，將會從 0 到 1 完成一個流程圖應用的開發(fā)。如果對你的工作有幫助或者你對圖編輯引擎感興趣，請靜下心來讀完這一系列文章，相信會有驚喜。
技術(shù)選型
提到繪圖能力，web主要有兩種實現(xiàn)方式：Canvas 和 SVG，我們看看這兩種有什么差異：
| 方案 | 圖形定制能力 | 上手難度 | 性能 |
|---|---|---|---|
| Canvas | 定制圖形比較復雜 | 較高 | 大數(shù)據(jù)量場景性能突出 |
| SVG | 基于 DOM，圖形定制能力強 | 較低 | 大數(shù)據(jù)量場景性能較差 |
再來看看前端社區(qū)開源解決方案：
jTopo
簡介：jTopo 是一款完全基于HTML5 Canvas的關(guān)系、拓撲圖形化界面開發(fā)工具包
官網(wǎng)：http://www.jtopo.com/
優(yōu)點：國產(chǎn)，文檔簡單，性能優(yōu)越
缺點：沒有開放源代碼，2015 年已經(jīng)停止更新，在 Vue/React/Angular 等現(xiàn)代框架中使用成本高
Vis.js
簡介：Vis.js 是基于 HTML5 Canvas 開發(fā)的動態(tài)可視化庫。該庫被設計為易于使用，處理大量的動態(tài)數(shù)據(jù)
官網(wǎng)：https://visjs.org/
優(yōu)點：開源免費，性能優(yōu)越，功能比較豐富
缺點：英文文檔，上手成本較高，節(jié)點定制能力較弱
LogicFlow
簡介：專注流程可視化的前端解決方案
官網(wǎng)：http://logic-flow.org/
優(yōu)點：具備流程圖應用的常用功能，擴展性強
缺點：內(nèi)置連線功能較弱，定制復雜節(jié)點比較麻煩
Jsplumb
簡介：jsPlumb 是一個比較強大的繪圖組件
官網(wǎng)：https://jsplumbtoolkit.com/
優(yōu)點：功能豐富，支持各種自定義操作
缺點：分收費版和社區(qū)版，社區(qū)版功能較弱
Joint
簡介：JointJS 是一個開源前端框架，支持繪制各種各樣的流程圖、工作流圖等。Rappid 是 Joint 的商業(yè)版，提供了一些更強的插件
官網(wǎng)：https://www.jointjs.com/
優(yōu)點：功能十分完善，上手比較容易
缺點：布局能力較弱，節(jié)點定制能力一般
AntV G6
簡介：G6 是一個圖可視化引擎。它提供了圖的繪制、布局、分析、交互、動畫等圖可視化的基礎能力
官網(wǎng)：https://g6.antv.vision/zh/
優(yōu)點：功能完備，擴展性強，性能好，支持大量布局算法
缺點：節(jié)點定制能力一般
AntV X6
簡介：X6 是 AntV 旗下的圖編輯引擎，提供了一系列開箱即用的交互組件和簡單易用的節(jié)點定制能力，方便我們快速搭建 DAG 圖、ER 圖、流程圖等應用
官網(wǎng)：https://x6.antv.vision/zh
優(yōu)點：節(jié)點極易定制，支持 React/Vue 節(jié)點，上手成本低，支持大量布局算法
缺點：基于 SVG，性能一般
最后
圖形定制能力強、上手成本低是我們需要重點考慮的地方，另外一方面流程圖場景，不需要渲染大量的節(jié)點，所以 X6 更適合來完成我們的流程圖應用。
