快速介绍
bpmn-js 是一个 BPMN 2.0 呈现工具箱和 web 建模器。它是用 JavaScript 编写的，将 BPMN 2.0 图嵌入到现代浏览器中，不需要服务器后端。这使得它很容易嵌入到任何 web 应用程序中。
该库以一种既可以作为查看器又可以作为 web 建模器的方式构建，。使用查看器将 BPMN 2.0 嵌入到应用程序中，并用数据丰富它。使用 modeler 在你的应用程序中创建 BPMN 2.0 关系图。
本演练将向你介绍如何使用该库，以及对其内部结构的一些了解，即组件有助于其高度模块化和可扩展的结构。
目录
使用库
嵌入视图（pre-packaged）
自己动手建模（通过 npm）理解 bpmn-js 内部
图表交互/建模（diagram-js）
BPMN 元模型（bpmn-moddle）
结合使用（bpmn-js）进阶
使用库
这里有两种方法在你的应用程序中使用 bpmn-js。一个集所有功能与一身的预打包版本的库允许你快速添加 BPMN 到任何网站。npm 版本设置会有些复杂，但是允许你访问单独的库组件，并且扩展起来也更容易。
本节将概述两种方法。我们首先介绍如何将预打包版本的 BPMN 查看器嵌入到网站中。接下来，我们将展示如何将 bpmn-js 与你的应用程序绑定，以创建基于 web 的 BPMN 编辑器。
集成预打包版本视图
这个预打包版本的 bpmn-js 允许你使用一个简单的 <script> 集成 BPMN 到你的 web 站点。
添加一个容器元素来渲染图标到你的网站并且包含库到网页中。
<div id="canvas"></div>
<script src="https://unpkg.com/bpmn-js/dist/bpmn-viewer.development.js"></script>
<script>
// the diagram you are going to display
var bpmnXML;
// BpmnJS is the BPMN viewer instance
var viewer = new BpmnJS({ container: '#canvas' });
// import a BPMN 2.0 diagram
viewer.importXML(bpmnXML, function(err) {
if (err) {
// import failed :-(
} else {
// we did well!
var canvas = viewer.get('canvas');
canvas.zoom('fit-viewport');
}
});
</script>
该代码段使用Viewer#importXML API来显示预加载的BPMN 2.0关系图。导入图表是异步的，完成之后，查看器通过回调通知我们结果。
导入之后，我们可以通过Viewer#get访问各种图表服务。在上面的代码片段中，我们与画布进行交互，以使图适应当前可用的视口大小。
通常，通过AJAX动态加载BPMN 2.0关系图更为实用。这可以使用简单的JavaScript(如下所示)或通过提供更方便的api的实用程序库(如jQuery)来实现。
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
viewer.importXML(xhr.response, function(err) {
// ...
});
}
};
xhr.open('GET', 'path-to-diagram.bpmn', true);
xhr.send(null);
</script>
自己手动建模
如果你想围绕库构件自定义，可以通过 npm 使用 bpmn-js。这种方法有很多优点，比如可以访问单独的库组件。它还使我们能够更多地控制作为查看器/建模器的一部分来打包什么。但是，它要求我们使用Webpack等支持ES模块的bundler将bpmn-js与我们的应用程序绑定在一起。
包含库
首先通过 npm 安装 bpmn-js
npm install bpmn-js
然后通过 ES import 获取 BPMN modeler：
import Modeler from 'bpmn-js/lib/Modeler';
// create a modeler
var modeler = new Modeler({ container: '#canvas' });
// import diagram
modeler.importXML(bpmnXML, function(err) {
// ...
});
同样，这里假设您提供了一个带有id canvas的元素，作为建模器要呈现到的HTML的一部分。
添加样式
在将建模器嵌入到网页中时，包含 diagram-js 样式以及相应的 BPMN 字体文件。他们都随 bpmn-js 发布在 dist/assets 文件夹下。
<link rel="stylesheet" href="bpmn-js/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="bpmn-js/dist/assets/bpmn-font/css/bpmn.css" />
添加样式可以确保 diagram 的元素接收正确的样式来显示上下文 pad和调色板条目（图标左侧的）显示 BPMN 符号。
打包
bpmn-js 及其依赖项分布在 ES 模块中。使用 ES 模块支持的 bundler 将 bpmn-js 打包到应用程序中。
挂钩到生命周期事件
事件允许您挂钩到建模器的生命周期以及图表交互。下面的代码片段展示了如何捕获更改的元素和建模操作。
modeler.on('commandStack.changed', function() {
// user modeled something or
// performed an undo/redo operation
});
modeler.on('element.changed', function(event) {
var element = event.element;
// the element was changed by the user
});
使用 Viewer#on 注册事件或者在扩展模块中使用 EventBus 。停止监听使用 Viewer#off 方法。交互的例子
扩展 Modeler
你可以使用 additionalModules 选项在创建时扩展查看器和建模器。这允许你传递修改或替换现有功能的自定义模块。
import OriginModule from 'diagram-js-origin';
// create a modeler
var modeler = new Modeler({
container: '#canvas',
additionalModules: [
OriginModule,
require('./custom-rules'),
require('./custom-context-pad')
]
});
一个模块就是一个单元，定义一个或多个命名服务。这些服务配置 bpmn-js 或者提供额外的功能，即钩入 diagram 的生命周期。
一些模块，例如 diagram-js-origin 或者 diagram-js-minimap，提供通用的用户接口。内建 bpmn-js 模块，例如 bpmn rules 或者 modeling，提供高度特定的 bpmn 功能。
扩展BPMN建模器的一种常见方法是添加自定义建模规则。通过这样做，您可以限制或扩展用户允许的建模操作。
理解 bpmn-js 内部
这节探索一些 bpmn-js 内部。
