开源流程图绘制网站数字绘技术路线

需求分析

之前作项目写文档常常用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的。

源码
示例站