大家好，欢迎来到IT知识分享网。

背景

我们了解了基本的BPMN的概念，那么需要对其有更直观的认识，结合下一步我们要落地BPMN的标准，使用Activiti7来实现。

BPMN是一种标准，idea里面有可视化的界面，其中BPMN是一个不错的选择，简单看以以下其内容。

BPMNJS 简介

bpmn.js是一个BPMN 2.0渲染工具包和web建模器。它是用JavaScript编写的，将BPMN 2.0 图表嵌入在浏览器中, 并独立于后端, 这也使得将其嵌入到任务Web应用程序中变得很容易: 可以独立使用也可以集成到你的应用中。

该库的构建方式既可以是查看器，也可以是Web建模器

• 使用查看器(Viewer)将BPMN 2.0 嵌入到应用程序中，并用系统数据丰富其查看器。
• 使用建模器(Modeler) 在应用程序中创建BPMN 2.0 图表。

diagram-js 和bpmn-moddle

BPMN 2.0 中 bpmn-js主要依赖的库有两个: diagram-js 和bpmn-moddle.

bpmn.js是建立在 diagram-js和bpmn-moddle 两个库之上进行使用的。其中 diagram-js 是用来进行绘制形状和连接。它为我们提供了与这些图形元素交互的方法，以及帮助用户构建强大的BPMN 查看器等辅助工具. 对于建模它提供了上下文、调色板和重做/撤销等功能。bpmn-moddle 它允许我们读取和写入符合 BPMN 2.0 模式的XML 文档，并访问图表上绘制的形状和连接背后的BPMN相关信息。在这两个关联库之上，bpmn-js定义了BPMN的细节，例如外观、建模规则和工具(调色板)等等。

diagram-js(图表交互/建模)

模块系统：在底层 diagram-js使用依赖注入来连接和发现图表组件。在diagram-js的上下文中讨论模块时，指的是提供命名服务以及其实现的单元。”服务”是一个函数或实例，它可以使用其他服务在图表的上下文中做事。

下面是与生命周期事件挂钩的一个服务，它通过 eventBus 代理一个事件来做到可以处理事件的功能。如下：

javascript
复制代码const MyPlugin = (eventBus) => {
  eventBus.on('element.changed', (event) => {
    console.log('element ', event.element, 'changed');
  });
}
MyPlugin.$inject = ['eventBus' ];

diagram-js是围绕许多基本服务构建的：

• Canvas- 提供用于添加和删除图形元素的 API；处理元素生命周期并提供 API 来缩放和滚动。
• EventBus- 事件总线模块来管理监听事件，相关方可以订阅各种事件，并在它们发出后对其采取行动。事件总线帮助我们解耦关注点并将功能模块化，以便新功能可以轻松地与现有行为挂钩。
• ElementFactory- 根据 diagram-js 的内部数据模型创建形状和连接的工厂。
• ElementRegistry- 了解添加到图表中的所有元素，并提供 API 以通过id检索元素及其图形表示。
• GraphicsFactory- 负责创建形状和连接的图形表示。实际的外观和感觉由渲染器定义，即DefaultRender在绘图模块内部。

diagram-js还提供一些辅助工具箱：

• CommandStack- 负责建模期间的重做和撤消。
• ContextPad- 提供围绕元素的上下文操作。
• Overlays- 提供用于将附加信息附加到图表元素的 API。
• Modeling- 提供用于更新画布上的元素（移动、删除）的 API
• Palette – 左侧和右侧工具面板等等一些可扩展的辅助工具；

bpmn-moddle

bpmn-moddle是封装了BPMN 2.0模型，并提供了读写 BPMN 2.0 XML 文档工具。导入时 将 XML 文档解析为JavaScript 对象树，在建模时对该树进行编辑和验证，然后在保存图表时将其导出成 BPMN 2.0 XML协议文件。

bpmn-moddle 将 BPMN 2.0 规范添加为元模型，并为BPMN 2.0 模式验证提供了简单的接口，并提供如下API:

• formXML – 从给定的XML字符串创建 BPMN 树
• toXML – 将BPMN对象树写入BPMN 2.0 XML

下一步

通过vue3，antdesign vue，结合bpmn，构建自己的流程设计工具。