前言

因此，本篇文章将会带大家熟悉一下比较热门的工作流开源工具——bpmn.js，从它的基本概念入手，结合Next.js，和大家一起实现一个简易的具备审批流的站点。

项目概览

项目描述

一个基于 bpmn.js，React, antd, Next.js 开发的流程设计器。支持标准的 BPMN 元素和构造，提供了一系列交互式的编辑功能，使得流程设计变得流畅且直观。通过这种集成，项目为用户提供了强大的定制能力和扩展性，确保了面对复杂业务流程的可视化和管理问题时能够轻松应对。

技术栈介绍

BpmnJS（8.3K⭐️）

bpmn.js:创建、嵌入和扩展浏览器中的 BPMN 图表。可以单独使用它，也可以将其集成到应用程序中。

BPMN

在前面几个章节的内容里，BPMN 出现了很多次，包括这个技术栈的名称也是bpmn.js，那么，到底什么是 BPMN ？

BPMN（Business Process Model and Notation，业务流程模型和符号）是一种标准化的图形表示法，用于描述和建模业务流程。BPMN 元素是指在 BPMN 图表中使用的各种图形符号，它们代表不同的活动、决策、事件等业务流程的组成部分。

想要了解相关的详细信息，可以访问下方链接⬇️。

官方网站，提供 BPMN 标准的详细信息和官方规范。

在本篇文章中，我会简单介绍一下组成一个流程图的基本元素，它们是如何各司其职的，并通过一个简单的小demo来帮助大家强化理解。我们只有掌握了理论，才能够正确地进行实践。

基础元素

首先，介绍一下BPMN最基础的4个元素

1. 流对象（Flow Objects） :

   • 事件（Events） : 表示流程中的某个特定时刻或条件，如开始、结束、中断等。在基础阶段，咱们只要关注「开始事件」和「结束事件」。

     

     

   • 活动（Activities） : 表示流程中的工作或任务，可以是手工的、自动的或待定的。在基础阶段，咱们只要关注「用户任务」。

     

   • 网关 （Gateways） : 用于控制流程的流向，如分支、合并、决策等。带有标记的网关通常是指特定类型的网关，它们在 BPMN 图表中有特殊的标记或图标，以区分其行为。这些网关包括：

     • 事件 网关 （Event-based Gateway ） :

       1. 用于基于事件的条件分支，它有一个或多个出口路径，每个路径都与一个事件关联。
       2. 它会等待特定的事件触发，然后决定哪个出口路径被执行。

     • 复杂 网关 （Complex Gateway ） :

       1. 用于表示复杂的分支逻辑，可以根据特定的条件或规则来决定分支。
       2. 它可以模拟并行网关和排他网关的行为，并且可以通过配置来定义更复杂的分支逻辑。

     在基础阶段，我们只要关注「事件网关」。

     

2. 连接对象（Connecting Objects） :

   • 顺序流（Sequence Flows） : 用于连接流对象，表示流程的顺序和方向。其实Flow有很多种类型，但是我们仅需关注「顺序流」，「顺序流」又有3种类型：普通顺序流、条件顺序流、默认顺序流，这三种类型为我们的流程设计器铺垫了走不同分支的基础。

   

流程规则

我们期望给某一个业务制定一个审批流，那么这个审批流生效的前提必须是符合流程的配置规则。因此有必要和大家普及一下流程规则，如下：

1. 每个流程必须有且只有一个开始事件（Start Event） :

   1. 每个 BPMN 流程都必须有一个开始事件，这标志着流程的开始。

2. 每个流程必须有且只有一个结束事件（End Event） :

   1. 每个 BPMN 流程都必须有一个结束事件，这标志着流程的结束。

3. 流程中的每个事件必须有一个事件源（Event Source ） :

   1. 每个事件必须连接到一个流对象（如活动或网关），这是事件发生的地方。

4. 流程中的每个活动必须有一个活动源（Activity Source ） :

   1. 每个活动必须连接到一个事件或另一个活动，这是活动开始的地方。

5. 流程中的每个活动必须有一个活动目标（Activity Target） :

   1. 每个活动必须连接到一个事件或另一个活动，这是活动结束的地方。

6. 流程中的每个 网关 必须有至少一个入口路径（Entry Gateway ）和至少一个出口路径（Exit Gateway） :

   1. 每个网关都必须至少有一个入口路径和一个出口路径，入口路径表示网关可以接收的路径，出口路径表示网关可以输出的路径。

7. 流程中的每个 网关 必须有一个唯一的标识符（ Gateway ID） :

   1. 每个网关都必须有一个唯一的标识符，以便在流程中识别它。

8. 流程中的每个 网关 必须有一个唯一的名称（ Gateway Name） :

   1. 每个网关都必须有一个唯一的名称，以便在流程中识别它。

9. 流程中的每个事件必须有一个唯一的标识符（Event ID） :

   1. 每个事件都必须有一个唯一的标识符，以便在流程中识别它。

10. 流程中的每个事件必须有一个唯一的名称（Event Name） :

    1. 每个事件都必须有一个唯一的名称，以便在流程中识别它。

更多规则、更细节的规则可以阅读下方文档👇：

流程规则（详细版）

动手实践

现在有某个业务期望我们帮忙配置一个简单的审批流程，此审批流程仅指定张三作为审批人，我们该如何配置？

那根据刚刚了解的基础元素和规则。我们可以一步一步配置：

1. 首先，肯定需要1个「开始事件」。
2. 根据规则，从「开始事件」拉一条「顺序流」出来，指向一个「用户任务」。
3. 根据规则，再从「用户任务」拉一条「顺序流」出来，指向「结束事件」。

至此，此审批流程完成配置。

结语

在本篇文章中，我们通过对bpmn.js的基本概念以及BPMN基础元素的解析，了解了如何使用bpmn.js来构建和配置一个简单的工作流程。

在下一篇文章中，我将会给大家介绍该流程设计器的更详细的信息：工具栏、元素悬浮窗、属性栏等等，我们下一篇文章见~