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

权利要求书

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

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

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

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

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

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

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

所述S4中根据生成的JS对象简谱数据结构执行代码，并创建超文本标记语言结构包括程序代码根据JS对象简谱数据结构生成文档对象模型树结构，其中，所述文档对象模型树结构由超文本标记语言标签组成；

所述S5中采用层叠样式表来设置所有节点的样式包括采用层叠样式表对所有节点之间的间距进行调整、对所有节点水平方向和竖直方向的布局进行调整及对节点之间的连线进行调整。

2.根据权利要求1所述的一种基于html5的流程图自动布局方法，其特征在于，在所述JS对象简谱数据结构中，采用条件节点表示所述if语句节点的分支。

3.根据权利要求1或2所述的一种基于html5的流程图自动布局方法，其特征在于，在所述JS对象简谱数据结构中，采用循环节点表示所述循环语句节点的循环体。

4.根据权利要求1所述的一种基于html5的流程图自动布局方法，其特征在于，对所述JS对象简谱数据结构采用相适应的代码段描述符进行描述节点类型，且流程图中任意节点的下一个节点均需要放在子节点字段中。

5.根据权利要求1所述的一种基于html5的流程图自动布局方法，其特征在于，所有节点的样式均为采用开源框架的弹性布局。

6.根据权利要求1所述的一种基于html5的流程图自动布局方法，其特征在于，采用所述层叠样式表的元素转换属性对所述流程图中的图形进行放大和缩小。

7.根据权利要求6所述的一种基于html5的流程图自动布局方法，其特征在于，对所述流程图的绘制可进行撤销和回退操作。