最近做的项目是基于Flowable的工作流管理系统，前端使用到bpmnjs，网上的资料非常有限，浅浅记录一下对bpnm的学习过程以供大家参考。

先附上BPMN官方网站：www.bpmn.org/

一、什么是BPMN

BPMN（Business Process Modeling Notation），即业务流程建模与标记，是用于构建业务流程图的一种建模语言标准。

我们在企业和组织中总会遇到各种各样的流程，例如请假流程、离职流程、出差流程等等，这些流程都可以通过bpmn所构建的业务流程图直观地表示出来，相比于传统的流程图BPMN构建的业务流程图包含了更多了信息。

目前主要有两个版本：

• BPMN 1.0 规范由标准组织BPMI（后并入到OMG）于2004年5月发布；
• BPMN 2.0 标准由OMG于2011年推出。

二、BPMN有些什么

BPMN通过四类基础元素来构建业务流程图：

1、流对象

流对象（Flow Objects）是定义流程的主要图形元素，也是最核心的元素，包括时间、活动、网关

（1）事件

指的是在业务流程的运行过程中发生的事情，包含：

• 开始：表示一个流程的开始
• 中间：发生的开始和结束事件之间，影响处理的流程
• 结束：表示该过程结束

分别用以下标识符表示：

（2）活动

包括任务和子流程两类。子流程在图形的下方中间外加一个小加号（+）来区分。

（3）网关

网关用于控制序列流如何在一个流程中收敛和发散的交互。如果一个流程不需要控制，那么网关就是非必需的。

当我们使用网关时，输入可能被合并在一起，输出也有可能被分离为若干个部分。

包含：

• 排他网关：只有一条路径会被选择
• 并行网关：所有路径会被同时选择
• 包容网关：可以同时执行多条线路，也可以在网关上设置条件
• 事件网关：专门为中间捕获事件设置的，允许设置多个输出流指向多个不同的中间捕获事件。当流程执行到事件网关后，流程处于等待状态，需要等待抛出事件才能将等待状态转换为活动状态。

2、数据

（1）数据对象（Data Objects）

（2）数据输入（Data Objects）

（3）数据输出（Data Objects）

（4）数据存储（Data Objects）

下图从左到右依次为：数据对象、数据输入、数据输出、数据存储

3、连接对象

（1）数据流

用一个带实心箭头的实心线表示，用于指定活动执行的顺序

（2）信息流

用一条带箭头的虚线表示，用于描述两个独立的业务参与者（业务实体/业务角色）之间发送和接受的消息流动

（3）关联

用一根带有线箭头的点线表示，用于将相关的数据、文本和其他人工信息与流对象联系起来。用于展示活动的输入和输出

4、泳道

百度百科中对于泳道的定义：泳道将活动图的逻辑描述与顺序图、合作图的责任描述结合起来。

如果说之前三种的三类基础元素构建出的业务流程图能告诉你这个事件发生了什么，那么泳道的作用就是告诉你谁去做这个事情，以及这个事情与其他泳道上执行工作流的关系。

当这个过程涉及许多不同人、不同部门或不同功能区域时，很难跟踪每个步骤的负责人。解决此问题的有效方法是用泳道图把流程图分栏，这样能清晰地了解任务转交的流程。

或许还有些抽象？相信放个图大家就理解了

(图片引自：zhuanlan.zhihu.com/p/139206226)

三、总结

关于BPMN的应用，我们项目用于工作流部分前端的bpmnjs，可以实现在项目中集成动态流程图的自定义设计，配合formjs基本可以实现工作流部分前端的所有工作。bpmnjs国内可以参考的资料很少，感兴趣的可以看看大佬的文章：全网最详bpmn.js教材-基础篇