认识bpmn.js什么是BPMN（ Business Process Model and Notation，业务流程模型

一、什么是bpmn

BPMN（全称 Business Process Model and Notation，业务流程模型和标记法），是一个全球性的 标准业务建模及执行标准，也可以看做是一门 基于流程图的、开放标准的符号语言。该标准由 对象管理组（Object Management Group - OMG） 进行维护，与其他商业组织无关。BPMN 的前身是由 BPMI（Business Process Management Initiative，业务流程管理倡议组织）开发的 "Business Process Modeling Notation"，即“业务流程建模标记法”。之后与 2005 年与 OMG 合并后在 2007 年发布 1.0 版本。BPMN 2.0 即该标准的 2.0 版本，于 2010 年 12 月正式发布。

演示链接：demo.bpmn.io/s/start

官方规范：www.omg.org/spec/BPMN/2…

二、bpmn 的核心元素

1、流程对象（Flow Object）：构成整个业务流程的主要元素对象

事件（Events）作为 启动、改变或者完成一个业务流程的触发器节点，表现为一个圆形。
活动（Activities）主要是任务类节点或者子流程节点，表现为一个圆角矩形，在流程中主要表示 需要执行的工作或者逻辑。
网关（Gateways）作为流程中的一个 决策点，一般用于 根据指定条件决定流程后续走向。

2、连接对象（Connecting Objects）: 连接流程元素等元素节点并指示其流转/绑定关系

顺序流（Sequence Flow）用来指示流程中的业务元素编排与执行顺序，一般显示为带箭头的实线
消息流（Message Flow）消息流用于显示消息发送者和消息接收者的之间的消息流传递，一般为带起点和箭头的虚线
关联（Association）用于将信息或者扩展工件（例如数据对象）与BPMN图形元素关联链接，某些情况下关联指示上可以显示箭头来指示流动方向，一般显示为虚线或者带箭头的点状虚线

3、泳道（Swimlanes）：泳道则仅包含两种元素，用来组成一个完整的泳道信息**

池（Pool）池对象，协作中参与者的图形表示。它还充当一个泳道“和一个用于将一组活动从其他池中分割的图形容器，通常是在B2B环境下。一般“池”都作为一个“黑匣子”，即内部信息不可见，通常显示为带名称栏的大号矩形
道（Lane）泳道对象，属于 Pool 池中的子分区，将垂直或水平地扩展池的整个长度，一般表示为池中非名称栏的每一个矩形元素

4、数据对象（Data Object）: 数据对象则一般是用来给活动或者流程等注入指定的对象数据，一般显示为一个文件符号，通过 `Associations` 与活动连接

5、附加工件（Artifacts/Artefacts）: 工件对象则一般是作为特殊对象附着在某个其他元素上，根据不同情况有不同的显示形态

在一个完整的流程中，至少都包括 Flow Objects 和 Connecting Objects 两种对象类型，至少包含一个开始事件节点与一个结束事件节点、以及从开始节点到结束节点的流向连线。

三、BPMN 2.0 与 XML

当流程被转成 XML 时，所有的流程节点信息最终都会包含在一个 Definition 定义节点 中，比如上图中的流程：

当它转换为 XML 时，则体现为如下格式：

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_16iwqnh" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="18.13.1">
  <bpmn:process id="Process_0th91b7" isExecutable="false">
    <bpmn:startEvent id="StartEvent_03ad9bl" name="开始">
      <bpmn:outgoing>Flow_0c2f9pt</bpmn:outgoing>
    </bpmn:startEvent>
    <bpmn:endEvent id="Event_1uxz5qr" name="结束">
      <bpmn:incoming>Flow_1jyl2de</bpmn:incoming>
    </bpmn:endEvent>
    <bpmn:userTask id="Activity_0jptlji" name="用户任务">
      <bpmn:incoming>Flow_0c2f9pt</bpmn:incoming>
      <bpmn:outgoing>Flow_1jyl2de</bpmn:outgoing>
    </bpmn:userTask>
    <bpmn:sequenceFlow id="Flow_0c2f9pt" sourceRef="StartEvent_03ad9bl" targetRef="Activity_0jptlji" />
    <bpmn:sequenceFlow id="Flow_1jyl2de" sourceRef="Activity_0jptlji" targetRef="Event_1uxz5qr" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0th91b7">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_03ad9bl">
        <dc:Bounds x="156" y="82" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="163" y="125" width="22" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_1uxz5qr_di" bpmnElement="Event_1uxz5qr">
        <dc:Bounds x="352" y="82" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="359" y="125" width="22" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0vs31kq_di" bpmnElement="Activity_0jptlji">
        <dc:Bounds x="220" y="60" width="100" height="80" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_0c2f9pt_di" bpmnElement="Flow_0c2f9pt">
        <di:waypoint x="192" y="100" />
        <di:waypoint x="220" y="100" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1jyl2de_di" bpmnElement="Flow_1jyl2de">
        <di:waypoint x="320" y="100" />
        <di:waypoint x="352" y="100" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>

一个完整的 BPMN 图，转换成 XML 后，它的 Business Process Model 业务流程模型 与 DI 都包含在一个 Definition 节点中。

其中 业务流程模型 数据包含在一个 process 或者 collaboration 节点中，用于 定义业务配置与流向；
与 图显示 相关的部分，则位于 bpmndi 定义的 BPMNDiagram 中，两者通过 id 属性进行关联。

什么是DI？

BPMN DI（BPMN Diagram Interchange，BPMN 图形转换）

BPMN DI 的诞生本身就位为了促进 BPMN 图与 XML 之间的互相转换，并且为了保证转换后的 准确和清晰，BPMN DI 内部根据 OMG Diagram Definition (DD，图元定义) 划分了两种 元模型（meta-model） 类型：

Diagram Commons (DC) ：定义了常见的类型，例如边界和字体

Diagram Interchange (DI) ：提供了用于定义特定于领域的图模型的框架，而 BPMN DI 即是从 DI 类型中派生出来的

四、工作流引擎：BPMN 文件的解析与运行

虽然通过 BPMN2.0 规范可以画出 业务人员和技术人员都理解的业务流程图，也可以转换成更专业的 XML 文件。但是如何 正确解析XML文件并按照定义确保程序的正确执行 呢？此时就需要用到 工作流引擎 了。

工作流引擎（Workflow Engine，也常简称为 “流程引擎”） ，指将工作流作为应用系统的一部分，并为之提供 对个应用系统有决定性作用的，可根据角色、分工、条件等信息的不同决定信息传递路由、内容、等级 等功能的核心解决方案。

目前主流的开源工作流引擎包含 JBPM、Activi、Camunda、Flowable，

其中 Activiti、Flowable、Camunda 都提供了各自的 流程图编辑器，但各自的技术栈不同。而为了支持其他团队的自定义开发，Camunda 团队发布了一个独立的 JavaScript 库 - bpmn.js，用来接入开发者系统代码内支持不同的业务需求。

bpmn.js 提供了两套核心能力：

功能	描述	典型应用
Viewer	将 `.bpmn` XML 渲染成可交互的 SVG 流程图	只读的流程查看、流程监控
Modeler	支持在网页中拖拽节点、连线、编辑属性，并导出为 `.bpmn` XML	在线流程设计器

注意:

bpmn.js 本身不负责流程执行，它只负责 BPMN 2.0 文件的可视化和编辑。要让它和 Flowable（或 Camunda、Activiti 等工作流引擎）结合，你需要在前端（bpmn.js） 和 后端（Flowable Engine） 之间建立 BPMN XML 文件的交互

认识bpmn.js