CN107423270B - 一种在线流程图和代码实时互转的实现方法 - Google Patents
一种在线流程图和代码实时互转的实现方法 Download PDFInfo
- Publication number
- CN107423270B CN107423270B CN201710624242.1A CN201710624242A CN107423270B CN 107423270 B CN107423270 B CN 107423270B CN 201710624242 A CN201710624242 A CN 201710624242A CN 107423270 B CN107423270 B CN 107423270B
- Authority
- CN
- China
- Prior art keywords
- flow chart
- code
- expression
- program code
- block
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/151—Transformation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/174—Form filling; Merging
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Document Processing Apparatus (AREA)
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)、完毕。
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710624242.1A CN107423270B (zh) | 2017-07-27 | 2017-07-27 | 一种在线流程图和代码实时互转的实现方法 |
PCT/CN2017/109603 WO2019019473A1 (zh) | 2017-07-27 | 2017-11-06 | 一种流程图和代码实时在线互转的方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710624242.1A CN107423270B (zh) | 2017-07-27 | 2017-07-27 | 一种在线流程图和代码实时互转的实现方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN107423270A CN107423270A (zh) | 2017-12-01 |
CN107423270B true CN107423270B (zh) | 2020-02-18 |
Family
ID=60431263
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201710624242.1A Active CN107423270B (zh) | 2017-07-27 | 2017-07-27 | 一种在线流程图和代码实时互转的实现方法 |
Country Status (2)
Country | Link |
---|---|
CN (1) | CN107423270B (zh) |
WO (1) | WO2019019473A1 (zh) |
Families Citing this family (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107977236B (zh) * | 2017-12-21 | 2020-11-13 | 上海智臻智能网络科技股份有限公司 | 问答***的生成方法、终端设备、存储介质及问答*** |
CN112732643B (zh) * | 2021-04-01 | 2021-07-20 | 南京国睿信维软件有限公司 | 流程图图形文件数据与s1000d标准xml格式数据的相互转换方法 |
CN113407164B (zh) * | 2021-06-21 | 2022-07-29 | 邬恩国 | 一种基于思维导图和树状结构技术软件代码生成方法及*** |
CN115131160B (zh) * | 2022-08-30 | 2022-12-09 | 创智和宇信息技术股份有限公司 | 医保信息平台及其基于规划树配置医保政策的方法 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103309648A (zh) * | 2012-03-12 | 2013-09-18 | 苏州工业园区进一科技有限公司 | 图形化制作软件的***和方法 |
CN104866298A (zh) * | 2014-02-26 | 2015-08-26 | 阿里巴巴集团控股有限公司 | 基于流程图的流程化业务实现方法和装置 |
Family Cites Families (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US7584354B2 (en) * | 2003-01-31 | 2009-09-01 | Intel Corporation | Implementing portable content protection to secure secrets |
CN101196810B (zh) * | 2006-12-08 | 2012-01-11 | 中颖电子股份有限公司 | 一种嵌入式设备运行方法 |
CN101188070B (zh) * | 2007-11-20 | 2011-03-16 | 北京联合大学 | 听障学生学习计算机程序设计语言的仿真教学*** |
CN101425011A (zh) * | 2008-09-26 | 2009-05-06 | 天津市天堰医教科技开发有限公司 | 图形化情景病例脚本编辑***及方法 |
-
2017
- 2017-07-27 CN CN201710624242.1A patent/CN107423270B/zh active Active
- 2017-11-06 WO PCT/CN2017/109603 patent/WO2019019473A1/zh active Application Filing
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103309648A (zh) * | 2012-03-12 | 2013-09-18 | 苏州工业园区进一科技有限公司 | 图形化制作软件的***和方法 |
CN104866298A (zh) * | 2014-02-26 | 2015-08-26 | 阿里巴巴集团控股有限公司 | 基于流程图的流程化业务实现方法和装置 |
Also Published As
Publication number | Publication date |
---|---|
CN107423270A (zh) | 2017-12-01 |
WO2019019473A1 (zh) | 2019-01-31 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN107423270B (zh) | 一种在线流程图和代码实时互转的实现方法 | |
CN109948134B (zh) | 一种报告自动生成方法、***及电子设备和存储介质 | |
KR101794373B1 (ko) | 선택된 데이터의 일시적인 포맷팅 및 도표화 기법 | |
CN112036736A (zh) | 一种工作流创建方法及装置 | |
CN107622080B (zh) | 一种数据处理方法及设备 | |
US20220164526A1 (en) | Method And Apparatus For Structured Documents | |
CN110968294B (zh) | 一种业务领域模型建立***及方法 | |
CN103793135A (zh) | 用户界面树形结构显示方法及*** | |
CN105808244A (zh) | 一种基于工作流的动态数据可视化分析工具 | |
CN114816380B (zh) | 一种面向医疗机构的低代码平台 | |
CN104871122A (zh) | 显示控制设备和程序 | |
CN116245052A (zh) | 一种图纸迁移方法、装置、设备和存储介质 | |
CN115309298A (zh) | 基于富文本编辑器的文本结构化方法及装置、介质及设备 | |
US20080005663A1 (en) | Document Processing Device And Document Processing Method | |
CN104375814A (zh) | 接口文档的生成方法及装置 | |
JPWO2005098658A1 (ja) | 文書処理装置及び文書処理方法 | |
JPWO2005098660A1 (ja) | 文書処理装置及び文書処理方法 | |
CN113434798B (zh) | 一种无代码rpa自动化流程文件的生成方法和*** | |
CN109816754A (zh) | 流程图的创建方法、显示方法及***和存储介质 | |
CN111078217A (zh) | 脑图生成方法、装置和计算机可读存储介质 | |
CN110688109A (zh) | 一种模型编辑***的创建方法及模型编辑*** | |
CN107621951B (zh) | 一种视图层级优化的方法及装置 | |
CN107562763A (zh) | 数据变化的显示方法及装置 | |
CN104239606A (zh) | Web环境下支持触屏的UML建模方法与装置 | |
US20090287994A1 (en) | Document processing device and document processing method |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
CB02 | Change of applicant information | ||
CB02 | Change of applicant information |
Address after: 523808 19th Floor, Cloud Computing Center, Chinese Academy of Sciences, No. 1 Kehui Road, Songshan Lake Hi-tech Industrial Development Zone, Dongguan City, Guangdong Province Applicant after: G-Cloud Technology Co., Ltd. Address before: 523808 Guangdong province Dongguan City Songshan Lake Science and Technology Industrial Park Building No. 14 Keyuan pine Applicant before: G-Cloud Technology Co., Ltd. |
|
GR01 | Patent grant | ||
GR01 | Patent grant |