俗話(huà)說(shuō)，一圖勝千言，一張小小的圖片可以替代大段的文字說(shuō)明，更可以形象直觀地描述業(yè)務(wù)流程、展示算法...，下面給大家?guī)?lái)幾款我最近收藏的開(kāi)源在線繪圖工具。
Ant Design Pro
項(xiàng)目地址：https://github.com/ant-design/ant-design-pro
Ant Design Pro流程圖編輯器
Ant Design Pro是螞蟻開(kāi)源的一款開(kāi)箱即用的中臺(tái)前端/設(shè)計(jì)解決方案。在其預(yù)覽網(wǎng)站里圖形編輯器下有流程圖、腦圖、拓?fù)渚庉嬈鳎髲S出品，界面相當(dāng)美觀，功能實(shí)用但不夠強(qiáng)大，可以選擇集成到自己的項(xiàng)目中作為一個(gè)在線繪圖工具。集成時(shí)，這個(gè)工具可擴(kuò)展性很多：擴(kuò)展畫(huà)布左側(cè)節(jié)點(diǎn)類(lèi)型（節(jié)點(diǎn)為圖片）；擴(kuò)展流程圖保存，版本控制，版本比對(duì)；動(dòng)態(tài)調(diào)整畫(huà)布中節(jié)點(diǎn)大小等。
wookteam
項(xiàng)目地址：https://gitee.com/aipaw/wookteam
WorkTeam在線流程圖
WookTeam在線思維導(dǎo)圖
WookTeam在線任務(wù)甘特圖
WookTeam是一款php語(yǔ)言編寫(xiě)的輕量級(jí)的全部開(kāi)源的在線團(tuán)隊(duì)協(xié)作工具，提供在線思維導(dǎo)圖、在線流程圖、在線任務(wù)甘特圖，此外還有各類(lèi)文檔工具、項(xiàng)目管理、任務(wù)分發(fā)，知識(shí)庫(kù)管理等工具。前端框架采用的是Vue 2.0 + Iview UI。這款工具界面美觀，功能豐富，唯一一點(diǎn)就是對(duì)PHPer友好，JAVA開(kāi)發(fā)者集成轉(zhuǎn)換時(shí)需要一定的工作量。
mxGraph
項(xiàng)目地址：https://segmentfault.com/a/1190000018510996
mxGraph包含一個(gè)用JavaScript編寫(xiě)的客戶(hù)端軟件，以及一系列用于各種語(yǔ)言的后端（可以是Java，PHP，.NET）。客戶(hù)端軟件是一個(gè)圖形組件，帶有一個(gè)可選的應(yīng)用程序包裝程序，該程序包裝程序已集成到現(xiàn)有的Web界面中。客戶(hù)端需要Web服務(wù)器將所需的文件傳遞到客戶(hù)端，或者可以在沒(méi)有Web服務(wù)器的情況下從本地文件系統(tǒng)運(yùn)行。這個(gè)工具引入方便，界面功能強(qiáng)大，組件也相對(duì)豐富，和下面提到的JSPlumb各有千秋，可以導(dǎo)出為xml文件，也可以保存為圖片。缺點(diǎn)是文檔不夠友好，沒(méi)有中文文檔，英文基礎(chǔ)差的同學(xué)上手難度大，相對(duì) jsPlumb 不能使用 css 自定義節(jié)點(diǎn)樣式，完全通過(guò) js 完成，比較麻煩。
Visor.js
項(xiàng)目地址：https://gitee.com/zhouyig/Visor.js
Visor.js示意圖
Visor.js 是基于JQUERYY的，在Canvas上制作在線繪圖應(yīng)用的核心基礎(chǔ)文件，它支持鼠標(biāo)的拖拽移動(dòng)、伸縮、旋轉(zhuǎn)和各種事件。這個(gè)輪子，功能強(qiáng)大，控件豐富，可擴(kuò)展性強(qiáng)，支持單獨(dú)頁(yè)面預(yù)覽，開(kāi)發(fā)文檔充分，有一定的社區(qū)支持；缺點(diǎn)也是明顯的，個(gè)人開(kāi)發(fā)提交代碼不持續(xù)，最近一次提交是兩年前了，還有就是頁(yè)面不夠美觀大氣，沒(méi)有與時(shí)俱進(jìn)。還是不錯(cuò)的工具，熟悉JQUERYY的小伙伴可以快速上手，感興趣的可以重寫(xiě)一下頁(yè)面，使之更加美觀，挑戰(zhàn)也是不小：）。
VFD(VUE FLOW DESIGN)
項(xiàng)目地址：https://gitee.com/yjblogs/VFD
VFD基于Vue + Ant Design Vue + JSPlumb，作為一款流程設(shè)計(jì)器組件，可作為流程圖、泳道圖等繪圖工具，面板組件布局合理，功能強(qiáng)大，操作方便快捷（可拖拽且快捷鍵豐富），保存后為一段json數(shù)據(jù)，便于保存及控制版本，也可保存為圖片，安裝使用方便，集成難度較小，有交流群。缺點(diǎn)是演示網(wǎng)站掛掉了，只可以通過(guò)圖片一覽真容。
easy-flow
項(xiàng)目地址：https://gitee.com/xiaoka2017/easy-flow
easy-flow示例圖
easy-flow示例圖
easy-flow是一款基于 VUE+ElementUI+JsPlumb 的流程設(shè)計(jì)器，通過(guò) vuedraggable 插件來(lái)實(shí)現(xiàn)節(jié)點(diǎn)拖拽。支持拖拽編輯，連線自定義，加載給定數(shù)據(jù)，支持力導(dǎo)圖...與上面介紹的VFD近乎同樣的技術(shù)棧，頁(yè)面樣式更加美觀，同時(shí)，集成難度較小，雖然功能較少，但可擴(kuò)展性性強(qiáng)，持續(xù)更新也是一大亮點(diǎn)，有交流群，社區(qū)也較活躍。
Le5le-topology
項(xiàng)目地址：https://www.oschina.net/p/topology?hmsr=aladdin1e1
Le5le-topology 是一個(gè)開(kāi)源易擴(kuò)展方便集成的可視化在線繪圖工具，使用 Canvas + Typescript實(shí)現(xiàn)。采用引擎 + 圖形庫(kù)中間件的思路能夠方便、快速地?cái)U(kuò)展、集成到前端項(xiàng)目。可用于微服務(wù)架構(gòu)圖、流程圖/活動(dòng)圖/時(shí)序圖/類(lèi)圖、拓?fù)鋱D、思維導(dǎo)圖/腦圖、動(dòng)畫(huà)、音頻/視頻等。分層架構(gòu)設(shè)計(jì)，插件輕量，且具有較好的性能，方便導(dǎo)入導(dǎo)出，可以保存為圖片或是SVG文件，支持在線制作云存儲(chǔ)多端分享。最厲害的是有一定的動(dòng)畫(huà)特效，更加便于展示業(yè)務(wù)流程及數(shù)據(jù)走向。社區(qū)強(qiáng)大，幫助文檔及教程特多，交流群豐富，對(duì)未來(lái)有明確的規(guī)劃。不僅僅是一個(gè)繪圖工具，更是一個(gè)強(qiáng)大的豐富的圖庫(kù)平臺(tái)。
總結(jié)：以上幾款在線繪圖工具，各有特點(diǎn)，有界面美觀的，有大廠出品的，有功能極其豐富的，有擴(kuò)展性極強(qiáng)的，但大部分都集成容易方便上手，感興趣的同學(xué)可以根據(jù)自己的需要進(jìn)行集成。
