開(kāi)源流程圖繪制網(wǎng)站數(shù)字繪技術(shù)路線

需求分析

以前做項(xiàng)目寫(xiě)文檔經(jīng)常用Visio，自己買(mǎi)了一臺(tái)電腦的授權(quán)，用在了自己常用的工作電腦上。后來(lái)出差有點(diǎn)多，用筆記本寫(xiě)文檔寫(xiě)的就有點(diǎn)多了，又舍不得再買(mǎi)一臺(tái)電腦的Visio授權(quán)，所以就想找一個(gè)免費(fèi)的、好用的繪制流程圖的軟件。

后來(lái)找到ProcessOn，一個(gè)免費(fèi)的繪制流程圖的網(wǎng)站，上面有不少免費(fèi)模板，最多可以云存儲(chǔ)9張圖。但是9張圖對(duì)我來(lái)說(shuō)實(shí)在太少了，我就買(mǎi)了一年的會(huì)員，不記得是多少錢(qián)了，反正不多。后來(lái)會(huì)員到期，再想買(mǎi)，發(fā)現(xiàn)怎么都漲價(jià)到160一年了。于是我想，能不能用開(kāi)源的的東西，快速做一個(gè)類(lèi)似ProcessOn的網(wǎng)站，具體需求就兩個(gè)：

• 可以繪制流程圖
• 能夠云存儲(chǔ)

所以就可以從這兩方面找輪子了。

尋找輪子

免費(fèi)的流程圖，首先我找到了draw.io。需要自己配置云存儲(chǔ)，不過(guò)只支持國(guó)外的比如OneDrive或者Dropbox等，國(guó)內(nèi)都不太好用。后了解到draw.io以及其他大部分流程圖網(wǎng)站都是根據(jù)mxGraph的示例程序GraphEditor做出來(lái)的，因此他們的界面都基本一樣，所以我也決定以這個(gè)為基礎(chǔ)，輔以draw.io的部分組件。

然后就是云存儲(chǔ)了，找一個(gè)開(kāi)源的網(wǎng)盤(pán)系統(tǒng)就可以了，這樣的系統(tǒng)很多，比如，Seafile，nextCloud等等。不過(guò)有一些條件，第一是要純粹的Web系統(tǒng)，方便跟GraphEditor集成，第二是最好跨平臺(tái)，第三是方便集成七牛云、阿里云OSS等大型公有云存儲(chǔ)系統(tǒng)。最終采用了Cloudreve

系統(tǒng)架構(gòu)

系統(tǒng)架構(gòu)其實(shí)就挺簡(jiǎn)單了：

數(shù)據(jù)層，首先是Cloudreve是用MySQL數(shù)據(jù)庫(kù)的，因此系統(tǒng)使用MySQL數(shù)據(jù)庫(kù)并繼承了Cloudreve的絕大部分?jǐn)?shù)據(jù)結(jié)構(gòu)。本地文件存儲(chǔ)和七牛云都可以拿來(lái)當(dāng)做文件存儲(chǔ)，這是可以共存的，目前本系統(tǒng)流程圖文件使用本地文件存儲(chǔ)，圖片使用七牛云。

服務(wù)層主要繼承于Cloudreve系統(tǒng)，簡(jiǎn)單修改了其中的文件和分享部分，更好的支持流程圖文件。添加了圖形處理和支付服務(wù)。

應(yīng)用層分為基于Cloudreve的文件管理系統(tǒng)和基于GraphEditor的流程圖編輯系統(tǒng)，兩個(gè)系統(tǒng)基本獨(dú)立，同時(shí)調(diào)用服務(wù)層的文件服務(wù)和圖形服務(wù)。

整合細(xì)節(jié)

整合過(guò)程中有幾個(gè)細(xì)節(jié)：

1. GraphEditor是使用xml明碼存儲(chǔ)流程圖的，因此需要對(duì)Cloudreve進(jìn)行改造，只支持xml文件，并且對(duì)xml文件進(jìn)行特殊處理，比如編輯、預(yù)覽等。
2. 網(wǎng)盤(pán)系統(tǒng)沒(méi)有新建文件這說(shuō)，只有上傳下載，因此需要在Cloudreve網(wǎng)盤(pán)系統(tǒng)中使用上傳接口來(lái)做一個(gè)新建流程圖功能。
3. xml文件實(shí)際上是純文本，因此在GraphEditor的流程圖編輯界面，只需要調(diào)用Cloudreve網(wǎng)盤(pán)系統(tǒng)中的文本編輯接口直接編輯xml即可。
4. php版本的mxGraph接口已經(jīng)很久沒(méi)有更新過(guò)，無(wú)法根據(jù)比較復(fù)雜的流程圖xml文件生成預(yù)覽圖片，因此需要前臺(tái)生成，然后上傳到后臺(tái)。
5. 中文庫(kù)以及模板可以直接使用draw.io的。

源碼
示例站