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

需求分析

以前做項目寫文檔經常用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的。

源碼
示例站