CN111796743A - 一种业务流程建模方法和系统 - Google Patents

Abstract

本发明实施例提供一种业务流程建模方法和系统，该方法包括：响应于用户针对工具栏中流程节点的拖拽操作，添加第一流程节点和第二流程节点到建模区域；响应于用户针对所述第一流程节点的点击操作，生成跟随指针位置变化的预设流程路径；响应于指针对所述第二流程节点的点击操作，基于所述预设流程路径生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径。通过上述技术方案，流程节点支持可拖拽操作，并且位置还可以根据需要随意调整，能够满足用各种业务流程建模需求；此外，在用户指定第一流程节点和需要建立连接的第二流程节点之后，自动规划出该业务流程的流程路径，减轻工作负担，提高业务流程建模工作效率。

Description

一种业务流程建模方法和系统

技术领域

本发明涉及互联网技术领域，尤其涉及一种业务流程建模方法和系统。

背景技术

随着互联网技术的发展，越来越多的工作通过线上完成。由于行业千差万别，同一行业又包含各种不同业务流程，需要针对每个业务流程分别建立对应的流程模型。

现有技术中，通常基于JS与SVG技术实现业务流程建模。然而，在建模过程中，有的业务流程比较复杂，需要建立很多个流程节点。在建模模板中的流程节点相对固定，无法根据自己的需求随意改变流程节点的位置。且流程路径的样式单一，无法满足多流程节点、多流程路径的建模需求。

因此，需要一种简便的业务流程建模方案，从而能够满足多样化的业务流程建模需求。

发明内容

本发明实施例提供一种业务流程建模方法和系统，用以实现满足多样化的业务流程建模需求。

第一方面，本发明实施例提供一种业务流程建模方法，该方法包括：

响应于用户针对工具栏中流程节点的拖拽操作，添加第一流程节点和第二流程节点到建模区域；

响应于用户针对所述第一流程节点的点击操作，生成跟随指针位置变化的预设流程路径；

响应于指针对所述第二流程节点的点击操作，基于所述预设流程路径生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径。

可选地，所述响应于用户针对所述第一流程节点的点击操作，生成跟随指针位置变化的预设流程路径，包括：

响应于用户针对第一流程节点中第一锚点的点击操作，确定起始锚点；

响应于用户对所述指针的拖拽操作，生成跟随指针位置变化的预设流程路径。

可选地，所述响应于指针对第二流程节点的点击操作，基于所述预设流程路径生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径，包括：

响应于针对上述第二流程节点中第二锚点的点击操作，确定目标锚点；

调整所述起始锚点和所述目标锚点在所述预设流程路径中的相对位置；

生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径。

可选地，所述第一流程节点和/或所述第二流程节点被拖拽移动位置，则根据拖拽后的所述起始锚点的位置与相连所述目标锚点的位置重新规划最优流程路径。

可选地，添加第一流程节点和第二流程节点到建模区域之前，还包括：基于HTML绘制画布作为建模区域和流程节点。

可选地，还包括：基于Jquery UI设置所述流程节点为支持拖拽操作的节点；

基于JavaScript原生事件设置所述流程节点的内容和展示效果。

可选地，所述流程路径元素为SVG标签；

所述SVG标签包含三个path元素，第一个path为无色底线，用于提高所述指针的选取范围；第二个path为显示路线，用于显示路线定制样式、颜色、粗细；第三个path元素为路径方向箭头，用于显示定制箭头样式、箭头颜色、箭头粗细、以及相对于所述第二个path的位置。

可选地，所述流程路径的SVG标签增加div元素，用于显示所述流程路径的名称，并且所述名称根据所述流程路径的位置变化而变化。

可选地，还包括：将所述建模区域中完成建模的所述流程节点、所述流程路径包装成JSON格式列表数据，通过异步请求发送给服务端保存。

第二方面，本发明实施例提供一种业务流程建模系统，所述系统包括：

节点组件，用于响应于用户针对工具栏中流程节点的拖拽操作，添加第一流程节点和第二流程节点到建模区域；

路径计算组件，用于响应于用户针对所述第一流程节点的点击操作，生成跟随指针位置变化的预设流程路径；进而，响应于指针对所述第二流程节点的点击操作，基于所述预设流程路径生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径；

配置中心，用于对流程节点和流程路径进行属性配置。

本发明实施例中，通过在工具栏中设置支持拖拽操作的流程节点，满足用户快速建立流程节点的需求，并且用户还可以将流程节点在建模区域中随意拖动。此外，在建立流程路径的时候，用户通过指针点击第一流程节点之后，会给随指针生成能够跟随指针位置变化的预设流程路径，当用户点击需要与第一流程节点建立连接关系的第二流程节点之后，自动生成从第一流程节点到第二流程节点的流程路径。通过上述技术方案，流程节点支持可拖拽操作，并且各个流程节点的位置还可以在建模区域中根据需要随意调整，能够满足用户各种业务流程的建模需求；此外，流程路径也无需用户规划，在用户指定第一流程节点和需要建立连接的第二流程节点之后，自动规划出该业务流程的流程路径，减轻工作负担，提高业务流程建模工作效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种业务流程建模方法的流程示意图；

图2为本申请实施例提供的一种预设流程路径的结构示意图；

图3a、3b为本申请实施例提供的锚点位置调整的过程示意图；

图4为本申请实施例提供的业务流程建模过程的示意图；

图5为本申请实施例提供的业务流程建模效果的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种，但是不排除包含至少一种的情况。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的商品或者系统中还存在另外的相同要素。

另外，下述各方法实施例中的步骤时序仅为一种举例，而非严格限定。

图1为本申请实施例提供的一种业务流程建模方法的流程示意图，如图1 所示，该方法包括以下步骤：

101：响应于用户针对工具栏中流程节点的拖拽操作，添加第一流程节点和第二流程节点到建模区域。

102：响应于用户针对所述第一流程节点的点击操作，生成跟随指针位置变化的预设流程路径。

103：响应于指针对第二流程节点的点击操作，基于所述预设流程路径生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径。

在实际应用中，在建模操作界面上的工具栏中设置有各种形状、各种颜色的流程节点，当用户从中找到自己需要的流程节点之后，可以通过拖拽的方式直接获取所需的第一流程节点，并添加到建模区域当中。

进而，可以继续在该建模区域中添加其他流程节点，比如第二流程节点。容易理解的是，为了区分不同流程几点的等级或者功能，在拖拽流程节点的时候，可以根据需要选择具有辨识度的不同形状、不同颜色的多种类型流程节点。

在进行流程路径的建立的时候，用户可以通过(比如鼠标)指针点击第一流程节点中第一锚点，将该第一锚点作为起始锚点；然后会生成一个表示撸串路径的虚线或者具有一定透明度的实线，并且会跟随用户拖拽指针的位置变化而同步变化。在指针拖动的过程中，会不断更新计算起始锚点到当前指针位置所经过的路径位置。

若用户点击第二流程节点中的第二锚点，则确定该第二锚点为目标锚点。根据计算结果，连接起始锚点和目标锚点得到流程路径。如图2为本申请实施例提供的一种预设流程路径的结构示意图。从图2中可以看到，在第一流程节点中有至少4个锚点，选择其中任一个锚点作为第一锚点，在第二流程节点中有至少 5个锚点，选择其中任意锚点作为第二锚点。

在确定起始锚点和目标锚点之后，将调整起始锚点和目标锚点在预设流程路径中的相对位置。这里所说的调整位置，是指为了优化流程路径而更换锚点在流程节点中的位置(当然，这个锚点是预先设置在各个流程节点中的，当然，也可以把增加锚点的权限放开，允许用户自己添加锚点)，也就是调整起始锚点与目标锚点之间的相对位置。

为了便于理解，下面具体举例说明，如图3a、3b为本申请实施例提供的锚点位置调整的过程示意图。从图3a中可以看到，假设指定第一流程节点中的上边框上的锚点作为起始锚点，然后，在第一流程节点下方有第二流程节点和第三流程节点，当用户通过指针指定第二流程节点中的下边框上的锚点作为目标锚点后，会对预设流程路径进行优化，对起始锚点和目标锚点同时进行调整，然后连接得到流程路径。需要注意的是，锚点的调整需要局限与当前流程节点内各个锚点之间进行调整。

从图3b中可以看到，假设指定第一流程节点中的上边框上的锚点作为起始锚点，然后，在第一流程节点下方有第二流程节点和第三流程节点，当用户通过指针指定第三流程节点中的下边框上的锚点作为目标锚点后，会对预设流程路径进行优化，对起始锚点和目标锚点同时进行调整，然后连接得到流程路径。

需要说明的是，流程节点中所具有的锚点个数可以根据需要进行设定。这里所说的锚点个数以及锚点在流程节点中的位置也是作为举例说明，并不构成对本申请技术方案的限制，实际应用中用户完全可以根据实际需要设定锚点的位置和数量。

在实际应用中，即便用户完成了第一流程节点与第二流程节点之间流程路径的连接工作，用户也可以在后续建模工作中对各个流程节点的位置进行调整，比如，可以通过拖拽操作调整第一流程节点和/或第二流程节点在建模区域中的位置，并且，在用户调整流程节点位置的过程中，无需顾虑流程路径的变化，会根据具有连接关系的两个流程节点之间相对位置的变化、各个流程节点中所具有的锚点的数量和位置进行流程路径的最优化调整。

在本申请技术方案中，可以采用HTML绘制画布作为建模区域，该建模区域也是支持拖拽操作，比如，当流程节点拖拽位置达到建模区域的临界点时，建模区域会相应扩大，高度不足增加高度、宽度不足增加宽度，从而满足建模需求。并且，在工具栏中预先这是各种形状、颜色的流程节点。如前文所述可知，各个流程节点支持拖拽操作，这里就需要利用Jquery UI设置各个流程节点为可拖拽节点。

在进行流程图布局的时候，需要布局流程节点，包括流程节点的位置(XY 坐标)、大小、形状等信息。流程出口，包括业务出口ID、两端流程节点ID、两端流程节点出现方向、经过路径位置。流程布局组件，包含组件类型、位置和提示信息。

在建模过程中，还需要设置流程图业务数据:流程节点内容，包含基础设置、抄送、字段权限、出口流转排序；基础设置又包含审批人、会签/或签、审批/ 确认、打印、复制、委托、自动同意等。流程出口：包含两端节点ID、执行顺序、执行条件。

在进行业务流程建模的过程中，还需要添加每个流程节点的内容，为了提升内容添加可操作性，简化操作步骤，可以基于JavaScript原生事件设置所述流程节点的内容和展示效果，内容可由用户选择或者填写，展示效果用户可在预设的各种效果中选择所需的效果。

在实际应用中，所述流程路径元素为SVG标签。所述SVG标签包含三个path 元素，第一个path为无色底线，用于提高所述指针的选取范围；第二个path为显示路线，用于显示路线定制样式、颜色、粗细；第三个path元素为路径方向箭头，用于显示定制箭头样式、箭头颜色、箭头粗细、以及相对于所述第二个 path的位置。并且，所述流程路径的SVG标签增加div元素，用于显示所述流程路径的名称，并且所述名称根据所述流程路径的位置变化而变化。还可以在这里指定该div元素在第二path中的位置。

将所述建模区域中完成建模的所述流程节点、所述流程路径包装成JSON格式列表数据，通过异步请求发送给服务端保存。在服务端存储有流程图逻辑数据，包含流程图大小、流程节点位置、流程路径连接关系、路径途径点。流程图流转数据，流程建模重要的数据，控制流程走势以及流程节点所要做的事情等等。使用HTMl语言div元素绘制的流程节点，图形颜色、大小、形状容易扩充、快捷。使用Jquery UI增加HTML元素的可拖拽性，利于扩展其他功能(如画布自适应、拖入某一个区域内)。多个流程节点和多个流程路径时，流程图的整体信息更直观、更自由。

需要说明的是，在这里进行业务流程建模的过程中，可以有很多各流程节点，比如可以有多个第一流程节点或第二个流程节点，这里仅是通过一组流程节点建立连接关系的过程为例进行举例说明。这里仅作为举例说明，并不构成对本申请技术方案的限制。

为了便于理解，下面将举例说明业务流程建模过程。如图4为本申请实施例提供的业务流程建模过程的示意图。从图4中可以看到，首先用户可以新建一个建模模板，加载流程图，在默认情况下，该流程图中包含有三个流程节点，并且预先完成了最简单的流程路径。然后，用户可以根据需要，从工具栏中通过拖拽的方式拖拽新的流程节点到建模区域中，编辑各个流程节点的内容。连接各个流程节点，实现流程路径的创建。需要说明的是，需要先建立各个流程节点，才能进行流程路径的创建，但是，并不一定需要建立完成所有的流程节点才去创建流程路径，可以一边添加新的流程节点，一边创建流程路径，避免事后遗忘。在创建流程路径的时候，无需用户参与，可以自动计算得到最优路径。当用户指定目标锚点之后，生成流程路径，并保存流程图相关数据到服务端。

图5为本申请实施例提供的业务流程建模效果的示意图。从图中可以看到包括五个节点，并且各个节点之间都通过流程路径实现连接，各个流程路径都是基于各流程节点以及锚点之间位置关系自动规划得到的最优路径。

基于同样的思路，本申请实施例还提供一种业务流程建模系统。如图5为本申请实施例提供的一种业务流程建模系统的结构示意图。所述系统包括：

节点组件51，用于响应于用户针对工具栏中流程节点的拖拽操作，添加第一流程节点和第二流程节点到建模区域；

路径计算组件52，用于响应于用户针对所述第一流程节点的点击操作，生成跟随指针位置变化的预设流程路径；进而，响应于指针对所述第二流程节点的点击操作，基于所述预设流程路径生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径；

配置中心53，用于对流程节点和流程路径进行属性配置。

此外，该业务流程建模系统中还包括如下组件：画布组件、工具栏组件、出口组件以及数据存储组件。下面对各组件的功能进行介绍。

配置中心53包括:基础配置，用于设定流程路径偏移量、锚点形状、锚点和线路大小、线路类型、画布范围等相关属性。

流程节点配置用于设置锚点前缀、默认大小、默认颜色，多种情况下锚点颜色。

出口配置，用于设定路径、箭头前缀，默认、选中、鼠标经过、停留等多种操作情况下的样式，路径粗细、选中区域大小、箭头大小、所在线路位置。

布局组件配置用于设定不同种类组件大小、颜色等属性。

画布组件54，用于通过监控拖拽节点位置变化，拖拽布局组件位置变化，动态控制画布大小。

工具栏组件55，用于设定支持撤销、恢复、刷新操作，选择多个流程节点进行上、下、左、右、居中对齐；拖拽模板中流程节点或创建新流程节点，包含审批节点、分流节点、合流节点、并行节点(分流中间节点)。拖拽布局组件创建X、Y轴分割线、描述组件、矩形组件。

节点组件51，用于设定节点信息、颜色、形状渲染；节点拖拽边界线控制节点事件绑定。

出口组件56，用于渲染两个流程节点的锚点，设置出口名称，路径选中操作(删除、修改)。

路径计算组件52，用于获取起始、目标节点锚点坐标，计算路线经过位置，绘制最优路线，同步出口描述框，监控锚点位置变化更新出口线路

数据存储组件，用于主体数据，包含节点、出口、布局组件信息。流程节点，包含节点主体ID，left(与左边距离)、top(与顶部距离)、width(宽度)、heigth(高度)、chartType(形状)。流程路径，包含主体ID,passpoint(经过位置)，type(两个节点锚点方向)。布局组件，包含主体ID，controlsType(组件类型)、left(与左边距离)、top(与顶部距离)、width(宽度)、heigth (高度)。

基于上述组件，能够执行图1、图2、图3对应的业务流程建模方法。具体执行过程请参考上述实施例，这里就不再重复赘述。

本申请实施例还提供一种存储有计算机程序的计算机可读存储介质。当计算机可读存储介质存储计算机程序，且计算机程序被一个或多个处理器执行时，致使一个或多个处理器执行相应图1所示方法实施例中的各步骤。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助加必需的通用硬件平台的方式来实现，当然也可以通过硬件和软件结合的方式来实现。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以计算机产品的形式体现出来，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和 /或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/ 或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程更新设备的处理器以产生一个机器，使得通过计算机或其他可编程设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM) 和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘 (DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种业务流程建模方法，其特征在于，所述方法包括：

响应于用户针对工具栏中流程节点的拖拽操作，添加第一流程节点和第二流程节点到建模区域；

响应于用户针对所述第一流程节点的点击操作，生成跟随指针位置变化的预设流程路径；

响应于指针对所述第二流程节点的点击操作，基于所述预设流程路径生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径。

2.根据权利要求1所述的方法，其特征在于，所述响应于用户针对所述第一流程节点的点击操作，生成跟随指针位置变化的预设流程路径，包括：

响应于用户针对第一流程节点中第一锚点的点击操作，确定起始锚点；

响应于用户对所述指针的拖拽操作，生成跟随指针位置变化的预设流程路径。

3.根据权利要求2所述的方法，其特征在于，所述响应于指针对第二流程节点的点击操作，基于所述预设流程路径生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径，包括：

响应于针对上述第二流程节点中第二锚点的点击操作，确定目标锚点；

调整所述起始锚点和所述目标锚点在所述预设流程路径中的相对位置；

生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径。

4.根据权利要求3所述的方法，其特征在于，所述第一流程节点和/或所述第二流程节点被拖拽移动位置，则根据拖拽后的所述起始锚点的位置与相连所述目标锚点的位置重新规划最优流程路径。

5.根据权利要求1所述的方法，其特征在于，添加第一流程节点和第二流程节点到建模区域之前，还包括：基于HTML绘制画布作为建模区域和流程节点。

6.根据权利要求5所述的方法，其特征在于，还包括：基于Jquery UI设置所述流程节点为支持拖拽操作的节点；

基于JavaScript原生事件设置所述流程节点的内容和展示效果。

7.根据权利要求1所述的方法，其特征在于，所述流程路径元素为SVG标签；

所述SVG标签包含三个path元素，第一个path为无色底线，用于提高所述指针的选取范围；第二个path为显示路线，用于显示路线定制样式、颜色、粗细；第三个path元素为路径方向箭头，用于显示定制箭头样式、箭头颜色、箭头粗细、以及相对于所述第二个path的位置。

8.根据权利要求7所述的方法，其特征在于，所述流程路径的SVG标签增加div元素，用于显示所述流程路径的名称，并且所述名称根据所述流程路径的位置变化而变化。

9.根据权利要求1所述的方法，其特征在于，还包括：将所述建模区域中完成建模的所述流程节点、所述流程路径包装成JSON格式列表数据，通过异步请求发送给服务端保存。

10.一种业务流程建模系统，其特征在于，所述系统包括：

节点组件，用于响应于用户针对工具栏中流程节点的拖拽操作，添加第一流程节点和第二流程节点到建模区域；

路径计算组件，用于响应于用户针对所述第一流程节点的点击操作，生成跟随指针位置变化的预设流程路径；进而，响应于指针对所述第二流程节点的点击操作，基于所述预设流程路径生成用于表征从所述第一流程节点到所述第二流程节点的业务流程的流程路径；

配置中心，用于对所述流程节点和所述流程路径进行属性配置。

Images