[发明专利]一种基于Web的高效流程图绘制系统及方法

权利要求书

1.一种基于Web的高效流程图绘制系统，其特征在于，包括绘图模块、界面模块、文件模块；

所述绘图模块包括节点管理模块、边管理模块以及组管理模块，负责接受传入的流程图的参数，将这些参数封装成Image类数据对象，并调用一个开源的算法库GraphViz的API完成流程图自动布局和绘制工作；

所述界面模块包括交互模块以及数据传输模块，属于系统用户页面主体部分，采用Bootstrap框架实现页面及页面特效；所述数据传输模块负责前台、后台数据的异步传输工作；所述交互模块一方面负责操作用户界面预览区中SVG图形的Dom接口，确定出用户点击的图元并将其名称传输给后台，后台检索该图元信息后再通过数据传输模块返回到用户界面；所述交互模块另一方面负责对SVG添加动画特效，以便用户进行个性化微调；

所述文件模块包括文件生成模块、文件导入模块和文件导出模块；所述文件模块一方面负责接受所述绘图模块发送过来的SVG文件，并根据该SVG文件生成对应的PDF文件，同时导出MySQL数据库备份文件；另一方面负责导入文件、上传文件，以及解析上传的文件获得绘图参数的工作；

所述绘图模块采用PHP语言编写实现；所述传入的流程图的参数包括：节点信息、边信息、组信息；

所述界面模块采用Html语言与Javascript语言编写；

所述数据传输模块采用Ajax技术实现，所述Ajax技术包括：异步Javascript和Xml技术；

所述交互模块采用两个Javascript脚本实现；

所述文件模块采用PHP和Python语言编写实现。

2.一种基于Web的高效流程图绘制方法，其特征在于，包括如下步骤：

1)用户提出绘图请求，发送绘图数据，所述绘图数据分为：输入参数绘图和导入文件绘图；

2)如果用户通过导入文件绘图，则转步骤3)，否则转步骤5)；

3)导入文件名被数据传输模块封装成XmlHttpRequest对象，并传递给文件导入模块；

4)文件导入模块对XmlHttpRequest对象进行解析获取导入文件名，读取并上传文件，在后台解析文件获得绘图参数，之后将解析得到的绘图参数传递给绘图模块；

5)界面模块中的数据传输模块将参数封装为XmlHttpRequest对象并发送给绘图模块；

6)绘图模块将绘图参数封装成Node类、Edge类以及Group类的对象，并将这些信息存储到数据库中；所述的Node类包括：名称、标签、形状、边框色、填充色、字体色；所述的Edge类包括：始点、终点、始位置、终位置、标签、箭头形状、边的形状、颜色；所述的Group类包括名称、标签、边框色、填充色、字体色；

7)绘图模块从数据库中读取当前流程图的参数信息，并将其封装成Image类对象，并将该对象传递给GraphViz引擎；其中Image类的数据成员包括布局方向、Node类对象集合、Edge类对象集合以及Group类对象集合；

8)绘图模块调用GraphViz的API对传入的Image对象进行布局和绘图，生成该Image对象的SVG格式文件，并将该文件传递给文件生成模块；

9)文件生成模块将SVG格式文件转换成PDF格式文件，并使用PHP执行外部命令mysqldump的方式生成MySQL数据库备份文件，即SQL文件，将这些文件传递给了文件导出模块；

10)文件导出模块将这些文件封装成二进制流的形式后传递给数据传输模块；

11)数据传输模块将二进制流封装为XmlHttpRequest对象并将其传递给交互模块；

12)交互模块对XmlHttpRequest对象进行解析，获取导出文件；

13)用户从图形界面中下载流程图文件；

所述步骤13)还包括：用户还可以通过图形化界面对现有流程图进行编辑，所述编辑包括：对流程图布局方式、节点、边、组的属性进行修改和对流程图中节点位置进行微调；

所述对流程图布局方式、节点、边、组的属性进行修改的具体实现方法包括如下步骤：

1-1)根据Javascript的冒泡事件流确定用户具体点击的是哪个图元，所述图元包括节点、边、组，取该图元的名称，将名称发送给数据传输模块，并将图元用其他颜色突出显示，之后利用睡眠函数在1秒内将图元颜色还原；

1-2)数据传输模块将图元的名称封装成XmlHttpRequest对象并发送给后台PHP数据库查询脚本；

1-3)PHP数据库查询脚本将图元的名字解析后，根据图元的名字在数据库中检索图元对应的属性，并将其传递给数据传输模块；

1-4)数据传输模块将图元对应属性封装成XmlHttpRequest对象并传递给图形界面；

1-5)图形界面将图元对应属性解析后展示给用户；

所述对流程图中节点位置进行微调的功能具体实现包括如下步骤：

2-1)用户通过图形界面拖拽节点至新位置，图形界面将该节点名称及位置传递给JQuery.GraphViz，之后脚本调用SVG格式提供的Dom接口，用户可以微调预览区的SVG格式流程图的节点位置；其中JQuery.GraphViz是一个开源代码，其授权为GPL协议；

2-2)图形界面将其展示给用户；用户可以点击保存按钮，通过文件模块再次生成PDF文件，并提供最新的PDF文件下载。