一种基于Web的高效流程图绘制系统及方法技术方案

本发明专利技术公开了一种基于Web的高效流程图绘制系统及方法，包括绘图模块、界面模块、文件模块；绘图模块包括节点管理模块、边管理模块以及组管理模块，负责接受传入的流程图的参数、封装成Image类对象，调用一个开源的算法库完成流程图自动布局和绘制工作；界面模块包括交互模块、数据传输模块，采用Bootstrap框架实现页面特效；数据传输模块负责前台、后台数据的异步传输工作；交互模块用于确定出用户点击的图元并将其名称传输给后台，后台检索该图元信息后再通过数据传输模块返回到用户界面；文件模块其一负责接受绘图模块发送过来的SVG文件，生成对应的PDF文件，导出MySQL数据库备份文件；其二负责导入文件、上传文件，以及解析上传的文件获得绘图参数的工作。

【技术实现步骤摘要】
一种基于Web的高效流程图绘制系统及方法
本专利技术属于计算机软件
，涉及一种流程图绘制系统，尤其涉及一种基于Web技术且应用布局技术自动根据传入参数进行布局的流程图绘制系统。
技术介绍
在流程图的绘制过程中，现有方法应用最广泛的是利用Microsoft提供的Office系列软件如Word，PowerPoint或者Visio等进行绘制，这种方法费时费力。用户首先需要选择所画图的类型，之后选择节点形状、然后拖拽节点到指定位置，再然后指定节点内容，最终连线并绘制成流程图。对于小型图，即节点以及连线数量比较少或者一次成型不需要过多修改的情况比较方便。然而，这种方法也存在一些难以克服的缺点。例如：1对于大型或者超大型流程图的绘制，这种方法会变得非常繁琐，需要绘图者手动去布局，拖拽的操作不仅费时费力，并且在图连线或者调整的过程中，还有可能导致原有的布局紊乱。2主流的流程图绘制软件都是以Windows平台为主，即使其他平台上有同类的软件，各种用户体验也很难做到一致，用户需要适应不同平台各个软件之间的差异性，增加了使用者的学习成本。鉴于上述方法在绘制流程图时的种种不便，AT&T实验室研发了一套开源作图工具软件GraphViz，通过该软件可以实现对流程图进行自动布局。用户可以根据GraphViz提供的Dot语言来编写绘图脚本，之后通过调用GraphViz的绘图命令对脚本进行解释从而生成各种图形。GraphViz在一定意义上解决了传统方法的问题，然而也带来了一些新的问题，例如，1虽然Dot语言是简单的脚本语言，然而并不是所有人都会用的，用户必须具有一定的编程基础，使用门槛较高。2由于系统自动对绘制出的流程图进行布局，并不允许用户对生成流程图的布局进行个性化的微调，尽管自动布局的流程图在大体上满足用户需求，然而在细节上并不一定能够满足用户的个性化需求，所以会在一定程度上影响用户的绘图体验。
技术实现思路
本专利技术为了克服上述现有技术中绘制流程图的种种缺陷，提出了一种高效的流程图绘制系统及方法，实现本专利技术的技术方案如下：一种基于Web的高效流程图绘制系统，包括绘图模块、界面模块、文件模块；所述绘图模块包括节点管理模块、边管理模块以及组管理模块，负责接受传入的流程图的参数，将这些参数封装成Image类数据对象，并调用一个开源的算法库GraphViz的API完成流程图自动布局和绘制工作；所述界面模块包括交互模块以及数据传输模块，属于系统用户页面主体部分，采用Bootstrap框架实现页面及页面特效；所述数据传输模块负责前台、后台数据的异步传输工作；所述交互模块一方面负责操作用户界面预览区中SVG图形的Dom接口，确定出用户点击的图元并将其名称传输给后台，后台检索该图元信息后再通过数据传输模块返回到用户界面；所述交互模块另一方面负责对SVG添加动画特效，以便用户进行个性化微调；所述文件模块包括文件生成模块、文件导入模块和文件导出模块；所述文件模块一方面负责接受所述绘图模块发送过来的SVG文件，并根据该SVG文件生成对应的PDF文件，同时导出MySQL数据库备份文件；另一方面负责导入文件、上传文件，以及解析上传的文件获得绘图参数的工作。进一步优选方案，所述绘图模块采用PHP语言编写实现；所述传入的流程图的参数包括：节点信息、边信息、组信息。进一步优选方案，所述界面模块采用Html语言与Javascript语言编写。进一步优选方案，所述数据传输模块采用Ajax技术实现，所述Ajax技术包括：异步Javascript和Xml技术。进一步优选方案，所述交互模块采用两个Javascript脚本实现。进一步优选方案，所述文件模块采用PHP和Python语言编写实现。基于上述高效流程图绘制系统，本专利技术还提出了一种基于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)图形界面将其展示给用本文档来自技高网...

【技术保护点】
一种基于Web的高效流程图绘制系统，其特征在于，包括绘图模块、界面模块、文件模块；所述绘图模块包括节点管理模块、边管理模块以及组管理模块，负责接受传入的流程图的参数，将这些参数封装成Image类数据对象，并调用一个开源的算法库GraphViz的API完成流程图自动布局和绘制工作；所述界面模块包括交互模块以及数据传输模块，属于系统用户页面主体部分，采用Bootstrap框架实现页面及页面特效；所述数据传输模块负责前台、后台数据的异步传输工作；所述交互模块一方面负责操作用户界面预览区中SVG图形的Dom接口，确定出用户点击的图元并将其名称传输给后台，后台检索该图元信息后再通过数据传输模块返回到用户界面；所述交互模块另一方面负责对SVG添加动画特效，以便用户进行个性化微调；所述文件模块包括文件生成模块、文件导入模块和文件导出模块；所述文件模块一方面负责接受所述绘图模块发送过来的SVG文件，并根据该SVG文件生成对应的PDF文件，同时导出MySQL数据库备份文件；另一方面负责导入文件、上传文件，以及解析上传的文件获得绘图参数的工作。

【技术特征摘要】
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类包括：始点、终点、始位置、终位置、标签、箭头形状、边的形状、颜色；所述的Gro...

【专利技术属性】
技术研发人员：杨洋，唐伟，梅傑，邱成健，
申请(专利权)人：江苏大学，
类型：发明
国别省市：江苏;32