開源流程圖繪製網站數字繪技術路線

需求分析

之前作項目寫文檔常常用Visio，本身買了一臺電腦的受權，用在了本身經常使用的工做電腦上。後來出差有點多，用筆記本寫文檔寫的就有點多了，又捨不得再買一臺電腦的Visio受權，因此就想找一個免費的、好用的繪製流程圖的軟件。

後來找到ProcessOn，一個免費的繪製流程圖的網站，上面有很多免費模板，最多能夠雲存儲9張圖。可是9張圖對我來講實在太少了，我就買了一年的會員，不記得是多少錢了，反正很少。後來會員到期，再想買，發現怎麼都漲價到160一年了。因而我想，能不能用開源的的東西，快速作一個相似ProcessOn的網站，具體需求就兩個：

• 能夠繪製流程圖
• 可以雲存儲

因此就能夠從這兩方面找輪子了。

尋找輪子

免費的流程圖，首先我找到了draw.io。須要本身配置雲存儲，不過只支持國外的好比OneDrive或者Dropbox等，國內都不太好用。後瞭解到draw.io以及其餘大部分流程圖網站都是根據mxGraph的示例程序GraphEditor作出來的，所以他們的界面都基本同樣，因此我也決定以這個爲基礎，輔以draw.io的部分組件。

而後就是雲存儲了，找一個開源的網盤系統就能夠了，這樣的系統不少，好比，Seafile，nextCloud等等。不過有一些條件，第一是要純粹的Web系統，方便跟GraphEditor集成，第二是最好跨平臺，第三是方便集成七牛雲、阿里雲OSS等大型公有云存儲系統。最終採用了Cloudreve

系統架構

系統架構其實就挺簡單了：

數據層，首先是Cloudreve是用MySQL數據庫的，所以系統使用MySQL數據庫並繼承了Cloudreve的絕大部分數據結構。本地文件存儲和七牛雲均可以拿來當作文件存儲，這是能夠共存的，目前本系統流程圖文件使用本地文件存儲，圖片使用七牛雲。

服務層主要繼承於Cloudreve系統，簡單修改了其中的文件和分享部分，更好的支持流程圖文件。添加了圖形處理和支付服務。

應用層分爲基於Cloudreve的文件管理系統和基於GraphEditor的流程圖編輯系統，兩個系統基本獨立，同時調用服務層的文件服務和圖形服務。

整合細節

整合過程當中有幾個細節：

1. GraphEditor是使用xml明碼存儲流程圖的，所以須要對Cloudreve進行改造，只支持xml文件，而且對xml文件進行特殊處理，好比編輯、預覽等。
2. 網盤系統沒有新建文件這說，只有上傳下載，所以須要在Cloudreve網盤系統中使用上傳接口來作一個新建流程圖功能。
3. xml文件其實是純文本，所以在GraphEditor的流程圖編輯界面，只須要調用Cloudreve網盤系統中的文本編輯接口直接編輯xml便可。
4. php版本的mxGraph接口已經好久沒有更新過，沒法根據比較複雜的流程圖xml文件生成預覽圖片，所以須要前臺生成，而後上傳到後臺。
5. 中文庫以及模板能夠直接使用draw.io的。

源碼
示例站