二、BPMNJS简介

目录

一、BPMNJS

二、Diagram.js

三、bpmnjs与Diagram.js的关系

四、bpmnjs核心源码构成

---

一、BPMNJS

        现在市场上或者开源社区中大部分的流程引擎都是可视化操作，可视化操作可以提升工作效率，业务逻辑清晰，使之一目了然，如果一款工作流引擎没有可视化配置页面，那肯定是不合格的。那么如何可以实现流程配置可视化操作，以及流程协议规范化呢，那就需要用到bpmnjs。

        bpmnjs是一款前端实现遵循BPMN2.0协议的流程图的工具，用于在 Web浏览器中建模、渲染和编辑流程相关属性的工具库，它是基于Web流程建模工具的核心引擎。bpmnjs 最初由 Camunda 开发并开源，是其核心产品 Camunda Platform 中 Web 建模器（Camunda Modeler Web）的基础引擎。虽然与 Camunda 流程引擎紧密相关，但bpmnjs 本身并不依赖 Camunda 引擎。它是一个独立的库，可以用于任何需要 BPMN 可视化和建模的地方，生成的 BPMN 2.0 XML 可以被任何兼容 BPMN 2.0 的引擎解析和执行。

        通过它，我们就可以在前端实现流程的可视化配置。当然，现实中也有一部分工作流是不支持BPMN2.0协议的，或者是通过其他技术兼容BPMN2.0协议的，所以并不是所有实现流程配置可视化都要用bpmnjs，但是，bpmnjs是目前个人认为可以实现且最符合BPMN2.0协议中所规定的的所有元素的工具库，比如任务节点、网关、监听、事件等等，这些元素都已在bpmnjs中实现，比自己编写代码进行元素定义、渲染等要节约大部分时间，并且能有效减少代码错误等。

二、Diagram.js

        在这里为什么要介绍下Diagram.js，因为如果想了解bpmnjs的工作原理，首先需要介绍下Diagram.js。

        Diagram.js也是由Camunda 团队开发的轻量级、高度模块化的 JavaScript 库，专注于提供构建交互式图表编辑器所需的核心基础设施，比如实现 UML 编辑器、ER 图工具、自定义拓扑图工具等。以及提供通用的图表交互能力，比如画布渲染、拖拽、连线、缩放等。

        所以，Diagram.js像是一个画板，提供基础能力，让使用者可以在浏览器中实现图形渲染、元素拖拽与移动、连接线创建与重连、画布平移或缩放等。

三、bpmnjs与Diagram.js的关系

        通过对两个工具库的介绍，再通过以上截图，我们讲一下两者的关系。

        bpmnjs是用于对BPMN2.0协议中规定的所有元素的建模和渲染，比如上图中的任务、网关、事件等元素。

        Diagram.js是提供图表编辑基础能力的，比如画布的渲染、图形绘制、用户交互（拖拽、缩放、连线）等。

        所以，bpmnjs与Diagram.js是上下层关系，Diagram.js是底层，bpmnjs是上层实现，bpmnjs如果要实现对BPMN2.0协议中规定元素的创建与渲染，需要依赖Diagram.js提供的画布、图形渲染、拖拽、连接线等能力。

四、bpmnjs核心源码构成

bpmn-js/

├── lib/                   # 核心实现

│   ├── features/          # 功能模块（每个模块独立职责）

│   ├── model/             # BPMN 元模型与序列化

│   ├── draw/              # SVG 图形绘制

│   ├── viewer/            # 只读查看器实现

│   └── modeler/           # 建模器实现

├── assets/                # 图形资源（BPMN 图标）

├── test/                  # 测试套件

└── src/                   # 入口与公共API