CN113885745A - 可视化流程图编排方法、装置、可读介质及计算机设备 - Google Patents

Abstract

本发明提供了一种可视化流程图编排方法、装置、可读介质及计算机设备，该方法包括：加载HT图形组件，并生成编排流程图的操作界面；响应用户在操作界面上的编辑操作，以生成流程图；将流程图转换为超文本标记语言文档，并存储超文本标记语言文档；当浏览器调用流程图时，读取超文本标记语言文档，以将流程图展示在浏览器的页面上。该方法中的流程图操作界面简单、友好，降低了编排流程图的难度，提供了更方便，简洁的编排流程图的方法。

Description

可视化流程图编排方法、装置、可读介质及计算机设备

技术领域

本发明流程图像处理技术领域，特别是涉及一种可视化流程图编排方法、装置、可读介质及计算机设备。

背景技术

流程图广泛应用于各个行业中，以特定的图形符号加上说明，表示某一流程的信息流，观点流，物料流等信息。当下，越来越多的公司开始开发、搭建、运行自己的后台管理以及业务系统，并且大多数系统都是基于BS(Browser/Server)浏览器/服务器结构构建。

在这些系统中包含着各式各样的功能，虽然绝大多数功能流程是固定的并且已经有了对应的流程图，但随着业务功能的复杂或者需要用户自定义流程的功能时，存在对用户来说操作界面不是很友好，操作复杂的问题。

发明内容

鉴于上述状况，有必要针对现有技术中流程图编辑操作复杂的问题，提供一种可视化流程图编排方法、装置、可读介质及计算机设备。

一种可视化流程图编排方法，包括：

加载HT图形组件，并生成编排流程图的操作界面；

响应用户在所述操作界面上的编辑操作，以生成流程图；

将所述流程图转换为超文本标记语言文档，并存储所述超文本标记语言文档；

当浏览器调用所述流程图时，读取所述超文本标记语言文档，以将所述流程图展示在所述浏览器的页面上。

进一步的，上述可视化流程图编排方法，其中，所述响应用户在所述操作界面上的编辑操作，以生成流程图的步骤包括：

响应用户针所述操作界面中的流程图元素的拖拽操作，以将所述流程图元素移动至所述操作界面的摆放位置，并在所述摆放位置生成流程节点；

获取用户输入的所述流程节点的名称、备注字段、关联关系，以及关联描述信息；

根据所述流程节点，以及所述流程节点的名称、备注字段、关联关系、关联描述信息生成流程图。

进一步的，上述可视化流程图编排方法，其中，所述将所述流程图转换为超文本标记语言文档的步骤包括：

将所述流程图中各个流程节点的名称和备注字段转换为超文本标记语言；

将所述流程图中各个流程节点的流程图元素以及摆放位置信息转换为超文本语言；

将所述流程图中各个流程节点的关联关系以及关联描述信息转换为超文本语言。

进一步的，上述可视化流程图编排方法，所述响应用户在所述操作界面上的编辑操作，以生成流程图的步骤包括：

响应用户针所述操作界面中的流程图元素的拖拽操作，以将所述流程图元素移动至所述操作界面的摆放位置，并在所述摆放位置生成流程节点；

获取用户输入的所述流程节点的名称、备注字段、关联关系，以及获关联描述信息；

响应用户在所述操作界面上的弹框编辑操作，以在所述操作界面上生成弹框节点；

获取所述弹框节点的弹框信息，所述弹框信息包括显示标识和显示时间，所述显示标识用于标识是否需要显示所述弹框节点；

根据所述弹框节点、所述弹框节点的弹框信息、所述流程节点，以及所述流程节点的名称、备注字段、关联关系关联描述信息生成流程图。

进一步的，上述可视化流程图编排方法，其中，所述读取所述超文本标记语言文档，以将所述流程图展示在所述浏览器的页面上的步骤包括：

读取所述超文本标记语言文档，得到所述流程图和对应的节点状态数据；

匹配所述节点状态数据与所述流程图数据，并将所述流程图中的节点按照匹配到的节点状态数据进行显示。

进一步的，上述可视化流程图编排方法，其中，所述响应用户在所述操作界面上的编辑操作，以生成流程图的步骤之后还包括：

获取所述流程图中至少一个节点的状态类型和所述状态类型对应的状态值，得到节点状态数据，并进行存储。

进一步的，上述可视化流程图编排方法，其中，所述加载HT图形组件，并生成编排流程图的操作界面的步骤之后还包括：

获取并存储用户上传的流程图元素，在重新加载所述HT图像组件时，读取所述流程图元素，以将所述用户上传的流程图元素加载至所述操作界面中。

本发明还公开了一种可视化流程图编排装置，包括：

界面生成模块，用于加载HT图形组件，并生成编排流程图的操作界面；

流程图生成模块，用于响应用户在所述操作界面上的编辑操作，以生成流程图；

转换模块，用于将所述流程图转换为超文本标记语言文档，并存储所述超文本标记语言文档；

展示模块，用于当浏览器调用所述流程图时，读取所述超文本标记语言文档，以将所述流程图展示在所述浏览器的页面上。

进一步的，上述可视化流程图编排装置，其中，所述流程图生成模块用于：

响应用户针所述操作界面中的流程图元素的拖拽操作，以将所述流程图元素移动至所述操作界面的摆放位置，并在所述摆放位置生成流程节点；

获取用户输入的所述流程节点的名称、备注字段、关联关系，以及关联描述信息；

根据所述流程节点，以及所述流程节点的名称、备注字段、关联关系、关联描述信息生成流程图。

进一步的，上述可视化流程图编排装置，还包括：

弹框生成模块，用于响应用户在所述操作界面上的弹框编辑操作，以在所述操作界面上生成弹框节点；

弹框信息获取模块，用于获取所述弹框节点的弹框信息，所述弹框信息包括显示标识和显示时间，所述显示标识用于标识是否需要显示所述弹框节点；

所述根据所述流程节点，以及所述流程节点的名称、备注字段、关联关系关联描述信息生成流程图的步骤包括：

根据所述弹框节点、所述弹框节点的弹框信息、所述流程节点，以及所述流程节点的名称、备注字段、关联关系关联描述信息生成流程图。

进一步的，上述可视化流程图编排装置，其中，所述展示模块用于：

读取所述超文本标记语言文档，得到所述流程图和对应的节点状态数据；

匹配所述节点状态数据与所述流程图数据，并将所述流程图中的节点按照匹配到的节点状态数据进行显示。

进一步的，上述可视化流程图编排装置，还包括：

状态数据获取模块，用于获取所述流程图中至少一个节点的状态类型和所述状态类型对应的状态值，得到节点状态数据，并进行存储。

进一步的，上述可视化流程图编排装置，还包括：

元素获取模块，用于获取并存储用户上传的流程图元素，在重新加载所述HT图像组件时，读取所述流程图元素，以将所述用户上传的流程图元素加载至所述操作界面中。

本发明还公开了一种可读存储介质，其上存储有程序，所述程序被处理器执行时实现上述任一所述的方法。

本发明还公开了一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的程序，所述处理器执行所述程序时实现上述任意一项所述的方法。

本发明中，基于HT图像组件生成编排流程图的操作界面供用户操作，生成流程图；把用户编排好的流程图转化为浏览器可识别的超文本标记语言文档，并通过读取流程图的超文本标记语言文档，展示在浏览器页面上。该方法中的流程图操作界面简单、友好，降低了编排流程图的难度，提供了更方便，简洁的编排流程图的方法。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本发明第一实施例中可视化流程图编排方法的流程图；

图2为本发明第二实施例中可视化流程图编排方法的流程图；

图3为本发明第三实施例中可视化流程图编排装置的结构框图；

图4为本发明第实施例中计算机设备的结构示意图。

如下具体实施方式将结合上述附图进一步说明本发明。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“连接”、“相连”、“耦接”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电气的连接，不管是直接的还是间接的。本申请所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。本申请所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不代表针对对象的特定排序。

请参阅图1，为本发明第一实施例中的可视化流程图编排方法，包括步骤S11～S14。

步骤S11，加载HT图形组件，并生成编排流程图的操作界面。

步骤S12，响应用户在操作界面上的编辑操作，以生成流程图。

本实施例中利用HT图形组件来构建流程图，首先在浏览器中加载HT图形组件，以生成编排流程图的操作界面。具体实施时，加载该HT图形组件的流程图元素、管理常用字段、相关参数等，该流程图元素包括但不限于图例，箭头，曲线等。

生成的操作界面中设有程图素材列表，用户可以选择该流程图素材列表中的流程图元素，并设置流程节点，流程名字以及相关备注等编辑操作，以生成流程图。

可以理解的，该HT图形组件中的流程图元素除了包括组件自身默认设置的元素外，也包括用户根据需求上传的流程图元素。具体实施时，在操作界面上的设置有上传流程图元素的选项，用户点击该选项时，显示对应的元素添加界面，用户在该元素添加界面上上传流程图元素，流程图元素上传结束后，关闭该元素添加界面，系统读取流程图元素，并在该操作界面上生成编排流程图时需要的所有元素。

该HT图像组件中的默认元素不可编辑修改，其他元素用户可以进行上传和替换。

进一步的，在本发明的另一种实施方式中，响应用户在操作界面上的编辑操作，以生成流程图的步骤可以包括：

响应用户针操作界面中的流程图元素的拖拽操作，以将流程图元素移动至操作界面的摆放位置，并在摆放位置生成流程节点；

获取用户输入的流程节点的名称、备注字段、关联关系，以及获关联描述信息；

根据流程节点，以及流程节点的名称、备注字段、关联关系、关联描述信息生成流程图。

具体的，用户通过拖拽方式，可将流程图元素移动到操作界面的画布区域中，以生成流程节点，并为各个流程节点设置名称和备注字段，该流程节点的名称和备注字段可在该操作界面上的该节点的属性编辑框中进行编辑。每生成一个流程节点，用户均可设置节点的关联关系和关联描述信息，具体实施时，在每生成一个流程节点后界面会弹出一提示信息，以提示用户确认当前节点是否与其他节点有关联，当接收到基于该提示信息的确认信号时，弹出选择关联关系的提示信息，以供用户选择流入或流出关系，确认关联关系后，用户可在该节点的属性编辑框中输入关联描述信息。根据该流程节点的关联关系，以及用户输入的关联描述信息建立当前节点与其他节点的关联，生成流程节点间的连接线，以此得到用户需要的流程图。

步骤S13，将流程图转换为超文本标记语言文档，并存储超文本标记语言文档。

将用户画好的流程图，转化成为计算机可识别的数据，本实施例中可将流程图转化成为了超文本标记语言文档，然后储存在服务器的数据库中。具体的，将流程图转换为超文本标记语言文档的步骤包括：

将流程图中各个流程节点的名称和备注字段转换为超文本标记语言；

将流程图中各个流程节点的流程图元素以及摆放位置信息转换为超文本语言；

将流程图中各个流程节点的关联关系以及关联描述信息转换为超文本语言。

步骤S14，当浏览器调用流程图时，读取超文本标记语言文档，以将流程图展示在浏览器的页面上。

当浏览器调用存储的流程图时，读取已经存储好的流程图的超文本标记语言文档数据，然后展示在浏览器中。

本实施例，基于HT图像组件生成编排流程图的操作界面供用户操作，生成流程图；把用户编排好的流程图转化为浏览器可识别的超文本标记语言文档，并通过读取流程图的超文本标记语言文档，展示在浏览器页面上。该方法中，生成的操作界面简单、友好，降低了编排流程图的难度，提供了更方便，简洁的编排流程图的方法。

请参阅图2，为本发明第二实施例中的可视化流程图编排方法，包括步骤S21～S31。

步骤S21，加载HT图形组件，并生成编排流程图的操作界面。

步骤S22，响应用户针对操作界面中的流程图元素的拖拽操作，以将流程图元素移动至操作界面的摆放位置，并在摆放位置生成流程节点。

本实施例中利用HT图形组件来构建流程图，首先在浏览器中加载HT图形组件，以生成编排流程图的操作界面。该操作界面上设置有程图素材列表，该流程图素材列表包括多种流程图元素，例如图例，箭头，曲线等。

用户可以选在该流程图列表中的流程图元素进行流程图的编排或编辑。具体实施时，用户可以将流程图元素拖拽至流程图界面中的摆放位置上，以在该摆放位置上生成一流程节点。

步骤S23，获取针对流程节点的名称和备注字段。

用户可以在操作界面上录入各个流程节点的名称和备注字段，具体实施时，用户可以点击一流程节点，以在该操作界面上展示该节点的属性编辑框，用户可以在该属性编辑框中输入流程接地的名称和备注字段。也可以通过点击该操作界面的空白区域，以在该操作界面上显示所有节点的属性编辑框，并针对其中一个或多个节点的进行名称和备注字段的编辑。

步骤S24，获取针对流程节点的关联关系，以及获取用户针对流程节点的关联描述信息。

用户可以选择当前流程节点与其他流程节点的关联关系，即流出还是流入。具体实施时，每生成一个流程节点会弹出提示信息，以提示用户确认当前节点是否与其他节点有关联，当接收到基于该提示信息的确认信号时，弹出选择关联关系的提示信息，以供用户选择流入或流出关系，再根据用户输入的关联描述信息建立当前节点与其他节点的关联。

步骤S25，响应用户在操作界面上的弹框编辑操作，以在操作界面上生成弹框节点。

步骤S26，获取弹框节点的弹框信息，弹框信息包括显示标识和显示时间，显示标识用于标识是否需要显示弹框节点。

用户可以在该操作界面上设置弹框节点，该节点与流程节点的生成方式相同，都是通过拖拽生成。针对生成的弹框节点，用还需要设置显示标识和显示时间，该显示标识用于判断该节点是否需要显示，该显示时间用于标识显示该弹框节点的时长，例如永久显示，或者只持续一段时间，或者间隔多长时间显示。

步骤S27，根据弹框节点、弹框节点的弹框信息、流程节点，以及流程节点的名称、备注字段、关联关系关联描述信息生成流程图。

步骤S28，将流程图转换为超文本标记语言文档，并存储超文本标记语言文档。

可以理解的，用户在编排流程图时，主要是进行鼠标点击，键盘输入完成操作。对于浏览器来说，用户的每一次鼠标点击、键盘输入都是可以捕获到的，但是为了优化性能和节省开支，本方法只是记录了一些关键流程。

超文本标记语言文档主要有三部分内容组成：流程节点列表数据、流程节点样式数据和流程关系数据。其中，流程节点列表数据主要记录了用户录入的流程节点的名称和备注字段；流程节点样式数据主要记录了选择的流程节点的元素和摆放位置；流程关系数据主要记录各个流程的上下级，流入流出的关系，和关联描述信息。

步骤S29，获取流程图中至少一个节点的状态类型和状态类型对应的状态值，得到节点状态数据，并进行存储。

在操作界面上用户还可以设置节点装置数据，该节点状态数据包括状态类型和对应的状态值。不同的流程节点，用户可以设置不同的状态类型和对应的状态值，并且一个流程节点可以设置多种状态进行切换。该状态类型例如为：流程图节点的文字格式，边框颜色，背景图；箭头的图标，连线的颜色等。

步骤S30，当浏览器调用流程图时，读取超文本标记语言文档，得到流程图和对应的节点状态数据。

步骤S31，匹配节点状态数据与流程图数据，并将流程图中的节点按照匹配到的节点状态数据进行显示。

具体实施时，如果节点状态数据为空的话，所有流程节点都按照默认状态值显示。如果有节点状态数据时，则先一一匹配节点状态数据和流程图中的各个流程节点，当某个节点设置了需要切换多种状态，并且节点状态数据中有该节点信息时，就按照状态值修改流程图节点和箭头的样式。

可以理解的，如果弹框数据为空的话，所有弹框都不显示，如果弹框数据时，先一一匹配弹框数据和已有的弹框节点，匹配成功后，就按照显示标识和显示时间进行显示或者隐藏。

进一步的，流程图图后，就可以在浏览器中进行展示，但因为编排时候和展示时候的浏览器是可能不同的，这就需要考虑到浏览器的适配问题了。本方法是通过增加CSS(层叠样式表)来统一处理这一问题。CSS是一种用来表现文本标记语言文档(HTML)的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。在CSS中，对于默认的流程图元素可以通过修改其长宽，位置的数据做到图形质量的无损失的等比例缩放。

对用户来说，流程图中某些节点是比较重要的，需要特殊展示，比如当这个节点的流程有问题时，就需要对它特殊展示，比如修改颜色等等，或者说给出一个明显的弹框来提示信息。本实施例中，能对关键流程节点进行特殊展示，且能更直接的展示某个流程的状态，给出醒目提示能实时刷新流程图，动态地反应流程运转情况。

请参阅图3，为本发明第三实施例中的可视化流程图编排装置，包括：

界面生成模块31，用于加载HT图形组件，并生成编排流程图的操作界面；

流程图生成模块32，用于响应用户在操作界面上的编辑操作，以生成流程图；

转换模块33，用于将流程图转换为超文本标记语言文档，并存储超文本标记语言文档；

展示模块34，用于当浏览器调用流程图时，读取超文本标记语言文档，以将流程图展示在浏览器的页面上。

进一步的，上述可视化流程图编排装置，其中，流程图生成模块32用于：

响应用户针操作界面中的流程图元素的拖拽操作，以将流程图元素移动至操作界面的摆放位置，并在摆放位置生成流程节点；

获取用户输入的流程节点的名称、备注字段、关联关系，以及关联描述信息；

根据流程节点，以及流程节点的名称、备注字段、关联关系、关联描述信息生成流程图。

进一步的，上述可视化流程图编排装置，流程图生成模块32用于：

响应用户针操作界面中的流程图元素的拖拽操作，以将流程图元素移动至操作界面的摆放位置，并在摆放位置生成流程节点；

获取用户输入的流程节点的名称、备注字段、关联关系，以及获关联描述信息；

响应用户在操作界面上的弹框编辑操作，以在操作界面上生成弹框节点；

获取弹框节点的弹框信息，弹框信息包括显示标识和显示时间，显示标识用于标识是否需要显示弹框节点；

根据弹框节点、弹框节点的弹框信息、流程节点，以及流程节点的名称、备注字段、关联关系关联描述信息生成流程图。

进一步的，上述可视化流程图编排装置，其中，展示模块用于：

读取超文本标记语言文档，得到流程图和对应的节点状态数据；

匹配节点状态数据与流程图数据，并将流程图中的节点按照匹配到的节点状态数据进行显示。

进一步的，上述可视化流程图编排装置，还包括：

状态数据获取模块，用于获取流程图中至少一个节点的状态类型和状态类型对应的状态值，得到节点状态数据，并进行存储。

进一步的，上述可视化流程图编排装置，还包括：

元素获取模块，用于获取并存储用户上传的流程图元素，在重新加载HT图像组件时，读取流程图元素，以将用户上传的流程图元素加载至操作界面中。

本发明实施例所提供的可视化流程图编排装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。

需要说明的是，上述各个模块可以是功能模块也可以是程序模块，既可以通过软件来实现，也可以通过硬件来实现。对于通过硬件来实现的模块而言，上述各个模块可以位于同一处理器中；或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。

另外，结合图1至图2描述的本申请实施例中的可视化流程图编排方法主要由计算机设备来实现。图4为根据本申请实施例的计算机设备的硬件结构示意图。该计算机设备可以包括处理器81以及存储有计算机程序指令的存储器82。

具体地，上述处理器81可以包括中央处理器(CPU)，或者特定集成电路(Application Specific Integrated Circuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器82可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器82可包括硬盘驱动器(Hard Disk Drive，简称为HDD)、软盘驱动器、固态驱动器(SolidState Drive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(Universal SerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器82可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器82可在数据处理装置的内部或外部。在特定实施例中，存储器82是非易失性(Non-Volatile)存储器。在特定实施例中，存储器82包括只读存储器(Read-Only Memory，简称为ROM)和随机存取存储器(RandomAccess Memory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(ProgrammableRead-Only Memory，简称为PROM)、可擦除PROM(Erasable ProgrammableRead-Only Memory，简称为EPROM)、电可擦除PROM(Electrically Erasable ProgrammableRead-Only Memory，简称为EEPROM)、电可改写ROM(Electrically Alterable Read-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(Static Random-Access Memory，简称为SRAM)或动态随机存取存储器(Dynamic Random Access Memory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器(Fast Page Mode Dynamic Random Access Memory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(Extended Date Out Dynamic RandomAccess Memory，简称为EDODRAM)、同步动态随机存取内存(Synchronous Dynamic Random-Access Memory，简称SDRAM)等。

存储器82可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器81所执行的可能的计算机程序指令。

处理器81通过读取并执行存储器82中存储的计算机程序指令，以实现上述实施例中的可视化流程图编排方法。

在其中一些实施例中，该数据提供终端和平台还可包括通信接口83和总线80。其中，如图4所示，处理器81、存储器82、通信接口83通过总线80连接并完成相互间的通信。

通信接口83用于实现本申请实施例中各模块、装置、单元和/或设备之间的通信。通信接口83还可以实现与其他部件例如：外接设备、图像/数据采集设备、数据库、外部存储以及图像/数据处理工作站等之间进行数据通信。

总线80包括硬件、软件或两者，将对应设备的部件彼此耦接在一起。总线80包括但不限于以下至少之一：数据总线(Data Bus)、地址总线(Address Bus)、控制总线(ControlBus)、扩展总线(Expansion Bus)、局部总线(Local Bus)。举例来说而非限制，总线80可包括图形加速接口(Accelerated Graphics Port，简称为AGP)或其他图形总线、增强工业标准架构(Extended Industry Standard Architecture，简称为EISA)总线、前端总线(FrontSide Bus，简称为FSB)、超传输(Hyper Transport，简称为HT)互连、工业标准架构(Industry Standard Architecture，简称为ISA)总线、无线带宽(InfiniBand)互连、低引脚数(Low Pin Count，简称为LPC)总线、存储器总线、微信道架构(Micro ChannelArchitecture，简称为MCA)总线、外围组件互连(Peripheral Component Interconnect，简称为PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(Serial AdvancedTechnology Attachment，简称为SATA)总线、视频电子标准协会局部(Video ElectronicsStandards Association Local Bus，简称为VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线80可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。

另外，结合上述实施例中的可视化流程图编排方法，本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种可视化流程图编排方法。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种可视化流程图编排方法，其特征在于，包括：

加载HT图形组件，并生成编排流程图的操作界面；

响应用户在所述操作界面上的编辑操作，以生成流程图；

将所述流程图转换为超文本标记语言文档，并存储所述超文本标记语言文档；

当浏览器调用所述流程图时，读取所述超文本标记语言文档，以将所述流程图展示在所述浏览器的页面上。

2.如权利要求1所述的可视化流程图编排方法，其特征在于，所述响应用户在所述操作界面上的编辑操作，以生成流程图的步骤包括：

响应用户针所述操作界面中的流程图元素的拖拽操作，以将所述流程图元素移动至所述操作界面的摆放位置，并在所述摆放位置生成流程节点；

获取用户输入的所述流程节点的名称、备注字段、关联关系，以及关联描述信息；

根据所述流程节点，以及所述流程节点的名称、备注字段、关联关系、关联描述信息生成流程图。

3.如权利要求2所述的可视化流程图编排方法，其特征在于，所述将所述流程图转换为超文本标记语言文档的步骤包括：

将所述流程图中各个流程节点的名称和备注字段转换为超文本标记语言；

将所述流程图中各个流程节点的流程图元素以及摆放位置信息转换为超文本语言；

将所述流程图中各个流程节点的关联关系以及关联描述信息转换为超文本语言。

4.如权利要求1所述的可视化流程图编排方法，其特征在于，所述响应用户在所述操作界面上的编辑操作，以生成流程图的步骤包括：

响应用户针所述操作界面中的流程图元素的拖拽操作，以将所述流程图元素移动至所述操作界面的摆放位置，并在所述摆放位置生成流程节点；

获取用户输入的所述流程节点的名称、备注字段、关联关系，以及获关联描述信息；

响应用户在所述操作界面上的弹框编辑操作，以在所述操作界面上生成弹框节点；

获取所述弹框节点的弹框信息，所述弹框信息包括显示标识和显示时间，所述显示标识用于标识是否需要显示所述弹框节点；

根据所述弹框节点、所述弹框节点的弹框信息、所述流程节点，以及所述流程节点的名称、备注字段、关联关系关联描述信息生成流程图。

5.如权利要求1所述的可视化流程图编排方法，其特征在于，所述读取所述超文本标记语言文档，以将所述流程图展示在所述浏览器的页面上的步骤包括：

读取所述超文本标记语言文档，得到所述流程图和对应的节点状态数据；

匹配所述节点状态数据与所述流程图数据，并将所述流程图中的节点按照匹配到的节点状态数据进行显示。

6.如权利要求5所述的可视化流程图编排方法，其特征在于，所述响应用户在所述操作界面上的编辑操作，以生成流程图的步骤之后还包括：

获取所述流程图中至少一个节点的状态类型和所述状态类型对应的状态值，得到节点状态数据，并进行存储。

7.如权利要求2所述的可视化流程图编排方法，其特征在于，所述加载HT图形组件，并生成编排流程图的操作界面的步骤之后还包括：

获取并存储用户上传的流程图元素，在重新加载所述HT图像组件时，读取所述流程图元素，以将所述用户上传的流程图元素加载至所述操作界面中。

8.一种可视化流程图编排装置，其特征在于，包括：

界面生成模块，用于加载HT图形组件，并生成编排流程图的操作界面；

流程图生成模块，用于响应用户在所述操作界面上的编辑操作，以生成流程图；

转换模块，用于将所述流程图转换为超文本标记语言文档，并存储所述超文本标记语言文档；

展示模块，用于当浏览器调用所述流程图时，读取所述超文本标记语言文档，以将所述流程图展示在所述浏览器的页面上。

9.一种可读存储介质，其上存储有程序，其特征在于，所述程序被处理器执行时实现如权利要求1－7任一所述的方法。

10.一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的程序，其特征在于，所述处理器执行所述程序时实现如权利要求1－7任意一项所述的方法。

Images