[发明专利]一种基于html5的流程图自动布局方法

说明书

本发明公开了一种基于html5的流程图自动布局方法，该方法包括以下步骤：S1、对流程图内的节点进行划分；S2、相邻节点之间设置加号按钮，通过点击加号按钮选择需要新增的节点；S3、程序代码通过点击的加号按钮的位置，生成相适应的JS对象简谱数据结构，并完成新增节点的添加；S4、根据生成的JS对象简谱数据结构执行代码，并创建超文本标记语言结构；S5、采用层叠样式表来设置所有节点的样式。有益效果：本发明在绘制流程图时，实现方式简单，只是依靠html标签和样式就能实现，无需像canvas或者svg那样，需要精确计算每个节点的具体坐标位置，从而有效提高了绘图的效率。

技术领域

本发明涉及互联网技术领域，具体来说，涉及一种基于html5的流程图自动布局方法。

背景技术

在开发环境、测试环境和生产环境中，流程图、架构图及拓扑图属于系统设计、运维等环节的基础依据，在企业各领域尤其是技术领域有重要作用，如展示流程、架构等；因而，在有需要时，一般会对这些图件进行绘制，其中，HTML5（ Hyper Text Markup Language5，超文本标记语言）是构建Web内容的一种语言描述方式，是构建以及呈现互联网内容的一种语言方式；被认为是互联网的核心技术之一；广泛应用于互联网应用的开发。流程图符号是专门用来画图的，不管什么符号，都需要给它定义，定义行为是由制定人予以完成的，要完成这项工作不应该先定义符号代表什么，而应该在做到组织结构或者作业流程心中有数后进行归类，根据归类采用不同的符号加以区分。

现有的技术方案一般都是手工布局的方式进行流程图的绘制，通过手工拖拽的方式对流程图的节点位置进行排列，节点间的连线也是通过手工连线的方式进行，手工布局的局限性很大，布局排列比较杂乱无章，当布局复杂之后，需要不断进行手工调整布局，防止节点互相覆盖，连线交叉；另外，节点间可能会存在相互嵌套的场景，当定义一个for循环节点时，for循环节点可能会嵌套一个for循环节点的场景，这时就会存在手工布局无法表达的情况，因此，设计一种基于html5的流程图自动布局方法是很有必要的。

针对相关技术中的问题，目前尚未提出有效的解决方案。

发明内容

针对相关技术中的问题，本发明提出一种基于html5的流程图自动布局方法，以克服现有相关技术所存在的上述技术问题。

为此，本发明采用的具体技术方案如下：

一种基于html5的流程图自动布局方法，该方法包括以下步骤：

S1、对流程图内的节点进行划分；

S2、相邻节点之间设置加号按钮，通过点击加号按钮选择需要新增的节点；

S3、程序代码通过点击的加号按钮的位置，生成相适应的JS对象简谱数据结构，并完成新增节点的添加；

S4、根据生成的JS对象简谱数据结构执行代码，并创建超文本标记语言结构；

S5、采用层叠样式表来设置所有节点的样式。

进一步的，所述S1中对流程图内的节点进行划分包括将流程图内的节点划分为通信、客户端动作、服务端动作、if语句、验证事件、开关语句、循环语句、加载语句、目的地址及JS中的一种或多种节点。

进一步的，在所述JS对象简谱数据结构中，采用条件节点表示所述if语句节点的分支。

进一步的，在所述JS对象简谱数据结构中，采用循环节点表示所述循环语句节点的循环体。

进一步的，对所述JS对象简谱数据结构采用相适应的代码段描述符进行描述节点类型，且流程图中任意节点的下一个节点均需要放在子节点字段中。