開源流程圖繪制網站數字繪技術路線
以前做項目寫文檔經常用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的流程圖編輯系統，兩個系統基本獨立，同時調用服務層的文件服務和圖形服務。
整合細節
整合過程中有幾個細節：
- GraphEditor是使用xml明碼存儲流程圖的，因此需要對Cloudreve進行改造，只支持xml文件，並且對xml文件進行特殊處理，比如編輯、預覽等。
- 網盤系統沒有新建文件這說，只有上傳下載，因此需要在Cloudreve網盤系統中使用上傳接口來做一個新建流程圖功能。
- xml文件實際上是純文本，因此在GraphEditor的流程圖編輯界面，只需要調用Cloudreve網盤系統中的文本編輯接口直接編輯xml即可。
- php版本的mxGraph接口已經很久沒有更新過，無法根據比較復雜的流程圖xml文件生成預覽圖片，因此需要前臺生成，然後上傳到後臺。
- 中文庫以及模板可以直接使用draw.io的。
源碼
示例站
開源流程圖繪制網站數字繪技術路線