流程图绘制方法、设备、存储介质及程序产品与流程

1.本公开实施例涉及计算机技术领域，尤其涉及一种流程图绘制方法、设备、存储介质及程序产品。

背景技术：

2.流程图是指以特定的图形符号加上必要的文字说明，用于表示算法的图。由于流程图形象简洁，便于理解，应用非常广泛，可以应用于展示产品的工艺流程，管理系统中的审批流程等。
3.相关技术中，在对流程图绘制过程中，基于节点的连接关系，进行节点与节点之间连线的绘制。
4.然而，发明人发现相关技术中至少存在以下技术问题：当流程图中节点总量较大，且连接关系较复杂时，会出现连线与节点重叠的现象，导致流程图混乱、不清晰。

技术实现要素：

5.本公开实施例提供一种流程图绘制方法、设备、存储介质及程序产品，以克服流程图中连线与节点重叠导致的流程图混乱不清晰的问题。
6.第一方面，本公开实施例提供一种流程图绘制方法，包括：
7.获取待绘制流程图中待处理连线的起始位置和终止位置；所述待绘制流程图中的各节点布局在多个层级区域内；多个层级区域在第一方向上并列分布且相邻层级区域之间为空白区域；每个层级区域内的各节点沿第二方向并列分布；所述第一方向与所述第二方向存在夹角；
8.若所述待处理连线的起始节点和终止节点位于非相邻层级区域内，则针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内的空位构建虚拟节点；所述空位在所述第一方向上占满所述层级区域；
9.基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图；所述目标连接线依次穿过各所述虚拟节点。
10.第二方面，本公开实施例提供一种流程图绘制设备，包括：
11.获取模块，用于获取待绘制流程图中待处理连线的起始位置和终止位置；所述待绘制流程图中的各节点布局在多个层级区域内；多个层级区域在第一方向上并列分布且相邻层级区域之间为空白区域；每个层级区域内的各节点沿第二方向并列分布；所述第一方向与所述第二方向存在夹角；
12.构建模块，用于若所述待处理连线的起始节点和终止节点位于非相邻层级区域内，则针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内的空位构建虚拟节点；所述空位在所述第一方向上占满所述层级区域；
13.生成模块，用于基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图；所述目标连接线依次穿过各所述
虚拟节点。
14.第三方面，本公开实施例提供一种电子设备，包括：处理器和存储器；
15.所述存储器存储计算机执行指令；
16.所述处理器执行所述存储器存储的计算机执行指令，使得所述至少一个处理器执行如上第一方面以及第一方面各种可能的设计所述的流程图绘制方法。
17.第四方面，本公开实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如上第一方面以及第一方面各种可能的设计所述的流程图绘制方法。
18.第五方面，本公开实施例提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上第一方面以及第一方面各种可能的设计所述的流程图绘制方法。
19.本实施例提供的流程图绘制方法、设备、存储介质及程序产品，该方法首先获取待绘制流程图中待处理连线的起始位置和终止位置，其中，待绘制流程图中的各节点布局在多个层级区域内，多个层级区域在第一方向上并列分布且相邻层级区域之间为空白区域，每个层级区域内的各节点沿第二方向并列分布，所述第一方向与所述第二方向存在夹角，其次当待处理连线的起始节点和终止节点位于非相邻层级区域内时，则针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内的空位构建虚拟节点；所述空位在所述第一方向上占满所述层级区域，最后基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图，其中，目标连接线依次穿过各所述虚拟节点。本实施例提供的流程图绘制方法，通过在起始节点和终止节点之间的各层级区域内构建虚拟节点，令从起始位置至终止位置的连接线在穿过各层级区域时，从虚拟节点处穿过，避免了连接线与待绘制流程图的各节点发生重叠，使得绘制获得的目标流程图清晰美观。
附图说明
20.为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
21.图1为本公开实施例提供的流程图绘制方法的应用场景图；
22.图2为本公开实施例提供的流程图绘制方法流程示意图一；
23.图3为本公开实施例提供的虚拟节点构造流程的示意图一；
24.图4为本公开实施例提供的虚拟节点构造流程的示意图二；
25.图5为本公开实施例提供的虚拟节点构造流程的示意图三；
26.图6为本公开实施例提供的流程图绘制方法流程示意图二；
27.图7为本公开实施例提供的流程图绘制方法流程示意图三；
28.图8为本公开实施例提供的交互流程示意图；
29.图9为本公开实施例提供的流程图绘制设备的结构框图；
30.图10为本公开实施例提供的流程图绘制设备的硬件结构示意图。
具体实施方式
31.为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。
32.参考图1，图1为本公开实施例提供的流程图绘制方法的应用场景图。终端设备101和服务器102通信连接。终端设备101可以是带有显示器且支持网页浏览的电子设备，例如计算机、平板电脑、手机等。服务器102可以是提供多种服务的服务器，例如可以是对终端设备101的显示页面提供支持的后台服务器。
33.在具体实现过程中，终端设备101响应于用户在浏览器的显示界面的流程图绘制的确认指令，生成流程图绘制请求，并将流程图绘制请求发送给服务器102，服务器102根据流程图绘制请求将待绘制流程图的配置数据返回给终端设备101，其中配置数据包括待绘制流程图中各节点之间待处理连线的起始位置和终止位置，以及各节点的布局数据，待绘制流程图中的各节点布局在多个层级区域内；多个层级区域在第一方向上并列分布且相邻层级区域之间为空白区域；每个层级区域内的各节点沿第二方向并列分布；所述第一方向与所述第二方向存在夹角，终端设备101基于待处理连线的起始位置和终止位置，对待处理连线的起始节点和中直接点是否位于相邻层级区域进行判断，若待处理连线的起始节点和终止节点位于非相邻层级区域内，则针对起始节点和终止节点之间的每个层级区域，在该层级区域内的空位构建虚拟节点，其中该空位在第一方向上占满所述层级区域，进而基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图，其中，该目标连接线依次穿过各所述虚拟节点。本公开实施例提供的流程图绘制方法，通过在起始节点和终止节点之间的各层级区域内构建虚拟节点，令从起始位置至终止位置的连接线在穿过各层级区域时，从虚拟节点处穿过，避免了连接线与待绘制流程图的各节点发生重叠，使得绘制获得的目标流程图清晰美观。
34.参考图2，图2为本公开实施例提供的流程图绘制方法流程示意图一。本实施例的方法可以应用在图1所示的终端设备中，该流程图绘制方法包括：
35.201、获取待绘制流程图中待处理连线的起始位置和终止位置；所述待绘制流程图中的各节点布局在多个层级区域内；多个层级区域在第一方向上并列分布且相邻层级区域之间为空白区域；每个层级区域内的各节点沿第二方向并列分布；所述第一方向与所述第二方向存在夹角。
36.本实施例中，待绘制流程图包括多个节点和多个待处理连线。待处理连线用于一端连接起始节点，另一端连接终止节点。基于节点的信号流向，多个节点包括多个层级，每一层级对应一层级区域，各层级区域按照层级，沿一个方向并列排布。
37.示例性的，如图3所示，节点1至节点8被分布在三个层级区域内，其中，节点1为根节点被分布在第一层级区域，节点2、节点3和节点4为节点1的子节点，被分布在第二层级区域，节点5、节点6、节点7和节点8为更下一层级的叶子节点，被分布在第三层级区域。其中，待处理连线ab的起始位置为点a所在位置，终止位置为点b所在位置。
38.可选地，第一方向可以是横向或纵向，相应的，第二方向可以是纵向或横向。示例性的，如图3所示，各层级区域横向并排排列，各层级区域内的节点纵向并排排列。如图4所
示，各层级区域纵向并排排列，各层级区域内的节点横向并排排列。
39.202、若所述待处理连线的起始节点和终止节点位于非相邻层级区域内，则针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内的空位构建虚拟节点；所述空位在所述第一方向上占满所述层级区域。
40.本实施例中，在获取到待处理连线的起始位置和终止位置后，可以基于起始位置和终止位置判断对应的起始节点和终止节点分别所处层级的相邻关系。如果起始节点和终止节点不相邻，则说明，该待处理连线需要穿过至少一个层级区域，就可能出现节点与连线重叠的问题。基于此，可以在需要穿过的各层级区域内构建虚拟节点。在穿过各层级区域时，可以穿过对应的虚拟节点，以避免与节点发生重叠，导致连线混乱，不清晰。
41.如图3所示，节点1和节点5分别位于第一层级区域和第三层级区域。中间需要穿过第三层级区域。此时可以在第三层级区域的空位内构建虚拟节点。其中，空位在所述第一方向上占满所述层级区域，即空位的宽度与所在层级区域在第一方向上的宽度需一致。层级区域沿第一方向的宽度与同一层级中各节点的宽度以及各节点的对齐方式相关，以第二层级区域内的各节点为例，节点2和节点4为左对齐，节点3和节点4为右对齐，那么最终第二层级区域沿第一方向的宽度最小为节点4的宽度。以第三层级区域内的各节点为例，节点5至节点8被设置为宽度和高度均相等，且进行了对齐，那么第三层级区域沿第一方向的宽度最小为其中任一节点的宽度。
42.203、基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图；所述目标连接线依次穿过各所述虚拟节点。
43.本实施例中，在构建好虚拟节点后，从起始位置绘制线条，令线条经过起始节点所在层及区域和终止节点所在层级区域之间的各中间的层级区域时，穿过对应的虚拟节点，使得得到的目标连接线与节点不发生重叠，清晰美观。线条样式可以根据实际需要进行设定，例如可以是线段、贝塞尔曲线等。
44.示例性的，如图3所示，ab可以有曲线和线段构成。连接线从起始位置a开始，穿过第一层级区域与第二层级区域之间的空白区域后，在穿过第二层级区域时从虚拟节点穿过，进而再穿过第二层级区域与第三层级区域之间的空白区域后到达终止位置b。如图4所示，待处理连线cd的起始位置为点c的位置信息，终止位置为点d的位置信息。从c开始，穿过起始节点节点1所在的第一层级区域与第二层级区域之间的空白区域后，再穿过第二层级区域时从虚拟节点穿过，进而再穿过第二层级区域与终止节点节点5所在的第三层级区域之间的空白区域后，到达终止位置d。cd可以有多个线段组成。
45.从上述描述可知，本实施例提供的流程图绘制方法，通过在起始节点和终止节点之间的各层级区域内构建虚拟节点，令从起始位置至终止位置的连接线在穿过各层级区域时，从虚拟节点处穿过，避免了连接线与待绘制流程图的各节点发生重叠，使得绘制获得的目标流程图清晰美观。
46.在本公开的一个实施例中，在上述图2实施例的基础上，针对起始节点与终止节点位于相邻层级区域内的情况，步骤s201还可以包括：若所述待处理连线的起始节点和终止节点位于相邻层级区域内，则在所述相邻层级区域之间的空白区域，生成从所述起始位置到所述终止位置的目标连接线。
47.具体的，当待处理连线的起始节点与终止节点位于相邻层级区域内时，表明，绘制
待处理连线时无需穿过其他层级区域，不易发生连线与节点的重叠的情况。当然，针对同一层级区域内节点在第一方向上的宽度不同的情况，如图5所示，若起始位置f1与终止位置f2的连线，采用一个线段直连的方式，会发生虚线f1f2与节点7重叠的情况，因此，可以选用其他连线方式，例如f1至f2，多个线段的组合的方式。
48.在本公开的一个实施例中，在上述图2实施例的基础上，为了令提示框的显示内容完整显示，不受限于绘制流程图的画布的尺寸。可以采用dom混排的方式，步骤203之后还可以包括：响应作用于所述目标流程图中的节点或目标连接线的触控操作，显示对应的提示框；所述提示框对应的第一文档对象模型dom元素与所述目标流程图对应的第二dom元素采用不同标签，以使所述第一dom元素与所述第二dom元素位于不同层级。
49.示例性的，以基于html5的流程图绘制为例，用于显示提示消息的tooltip的实现黑盒，与流程图的图表，均绘制在同一canvas元素内，属于同一层级，tooltip被限定在画布以内。为解决该问题，可以将tooltip采用其他标签，例如div、p等标签，与图表分列在不同层级，实现tooltip的内容完整显示，不受限于流程图的画布的尺寸。
50.在本公开的一个实施例中，如图6所示，在上述图2实施例的基础上，本实施例中对虚拟节点的构建过程进行了示例说明，步骤s202具体可以包括：
51.2021、确定所述起始节点的下一层级区域内的多个空位分别与所述起始节点之间的距离，并在多个距离中的最小距离所对应的空位构建第一虚拟节点，并将所述第一虚拟节点确定为当前虚拟节点。多个所述空位为在所述第二方向上各节点之间的空白区域。
52.2022、判断所述当前虚拟节点的下一层级区域内是否存在所述终止节点。若不存在，则执行步骤2023，若存在，则执行步骤203。
53.2023、确定所述当前虚拟节点的区域内的多个空位分别与所述当前虚拟节点之间的距离，并在多个距离中的最小距离所对应的空位构建下一级虚拟节点，并将所述下一级虚拟节点确定为当前虚拟节点，并返回执行步骤2022。
54.可选地，所述在多个距离中的最小距离所对应的空位构建第一虚拟节点，可以包括：若多个距离中最小距离所对应的空位为多个，则基于预设规则，从多个空位中选定一个空位构建第一虚拟节点。
55.具体的，所述基于预设规则，从多个空位中选定一个空位构建第一虚拟节点，可以包括：沿所述第二方向，从多个空位中选定排列在第一个的空位，构建所述第一虚拟节点。还可以包括：沿所述第二方向，从多个空位中选定排列在最后一个的空位，构建所述第一虚拟节点。
56.示例性的，如图5所示，待处理连线e1e6对应的起始节点，节点1，与终止节点，节点10之间的中间层级区域，包括有第二层级区域和第三层级区域，因此，可以在第二层级区域的各空位中，选择与节点1距离最近的空位构建虚拟节点，可发现，虚拟节点1和虚拟节点3到节点1的距离相同且最短，基于从上到下的筛选原则，可以选定虚拟节点1作为第二层级区域的虚拟节点，即第一虚拟节点。在确定第一虚拟节点后，以第一虚拟节点为基准，在第三层级区域内的多个空位内，查与第一虚拟节点距离最近的空位构建第三层级区域的虚拟节点，例如，虚拟节点2。第四层级区域内包括终止节点，因此，虚拟节点构建完成。后续可以进行目标连接线的绘制。
57.在本公开的一个实施例中，在上述图2实施例的基础上，步骤s203具体可以包括：
针对每个虚拟节点，在所述虚拟节点的第一边确定第一锚点，在所述虚拟节点的第二边确定第二锚点；所述第一边和所述第二边为所述虚拟节点沿所述第一方向的相对边；将所述起始位置与下一层级区域的虚拟节点的第一锚点之间的第一连接线、各虚拟节点的第一锚点和第二锚点之间的第二连接线、相邻虚拟节点中上一层级区域的虚拟节点的第二锚点与下一层级区域的虚拟节点的第一锚点之间的第三连接线，以及所述终止位置与上一层级区域的虚拟节点的第二锚点之间的第四连接线，确定为所述目标连接线。
58.示例性的，如图5所示，继续以待处理连线e1e6为例。各虚拟节点可以选定两个锚点，例如，虚拟节点1可以包括第一锚点e2和第二锚点e3，虚拟节点2可以包括第一锚点e4和第二锚点e5。在构建e1e6的目标连接线时，可以在空白区域，基于预设的线条样式，构建连线，例如线段e1e2，线段e3e4，线段e5e6，可以在中间的各层级区域内构建第一锚点和第二帽点之间的连线，例如线段e2e3，线段e4e5。可见，线段e1e2，线段e2e3，线段e3e4，线段e4e5和线段e5e6共同组成了目标连接线e1e6。
59.参考图7，图7为本公开实施例提供的流程图绘制方法流程示意图二。本实施例中详细描述在接收输入触发事件之前在输入框显示第二默认提示信息，在接收输入触发事件之后在输入框显示第一默认提示信息的过程，该流程图绘制方法包括：
60.701、获取待绘制流程图的配置信息和各节点之间的连接关系；所述配置信息包括各节点的间距信息、画布的尺寸信息和边距信息。
61.702、根据所述连接关系，生成有向无环图。
62.703、根据所述有向无环图和所述配置信息，将各节点布局在多个层级区域内；获得各节点在所述画布中的绝对位置。
63.704、根据各节点的绝对位置，确定各节点之间的待处理连线的起始位置和终止位置。
64.本实施例中，待绘制流程图的配置信息和各节点之间的连接关系的内容可以包括：数据源、组件声明和画布配置，其中，数据源可以包括节点数据和连线数据，用于表示节点之间的连接关系，例如节点1-》节点2，节点2-》节点3。节点组件和连线组件用于声明节点的样式(表示组件应该如何绘制)以及交互定义(如何进行交互，例如单机改变样式、双击编辑节点名称、悬停显示提示消息等)。画布的配置数据包括流程图的整体属性配置，可以定义流程图与画布的上下左右间隔，流程图节点之间的上下左右间距。
65.在获得了各节点之间的连接关系后，可以基于该连接关系构建有向无环图dag。获得节点的层级关系。即，根节点、父节点、子节点、叶子节点的情况。并且在此基础上，结合配置信息，即画布和节点的间距信息，可以将各节点进行布局，并自动获取到各节点在画布中的绝对位置。例如，以画布的左上角为原点，可以构建坐标系，根节点为节点1，且已知画布的尺寸，长和宽，根节点的长和宽，根节点与画布边缘的间距，则可以计算获得节点1的坐标，即节点1在画布中的绝对位置。其他节点与节点1的间距已知，同理，也可以获得其他节点的坐标。
66.在获得了各节点的绝对位置后，可以选定节点的任一锚点作为对应待处理连线的起始位置或终止位置。
67.705、若所述待处理连线的起始节点和终止节点位于非相邻层级区域内，则针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内的空位构建虚拟节
点；所述空位在所述第一方向上占满所述层级区域。
68.706、基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图；所述目标连接线依次穿过各所述虚拟节点。
69.本实施例中步骤705与步骤706和上述实施例中步骤202与步骤203相类似，此处不再赘述。
70.从上述描述可知，通过基于各节点之间的连接关系构建有向无环图，进而基于该有向无环图以及配置信息可以自动获得各节点在画布中的绝对位置，相对于相关技术中，需要将绝对位置进行手动输入，提高了流程图绘制的效率以及便利性。
71.在本公开的一个实施例中，在上述图7实施例的基础上，可以增加各种交互定义，实现对绘制好的流程图进一步做调整的目的，在步骤704之后，还可以包括：响应作用于所述目标流程图中的节点更新操作，重新确定更新后的节点在所述画布中的绝对位置；基于所述更新后的节点的绝对位置，重新确定对应待处理连线的起始位置和终止位置。
72.本实施例中，节点更新操作，可以包括样式更改，节点名称更改，节点尺寸调整，节点增删等。
73.示例性的，如图8所示，对节点3右击后，可显示菜单，菜单中包括增加节点、删除节点、隐藏节点、修改名称和样式变换等5项操作。若选择修改名称，并进一步将节点3的名称节点3修改为中间节点1，由于字数增多，节点长度加长，此时，与节点3对应连线也会相应进行调整，以适应更新后的节点。具体改变流程可参照步骤703至704，以重新确定连线的起始位置和终止位置。
74.从上述描述可知，通过增加交互，便于在流程图基于输入的配置数据绘制完成后，对流程图进行微调。且节点更新后，也可以自动进行连线的修改。操作便利。
75.对应于上文实施例的流程图绘制方法，图9为本公开实施例提供的流程图绘制设备的结构框图。为了便于说明，仅示出了与本公开实施例相关的部分。参照图9，所述设备90包括：获取模块901、构建模块902和生成模块903。
76.其中，获取模块901，用于获取待绘制流程图中待处理连线的起始位置和终止位置；所述待绘制流程图中的各节点布局在多个层级区域内；多个层级区域在第一方向上并列分布且相邻层级区域之间为空白区域；每个层级区域内的各节点沿第二方向并列分布；所述第一方向与所述第二方向存在夹角。
77.构建模块902，用于若所述待处理连线的起始节点和终止节点位于非相邻层级区域内，则针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内的空位构建虚拟节点；所述空位在所述第一方向上占满所述层级区域。
78.生成模块903，用于基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图；所述目标连接线依次穿过各所述虚拟节点。
79.在本公开的一个实施例中，所述构建模块902，具体用于确定所述起始节点的下一层级区域内的多个空位分别与所述起始节点之间的距离，并在多个距离中的最小距离所对应的空位构建第一虚拟节点；多个所述空位为在所述第二方向上各节点之间的空白区域。
80.在本公开的一个实施例中，所述构建模块902，具体用于沿所述第二方向，从多个空位中选定排列在第一个的空位，构建所述第一虚拟节点。
media player，简称pmp)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字tv、台式计算机等等的固定终端。图10示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
90.如图10所示，电子设备1000可以包括处理装置(例如中央处理器、图形处理器等)1001，其可以根据存储在只读存储器(read only memory，简称rom)1002中的程序或者从存储装置1008加载到随机访问存储器(random access memory，简称ram)1003中的程序而执行各种适当的动作和处理。在ram 1003中，还存储有电子设备1000操作所需的各种程序和数据。处理装置1001、rom 1002以及ram 1003通过总线1004彼此相连。输入/输出(i/o)接口1005也连接至总线1004。
91.通常，以下装置可以连接至i/o接口1005：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置1006；包括例如液晶显示器(liquid crystal display，简称lcd)、扬声器、振动器等的输出装置1007；包括例如磁带、硬盘等的存储装置1008；以及通信装置1009。通信装置1009可以允许电子设备1000与其他设备进行无线或有线通信以交换数据。虽然图10示出了具有各种装置的电子设备1000，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
92.特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置1009从网络上被下载和安装，或者从存储装置1008被安装，或者从rom1002被安装。在该计算机程序被处理装置1001执行时，执行本公开实施例的方法中限定的上述功能。
93.需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、rf(射频)等等，或者上述的任意合适的组合。
94.上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
95.上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电
子设备执行时，使得该电子设备执行上述实施例所示的方法。
96.可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如java、smalltalk、c++，还包括常规的过程式程序设计语言—诸如“c”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(local area network，简称lan)或广域网(wide area network，简称wan)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
97.附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
98.描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。
99.本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(fpga)、专用集成电路(asic)、专用标准产品(assp)、片上系统(soc)、复杂可编程逻辑设备(cpld)等等。
100.在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦除可编程只读存储器(eprom或快闪存储器)、光纤、便捷式紧凑盘只读存储器(cd-rom)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
101.第一方面，根据本公开的一个或多个实施例，提供了一种流程图绘制方法，包括：
102.获取待绘制流程图中待处理连线的起始位置和终止位置；所述待绘制流程图中的各节点布局在多个层级区域内；多个层级区域在第一方向上并列分布且相邻层级区域之间为空白区域；每个层级区域内的各节点沿第二方向并列分布；所述第一方向与所述第二方向存在夹角；
103.若所述待处理连线的起始节点和终止节点位于非相邻层级区域内，则针对所述起
始节点和所述终止节点之间的每个层级区域，在所述层级区域内的空位构建虚拟节点；所述空位在所述第一方向上占满所述层级区域；
104.基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图；所述目标连接线依次穿过各所述虚拟节点。
105.根据本公开的一个或多个实施例，所述针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内构建虚拟节点，包括：
106.确定所述起始节点的下一层级区域内的多个空位分别与所述起始节点之间的距离，并在多个距离中的最小距离所对应的空位构建第一虚拟节点；多个所述空位为在所述第二方向上各节点之间的空白区域。
107.根据本公开的一个或多个实施例，所述在多个距离中的最小距离所对应的空位构建第一虚拟节点，包括：
108.若多个距离中最小距离所对应的空位为多个，则基于预设规则，从多个空位中选定一个空位构建第一虚拟节点。
109.根据本公开的一个或多个实施例，所述基于预设规则，从多个空位中选定一个空位构建第一虚拟节点，包括：
110.沿所述第二方向，从多个空位中选定排列在第一个的空位，构建所述第一虚拟节点。
111.根据本公开的一个或多个实施例，所述针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内构建虚拟节点，还包括：
112.将所述第一虚拟节点确定为当前虚拟节点；
113.若所述当前虚拟节点的下一层级区域内不存在所述终止节点，则确定所述当前虚拟节点的区域内的多个空位分别与所述当前虚拟节点之间的距离，并在多个距离中的最小距离所对应的空位构建下一级虚拟节点，并将所述下一级虚拟节点确定为当前虚拟节点，重复执行若所述当前虚拟节点的下一层级区域内不存在所述终止节点，则确定所述当前虚拟节点的区域内的多个空位分别与所述当前虚拟节点之间的距离，并在多个距离中的最小距离所对应的空位构建下一级虚拟节点，并将所述下一级虚拟节点确定为当前虚拟节点，直至所述当前虚拟节点的下一层级中存在所述终止节点；
114.若所述当前虚拟节点的下一层级中存在所述终止节点，则基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线。
115.根据本公开的一个或多个实施例，所述基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，包括：
116.针对每个虚拟节点，在所述虚拟节点的第一边确定第一锚点，在所述虚拟节点的第二边确定第二锚点；所述第一边和所述第二边为所述虚拟节点沿所述第一方向的相对边；
117.将所述起始位置与下一层级区域的虚拟节点的第一锚点之间的第一连接线、各虚拟节点的第一锚点和第二锚点之间的第二连接线、相邻虚拟节点中上一层级区域的虚拟节点的第二锚点与下一层级区域的虚拟节点的第一锚点之间的第三连接线，以及所述终止位置与上一层级区域的虚拟节点的第二锚点之间的第四连接线，确定为所述目标连接线。
118.根据本公开的一个或多个实施例，所述方法还包括：
119.若所述待处理连线的起始节点和终止节点位于相邻层级区域内，则在所述相邻层级区域之间的空白区域，生成从所述起始位置到所述终止位置的目标连接线。
120.根据本公开的一个或多个实施例，所述获取待绘制流程图中待处理连线的起始位置和终止位置，包括：
121.获取待绘制流程图的配置信息和各节点之间的连接关系；所述配置信息包括各节点的间距信息、画布的尺寸信息和边距信息；
122.根据所述连接关系，生成有向无环图；
123.根据所述有向无环图和所述配置信息，将各节点布局在多个层级区域内；获得各节点在所述画布中的绝对位置；
124.根据各节点的绝对位置，确定各节点之间的待处理连线的起始位置和终止位置。
125.根据本公开的一个或多个实施例，所述方法还包括：
126.响应作用于所述目标流程图中的节点更新操作，重新确定更新后的节点在所述画布中的绝对位置；
127.基于所述更新后的节点的绝对位置，重新确定对应待处理连线的起始位置和终止位置。
128.根据本公开的一个或多个实施例，所述方法还包括：
129.响应作用于所述目标流程图中的节点或目标连接线的触控操作，显示对应的提示框；所述提示框对应的第一文档对象模型dom元素与所述目标流程图对应的第二dom元素采用不同标签，以使所述第一dom元素与所述第二dom元素位于不同层级。
130.第二方面，根据本公开的一个或多个实施例，提供了一种流程图绘制设备，包括：
131.获取模块，用于获取待绘制流程图中待处理连线的起始位置和终止位置；所述待绘制流程图中的各节点布局在多个层级区域内；多个层级区域在第一方向上并列分布且相邻层级区域之间为空白区域；每个层级区域内的各节点沿第二方向并列分布；所述第一方向与所述第二方向存在夹角；
132.构建模块，用于若所述待处理连线的起始节点和终止节点位于非相邻层级区域内，则针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内的空位构建虚拟节点；所述空位在所述第一方向上占满所述层级区域；
133.生成模块，用于基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图；所述目标连接线依次穿过各所述虚拟节点。
134.根据本公开的一个或多个实施例，所述构建模块，具体用于确定所述起始节点的下一层级区域内的多个空位分别与所述起始节点之间的距离，并在多个距离中的最小距离所对应的空位构建第一虚拟节点；多个所述空位为在所述第二方向上各节点之间的空白区域。
135.根据本公开的一个或多个实施例，所述构建模块，具体用于沿所述第二方向，从多个空位中选定排列在第一个的空位，构建所述第一虚拟节点。
136.根据本公开的一个或多个实施例，所述构建模块，具体用于将所述第一虚拟节点确定为当前虚拟节点；若所述当前虚拟节点的下一层级区域内不存在所述终止节点，则确定所述当前虚拟节点的区域内的多个空位分别与所述当前虚拟节点之间的距离，并在多个
距离中的最小距离所对应的空位构建下一级虚拟节点，并将所述下一级虚拟节点确定为当前虚拟节点，重复执行若所述当前虚拟节点的下一层级区域内不存在所述终止节点，则确定所述当前虚拟节点的区域内的多个空位分别与所述当前虚拟节点之间的距离，并在多个距离中的最小距离所对应的空位构建下一级虚拟节点，并将所述下一级虚拟节点确定为当前虚拟节点，直至所述当前虚拟节点的下一层级中存在所述终止节点；若所述当前虚拟节点的下一层级中存在所述终止节点，则基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线。
137.根据本公开的一个或多个实施例，所述生成模块，具体用于针对每个虚拟节点，在所述虚拟节点的第一边确定第一锚点，在所述虚拟节点的第二边确定第二锚点；所述第一边和所述第二边为所述虚拟节点沿所述第一方向的相对边；将所述起始位置与下一层级区域的虚拟节点的第一锚点之间的第一连接线、各虚拟节点的第一锚点和第二锚点之间的第二连接线、相邻虚拟节点中上一层级区域的虚拟节点的第二锚点与下一层级区域的虚拟节点的第一锚点之间的第三连接线，以及所述终止位置与上一层级区域的虚拟节点的第二锚点之间的第四连接线，确定为所述目标连接线。
138.根据本公开的一个或多个实施例，所述生成模块，还用于若所述待处理连线的起始节点和终止节点位于相邻层级区域内，则在所述相邻层级区域之间的空白区域，生成从所述起始位置到所述终止位置的目标连接线。
139.根据本公开的一个或多个实施例，所述获取模块，具体用于获取待绘制流程图的配置信息和各节点之间的连接关系；所述配置信息包括各节点的间距信息、画布的尺寸信息和边距信息；根据所述连接关系，生成有向无环图；根据所述有向无环图和所述配置信息，将各节点布局在多个层级区域内；获得各节点在所述画布中的绝对位置；根据各节点的绝对位置，确定各节点之间的待处理连线的起始位置和终止位置。
140.根据本公开的一个或多个实施例，所述设备还包括：交互模块，用于响应作用于所述目标流程图中的节点更新操作，重新确定更新后的节点在所述画布中的绝对位置；基于所述更新后的节点的绝对位置，重新确定对应待处理连线的起始位置和终止位置。
141.根据本公开的一个或多个实施例，所述交互模块，还用于响应作用于所述目标流程图中的节点或目标连接线的触控操作，显示对应的提示框；所述提示框对应的第一文档对象模型dom元素与所述目标流程图对应的第二dom元素采用不同标签，以使所述第一dom元素与所述第二dom元素位于不同层级。
142.第三方面，根据本公开的一个或多个实施例，提供了一种电子设备，包括：至少一个处理器和存储器；
143.所述存储器存储计算机执行指令；
144.所述至少一个处理器执行所述存储器存储的计算机执行指令，使得所述至少一个处理器执行如上第一方面以及第一方面各种可能的设计所述的流程图绘制方法。
145.第四方面，根据本公开的一个或多个实施例，提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如上第一方面以及第一方面各种可能的设计所述的流程图绘制方法。
146.第五方面，根据本公开的一个或多个实施例，提供了一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上第一方面以及第一方面各种可能的设
计所述的流程图绘制方法
147.以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
148.此外，虽然采用特定次序描绘了各操作，但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下，多任务和并行处理可能是有利的。同样地，虽然在上面论述中包含了若干具体实现细节，但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地，在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。
149.尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题，但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反，上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。

技术特征：

1.一种流程图绘制方法，其特征在于，包括：获取待绘制流程图中待处理连线的起始位置和终止位置；所述待绘制流程图中的各节点布局在多个层级区域内；多个层级区域在第一方向上并列分布且相邻层级区域之间为空白区域；每个层级区域内的各节点沿第二方向并列分布；所述第一方向与所述第二方向存在夹角；若所述待处理连线的起始节点和终止节点位于非相邻层级区域内，则针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内的空位构建虚拟节点；所述空位在所述第一方向上占满所述层级区域；基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图；所述目标连接线依次穿过各所述虚拟节点。2.根据权利要求1所述的方法，其特征在于，所述针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内构建虚拟节点，包括：确定所述起始节点的下一层级区域内的多个空位分别与所述起始节点之间的距离，并在多个距离中的最小距离所对应的空位构建第一虚拟节点；多个所述空位为在所述第二方向上各节点之间的空白区域。3.根据权利要求2所述的方法，其特征在于，所述在多个距离中的最小距离所对应的空位构建第一虚拟节点，包括：若多个距离中最小距离所对应的空位为多个，则基于预设规则，从多个空位中选定一个空位构建第一虚拟节点。4.根据权利要求3所述的方法，其特征在于，所述基于预设规则，从多个空位中选定一个空位构建第一虚拟节点，包括：沿所述第二方向，从多个空位中选定排列在第一个的空位，构建所述第一虚拟节点。5.根据权利要求2所述的方法，其特征在于，所述针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内构建虚拟节点，还包括：将所述第一虚拟节点确定为当前虚拟节点；若所述当前虚拟节点的下一层级区域内不存在所述终止节点，则确定所述当前虚拟节点的区域内的多个空位分别与所述当前虚拟节点之间的距离，并在多个距离中的最小距离所对应的空位构建下一级虚拟节点，并将所述下一级虚拟节点确定为当前虚拟节点，重复执行若所述当前虚拟节点的下一层级区域内不存在所述终止节点，则确定所述当前虚拟节点的区域内的多个空位分别与所述当前虚拟节点之间的距离，并在多个距离中的最小距离所对应的空位构建下一级虚拟节点，并将所述下一级虚拟节点确定为当前虚拟节点，直至所述当前虚拟节点的下一层级中存在所述终止节点；若所述当前虚拟节点的下一层级中存在所述终止节点，则基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线。6.根据权利要求1-5任一项所述的方法，其特征在于，所述基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，包括：针对每个虚拟节点，在所述虚拟节点的第一边确定第一锚点，在所述虚拟节点的第二边确定第二锚点；所述第一边和所述第二边为所述虚拟节点沿所述第一方向的相对边；将所述起始位置与下一层级区域的虚拟节点的第一锚点之间的第一连接线、各虚拟节
点的第一锚点和第二锚点之间的第二连接线、相邻虚拟节点中上一层级区域的虚拟节点的第二锚点与下一层级区域的虚拟节点的第一锚点之间的第三连接线，以及所述终止位置与上一层级区域的虚拟节点的第二锚点之间的第四连接线，确定为所述目标连接线。7.根据权利要求1-5任一项所述的方法，其特征在于，所述方法还包括：若所述待处理连线的起始节点和终止节点位于相邻层级区域内，则在所述相邻层级区域之间的空白区域，生成从所述起始位置到所述终止位置的目标连接线。8.根据权利要求1-5任一项所述的方法，其特征在于，所述获取待绘制流程图中待处理连线的起始位置和终止位置，包括：获取待绘制流程图的配置信息和各节点之间的连接关系；所述配置信息包括各节点的间距信息、画布的尺寸信息和边距信息；根据所述连接关系，生成有向无环图；根据所述有向无环图和所述配置信息，将各节点布局在多个层级区域内；获得各节点在所述画布中的绝对位置；根据各节点的绝对位置，确定各节点之间的待处理连线的起始位置和终止位置。9.根据权利要求8所述的方法，其特征在于，所述方法还包括：响应作用于所述目标流程图中的节点更新操作，重新确定更新后的节点在所述画布中的绝对位置；基于所述更新后的节点的绝对位置，重新确定对应待处理连线的起始位置和终止位置。10.根据权利要求1-5任一项所述的方法，其特征在于，所述方法还包括：响应作用于所述目标流程图中的节点或目标连接线的触控操作，显示对应的提示框；所述提示框对应的第一文档对象模型dom元素与所述目标流程图对应的第二dom元素采用不同标签，以使所述第一dom元素与所述第二dom元素位于不同层级。11.一种流程图绘制设备，其特征在于，包括：获取模块，用于获取待绘制流程图中待处理连线的起始位置和终止位置；所述待绘制流程图中的各节点布局在多个层级区域内；多个层级区域在第一方向上并列分布且相邻层级区域之间为空白区域；每个层级区域内的各节点沿第二方向并列分布；所述第一方向与所述第二方向存在夹角；构建模块，用于若所述待处理连线的起始节点和终止节点位于非相邻层级区域内，则针对所述起始节点和所述终止节点之间的每个层级区域，在所述层级区域内的空位构建虚拟节点；所述空位在所述第一方向上占满所述层级区域；生成模块，用于基于各所述虚拟节点，生成从所述起始位置到所述终止位置的目标连接线，并根据所述目标连接线，绘制获得目标流程图；所述目标连接线依次穿过各所述虚拟节点。12.一种电子设备，其特征在于，包括：处理器和存储器；所述存储器存储计算机执行指令；所述处理器执行所述存储器存储的计算机执行指令，使得所述处理器执行如权利要求1至10任一项所述的流程图绘制方法。13.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机
执行指令，当处理器执行所述计算机执行指令时，实现如权利要求1至10任一项所述的流程图绘制方法。14.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至10任一项所述的流程图绘制方法。

技术总结

本公开实施例提供一种流程图绘制方法、设备、存储介质及程序产品，该方法包括：获取待绘制流程图中待处理连线的起始位置和终止位置，当待处理连线的起始节点和终止节点位于非相邻层级区域内时，则针对起始节点和终止节点之间的每个层级区域，在层级区域内的空位构建虚拟节点，基于各虚拟节点，生成从起始位置到终止位置的目标连接线，并根据目标连接线，绘制获得目标流程图，其中，目标连接线依次穿过各虚拟节点。本实施例提供的方法，通过在起始节点和终止节点之间的各层级区域内构建虚拟节点，令连接线在穿过各层级区域时，从虚拟节点处穿过，避免了连接线与待绘制流程图的各节点发生重叠，使得绘制获得的目标流程图清晰美观。观。观。