CN107423270B - 一种在线流程图和代码实时互转的实现方法 - Google Patents

Abstract

本发明涉及网页开发技术领域，特别是一种在线流程图和代码实时互转的实现方法。本发明所述的方法包括以下步骤：(1)、在线绘制流程图；在“流程图”设计区域的功能区，设有工具按钮，拖拽这些工具按钮进“流程图”设计区域并编辑内容、条件即可完成流程图的绘制；(2)、流程图实时转中间XML代码；(3)、中间XML代码实时转程序代码；(4)、嵌套表达式和表达式优化；(5)、程序代码实时转流程图；将程序代码转成中间的XML表达式，再将XML表达式根据规则优化后转成流程图。本发明可以实现种流程图和代码在线实时互转。可以用于流程图和代码的在线开发。

Description

一种在线流程图和代码实时互转的实现方法

技术领域

本发明涉及网页开发技术领域，特别是一种在线流程图和代码实时互转的实现方法。

背景技术

目前，现有的技术中有实现单纯在线绘制流程图、在线文档者；但尚未有能进一步实现流程图与程序代码实时互转的功能。现有技术存在以下几个方面的缺点：

1：只是单方面的设计，没有转换的功能；

2：如果有转换也不是实时的转换，往往需要后台处理，不能所见即所得；

3：转换往往不可逆。

目前软件程序开发人员需要一种能方便绘制流程图(思维导图)的功能，同时将此流程图转换成代码，或者，将写好的代码更好地通过流程图来展示和讲解；

发明内容

本发明解决的技术问题在于提供一种在线流程图和代码实时互转的实现方法；以解决现有技术无法实现在线实时互换的缺陷。

本发明解决上述技术问题的技术方案是：

所述的方法包括以下步骤：

(1)、在线绘制流程图；

在“流程图”设计区域的功能区，设有工具按钮，拖拽这些工具按钮进“流程图”设计区域并编辑内容、条件即可完成流程图的绘制；

(2)、流程图实时转中间XML代码；

(3)、中间XML代码实时转程序代码；

(4)、嵌套表达式和表达式优化；

(5)、程序代码实时转流程图；

将程序代码转成中间的XML表达式，再将XML表达式根据规则优化后转成流程图。

所述的工具按钮包括：开始/结束块、判断块、普通节点块、带条件箭头、文本等；当鼠标经过设计区域的已拖拽的DIV块上会有删除图标和编辑图标：删除图标用来删除这个DIV块；编辑图标可以拖拽编辑DIV大小，编辑显示内容和条件等；每拖入一个DIV块，自动生成一个ID号，唯一标识这个DIV块。

流程图实时转中间XML代码的中间代码区域，

每拖入一个普通节点块或开始/结束块，会生成一行标签为EXP的表达式代码，属性“ID”为分配的唯一标识ID号，该标签内容为普通节点块的内容，包括X＝A+B；

每拖入一个判断块，则生成标签为IF的表达式代码，此IF表达式代码除了有ID属性外，还有一个条件属性CON；

判断块的流向下一个块的箭头的条件即为CON的值，包括X＞0；若普通节点块或开始/结束块有接入箭头，需判断此箭头的源DIV块ID是否大于本目标DIV块ID；若大于，源DIV块EXP表达式转变为WHILE表达式并提升权重至目标DIV块之前，同时新增CON条件；XML标签为成对出现格式，所以必须有结尾的符号，包括</exp>、</if>、</while>等。

在中间XML代码实时转程序代码时，

每拖入一个DIV块，或编辑DIV块的时候触发，中间XML代码更新的同时，程序代码也进行更新；更新采用无刷新的AJAX技术；

表达式的转换可以如下：

“<exp id＝’1’>X＝A+B</exp>”转换为“X＝A+B；”

“<if id＝’2’con＝’>0’>X</if>”转换为“if(X＞0){}”

“<whileid＝’3’con＝’>1’>Y</while>”转换为“while(Y＞1){}”。

嵌套时将对应的标签内的表达式转换成程序代码并将此代码加入到父表达式的大括号内；表达式优化主要针对多重连续的IF标签，包括“</if><if>”一般可优化为“}elseif{}”。

所述的步骤还可以包括：

(6)、保存中间代码；

中间代码可直接利用PHP函数file_get_contents读取区域内容保存成XML后缀格式。

(7)、导出，流程图可通过php的图片处理程序imagegrabscreen导出成图片，程序代码可通过PHP的文件读写功能导出成TXT文本。

所述的方法是将界面设计上呈现三个编辑框，从左至右分别为“流程图”、“中间代码”和“程序代码”，宽度比例分别为50％、25％、25％；“中间代码”底部有“保存”按钮，“流程图”和“程序代码”有“导出”按钮。

所述的在线流程图和代码实时互转的使用流程是：

(a)、打开转换网页；

(b)、在“流程图”设计区域设计流程图或在“程序代码”区域输入程序代码，或一起操作；

(c)、设计/输入完毕，满意后保存中间代码为XML格式；

(d)、将流程图导出为图片(JPG)或将程序代码导出为文本格式(TXT)；

(e)、完毕。

本发明的有益效果是：

1、本发明功能包括在线所见即所得地设计流程图、实时将流程图转成中间代码(可逆)、实时将中间代码转成程序代码(可逆)、保存中间代码为XML格式方便二次修改等。

2、在线设计流程图采用拖拽的方式，可利用插件easyUI的拖拽功能。

3、流程图中每一个DIV块都有一个独立唯一的ID，赋值方法为从上至下按顺序依次赋予增量为1的ID，方便进行查找和标识；判断DIV块转成的中间代码为IF类型，除了有ID属性还有条件属性“CON”(箭头上的条件内容)；其他DIV块(目标DIV块)若满足条件如下则将源DIV块转为WHILE类型的中间代码并提升权重至目标DIV块之前：目标DIV块有接入箭头且该箭头源点所属源DIV块的ID大于目标DIV块ID。

4、PHP完成实时转换成中间代码或程序代码，或反向转换，以及保存和导出功能等；流程图转中间代码为所见即所得地实时转换，中间代码转程序代码也是实时转换，因此流程图转成程序代码也是实时转换，反过来，将程序代码转成流程图也是实时转换；

5、中间代码采用XML格式，可随时保存。

而且是在线应用，兼容度高，快捷方便，可保存可导出，实时的显示更能

方便用户找到灵感，找出思维漏洞等。

附图说明

下面结合附图对本发明进一步说明：

图1为本发明的流程图；

图2为本发明功能模块图；

图3为本发明流程图(左)和中间代码(右)互转举例示意图；

图4为本发明中间代码(左)和程序代码(右)互转举例示意图。

具体实施方式

见图1至4所示，本发明关于一种在线流程图和代码实时互转的实现方法的重要功能点实现方法如下：

1：在线绘制流程图。在“流程图”设计区域的功能区，有很多工具按钮，拖拽这些工具按钮进“流程图”设计区域并编辑内容、条件即可完成流程图的绘制。工具按钮包括：开始/结束块、判断块、普通节点块、带条件箭头、文本等。鼠标经过设计区的已拖拽的DIV块上会有删除图标和编辑图标：删除图标用来删除这个DIV块，编辑图标可以拖拽编辑DIV大小，编辑显示内容和条件等；每拖入一个DIV块，自动生成一个ID号，唯一标识这个DIV块；

2：流程图实时转中间XML代码。每拖入一个普通节点块(或开始/结束块)，“中间代码”区域就会生成一行标签为EXP的表达式代码，属性“ID”为分配的ID号(唯一标识)，该标签内容为普通节点块的内容(如X＝A+B)；每拖入一个判断块，则生成标签为IF的表达式代码，此IF表达式代码除了有ID属性外，还有一个条件属性CON。判断块的流向下一个块的箭头的条件即为CON的值(如X＞0)；若普通节点块(或开始/结束块)有接入箭头，需判断此箭头的源DIV块ID是否大于本目标DIV块ID，若大于，源DIV块EXP表达式转变为WHILE表达式并提升权重至目标DIV块之前，同时新增CON条件；XML标签为成对出现格式，所以必须有结尾的符号，如</exp>、</if>、</while>等。

3：中间XML代码实时转程序代码。每拖入一个DIV块，或编辑DIV块的时候触发，中间XML代码更新的同时，程序代码也进行更新。这里用到了无刷新的AJAX技术。表达式的转换很简单，举例如下：

“<exp id＝’1’>X＝A+B</exp>”转换为“X＝A+B；”

“<if id＝’2’con＝’>0’>X</if>”转换为“if(X＞0){}”

“<whileid＝’3’con＝’>1’>Y</while>”转换为“while(Y＞1){}”

4：嵌套表达式和表达式优化。嵌套只需要将对应的标签内的表达式转换成程序代码并将此代码加入到父表达式的大括号内；表达式优化主要针对多重连续的IF标签，如“</if><if>”一般可优化为“}elseif{}”；

5：程序代码实时转流程图(逆行)。逆行只需反向思维，将程序代码转成中间的XML表达式，再将XML表达式根据规则优化(添加ID、属性等)后转成流程图；

6：保存中间代码。中间代码所见即所得，可直接利用PHP函数file_get_contents读取区域内容保存成XML后缀格式；

7：导出。流程图可通过php的图片处理程序(GD库)imagegrabscreen导出成图片，程序代码可通过PHP的文件读写功能(fopen)导出成TXT文本。

如图1所示，在线流程图和代码实时互转的使用流程是：

(a)、打开转换网页；

(b)、在“流程图”设计区域设计流程图或在“程序代码”区域输入程序代码，或一起操作；

(c)、设计/输入完毕，满意后保存中间代码为XML格式；

(d)、将流程图导出为图片(JPG)或将程序代码导出为文本格式(TXT)；

(e)、完毕。

图3、4是本发明流程图、中间代码和程序代码互转的举例截图。

图2显示了实现本发明方法的各功能模块，包括：流程图在线绘制模块，实现流程图在线绘制。程序代码在线编辑模块，在线进行程序代码编辑。中间代码转化模块，对中间代码进行转化。代码优化模块，优化中间代码。中间代码存储模块，存储中间代码。流程图/代码导出模块，导出流程图或代码。

以上是对本发明实施例中的技术方案进行清楚、完整的描述；显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出实质性创造获得的方案，都属于本发明保护的范围。

Claims (10)

1.一种在线流程图和代码实时互转的实现方法，其特征在于：所述的方法包括以下步骤：

(1)、在线绘制流程图；

在“流程图”设计区域的功能区，设有工具按钮，拖拽这些工具按钮进“流程图”设计区域并编辑内容、条件完成流程图的绘制；

(2)、流程图实时转中间XML代码；

(3)、中间XML代码实时转程序代码；

(4)、嵌套表达式和表达式优化；

(5)、程序代码实时转流程图；

将程序代码转成中间的XML表达式，再将XML表达式根据规则优化后转成流程图；

所述的工具按钮包括：开始/结束块、判断块、普通节点块、带条件箭头、文本；当鼠标经过设计区域的已拖拽的DIV块上会有删除图标和编辑图标：删除图标用来删除这个DIV块；编辑图标用于拖拽编辑DIV块大小，编辑显示内容和条件；每拖入一个DIV块，自动生成一个ID号，唯一标识这个DIV块；

流程图实时转中间XML代码时，

每拖入一个普通节点块或开始/结束块，会生成一行标签为EXP的表达式代码，属性“ID”为分配的唯一标识ID号，该标签的内容为普通节点块的内容；

每拖入一个判断块，则生成标签为IF的表达式代码，此标签IF的表达式代码除了有ID属性外，还有一个条件属性CON；

判断块的流向下一个块的箭头的条件即为CON的值；若普通节点块或开始/结束块有接入箭头，需判断此箭头的源DIV块ID是否大于本目标DIV块ID；若大于，源DIV块EXP的表达式转变为WHILE表达式并置于目标DIV块之前，同时新增CON条件；XML标签为成对出现格式，所以必须有结尾的符号，EXP表达式、WHILE表达式和XML表达式的结尾符号分别对应</EXP>、</IF>和</WHILE>。

2.根据权利要求1所述的方法，其特征在于：在中间XML代码实时转程序代码时，

每拖入一个DIV块，或编辑DIV块的时候触发，中间XML代码更新的同时，程序代码也进行更新；更新采用无刷新的AJAX技术；

表达式的转换如下：

“<exp id＝’1’>X＝A+B</exp>”转换为“X＝A+B；”

“<if id＝’2’con＝’>0’>X</if>”转换为“if(X>0){}”

“<while id＝’3’con＝’>1’>Y</while>”转换为“while(Y>1){}”。

3.根据权利要求2所述的方法，其特征在于：

嵌套时将对应的标签内的表达式转换成程序代码并将此代码加入到父表达式的大括号内；表达式优化针对多重连续的IF标签，将“</IF><IF>”优化为“elseif{}”。

4.根据权利要求1、2或3所述的方法，其特征在于：还包括以下步骤：

(6)、保存中间代码；

中间代码直接利用PHP函数file_get_contents读取区域内容保存成XML后缀格式；

(7)、导出，流程图通过php的图片处理程序imagegrabscreen导出成图片，程序代码通过PHP的文件读写功能导出成TXT文本。

5.根据权利要求1、2或3所述的方法，其特征在于：所述的方法是在界面设计上呈现三个编辑框，从左至右分别为“流程图”、“中间代码”和“程序代码”，宽度比例分别为50％、25％、25％；“中间代码”底部有“保存”按钮，“流程图”和“程序代码”有“导出”按钮。

6.根据权利要求4所述的方法，其特征在于：所述的方法是在界面设计上呈现三个编辑框，从左至右分别为“流程图”、“中间代码”和“程序代码”，宽度比例分别为50％、25％、25％；“中间代码”底部有“保存”按钮，“流程图”和“程序代码”有“导出”按钮。

7.根据权利要求1、2或3所述的方法，其特征在于：所述的在线流程图和代码实时互转的使用流程是：

(a)、打开转换网页；

(b)、在“流程图”设计区域设计流程图或在“程序代码”区域输入程序代码，或一起操作；

(c)、设计/输入完毕，满意后保存中间代码为XML格式；

(d)、将流程图导出为JPG图片或将程序代码导出为TXT文本格式；

(e)、完毕。

8.根据权利要求4所述的方法，其特征在于：所述的在线流程图和代码实时互转的使用流程是：

(a)、打开转换网页；

(b)、在“流程图”设计区域设计流程图或在“程序代码”区域输入程序代码，或一起操作；

(c)、设计/输入完毕，满意后保存中间代码为XML格式；

(d)、将流程图导出为JPG图片或将程序代码导出为TXT文本格式；

(e)、完毕。

9.根据权利要求5所述的方法，其特征在于：所述的在线流程图和代码实时互转的使用流程是：

(a)、打开转换网页；

(b)、在“流程图”设计区域设计流程图或在“程序代码”区域输入程序代码，或一起操作；

(c)、设计/输入完毕，满意后保存中间代码为XML格式；

(d)、将流程图导出为JPG图片或将程序代码导出为TXT文本格式；

(e)、完毕。

10.根据权利要求6所述的方法，其特征在于：所述的在线流程图和代码实时互转的使用流程是：

(a)、打开转换网页；

(b)、在“流程图”设计区域设计流程图或在“程序代码”区域输入程序代码，或一起操作；

(c)、设计/输入完毕，满意后保存中间代码为XML格式；

(d)、将流程图导出为JPG图片或将程序代码导出为TXT文本格式；

(e)、完毕。

Images