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