bpmn-js 指南
BPMN 2.0 规范中定义了多种流程元素，以下是一些常见的流程元素及其作用和含义：
- bpmn:StartEvent：表示流程的开始，通常用于表示流程实例的创建。
- bpmn:EndEvent：表示流程的结束，通常用于表示流程实例的终止。
- bpmn:ExclusiveGateway：表示一个具有多个出口的决策点，根据流程中的条件或表达式，将流程分支到不同的路径。
- bpmn:ParallelGateway：表示一个并行网关，用于将多个并行执行的路径合并为一个路径。
- bpmn:InclusiveGateway：表示一个包含网关，用于将流程分支到多个路径，并在所有路径执行完成后合并到一个路径。
- bpmn:EventBasedGateway：表示一个基于事件的网关，用于根据某个事件的发生来决定流程的路径。
- bpmn:Task：表示一个工作任务，通常用于表示需要人工完成的任务或需要执行的系统任务。
- bpmn:ScriptTask：表示一个脚本任务，用于执行一段脚本或代码。
- bpmn:ServiceTask：表示一个服务任务，用于调用外部服务或系统。
- bpmn:SendTask：表示一个发送任务，用于向外部系统发送消息或数据。
- bpmn:ReceiveTask：表示一个接收任务，用于接收外部系统发送的消息或数据。
- bpmn:UserTask：表示一个用户任务，通常用于表示需要用户干预的任务。
- bpmn:ManualTask：表示一个手动任务，通常用于表示需要人工完成的任务。
- bpmn:BusinessRuleTask：表示一个业务规则任务，用于执行业务规则引擎中的规则。
- bpmn:CallActivity：表示一个调用活动，用于调用另一个流程定义。
- bpmn:SubProcess：表示一个子流程，用于将一个流程划分为多个子流程。
- bpmn:Transaction：表示一个事务，用于将一组操作划分为一个事务，以确保操作的原子性。
- bpmn:Event：表示一个事件，用于表示某个事件的发生。
- bpmn:BoundaryEvent：表示一个边界事件，用于捕获某个事件，并在事件发生时触发相应的操作。
- bpmn:IntermediateCatchEvent：表示一个中间捕获事件，用于捕获某个事件，并在事件发生时继续流程的执行。
- bpmn:IntermediateThrowEvent：表示一个中间抛出事件，用于在流程执行过程中触发某个事件。
- bpmn:DataObject：表示一个数据对象，用于表示流程中的数据。
- bpmn:DataStore：表示一个数据存储，用于存储流程中的数据。
- bpmn:DataInput：表示一个数据输入，用于将数据传递给流程元素。
- bpmn:DataOutput：表示一个数据输出，用于从流程元素获取数据。
- bpmn:InputOutputSpecification：表示一个输入输出规范，用于定义流程元素的输入输出。
- bpmn:SequenceFlow：表示一个顺序流，用于定义流程元素之间的执行顺序。
- bpmn:MessageFlow：表示一个消息流，用于传递消息或数据。
- bpmn:Association：表示一个关联，用于表示流程元素之间的某种关系。
- bpmn:Group：表示一个分组，用于将多个流程元素组合在一起。
- bpmn:TextAnnotation：表示一个文本注释，用于在流程图中添加文本注释。
这些流程元素可以根据具体的业务场景进行组合和使用，以实现不同的业务流程。
BPMN XML是干啥的？
BPMN (Business Process Model and Notation) 是一种图形表示法，用于表示业务流程。BPMN 的目标是为业务流程建模提供一个简单、易懂且可视化的表示方法。它支持业务分析师、开发人员和业务用户之间的沟通和协作。
BPMN XML 是一种基于 XML（Extensible Markup Language，可扩展标记语言）的文件格式，用于存储、交换和执行 BPMN 流程模型。BPMN XML 文件包含了流程模型的所有元素（如任务、网关、事件等）及其属性（如名称、类型等）和连接（如序列流、消息流等）。这种格式使得 BPMN 模型可以在不同的流程建模工具和执行引擎之间轻松共享和迁移。
简而言之，BPMN XML 是一种用于描述和存储业务流程模型的结构化文件格式。使用 BPMN XML，您可以在 BPMN 建模工具（如 bpmn-js）中打开、编辑和保存流程模型，还可以将这些模型部署到流程引擎（如 Camunda、Activiti 等）进行执行和监控。
<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions 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_1" targetNamespace="http://bpmn.io/schema/bpmn">
<bpmn:process id="Process_1" isExecutable="false">
<bpmn:startEvent id="StartEvent_1" />
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
<dc:Bounds x="173" y="102" width="36" height="36" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>
Palette, Renderer 和 ContextPad 分别是什么？
在 bpmn-js 中，Palette、Renderer 和 ContextPad 是用于实现 BPMN 建模工具的关键组件。下面是它们的简要说明：
- Palette: Palette 是建模工具中的一个组件，它提供了一组可用的 BPMN 元素，如任务、网关、事件等。用户可以从调色板中拖放元素到流程图中以创建流程模型。
- Renderer: Renderer 负责将 BPMN 元素绘制到画布上。bpmn-js 使用了一个基本的渲染器，它支持所有标准的 BPMN 元素。
- ContextPad: ContextPad 是建模工具中的一个组件，它为选中的元素提供了一组上下文相关的操作，如连接、编辑、删除等。
BpmnViewer 和 BpmnModeler的区别，分别指什么？
BpmnViewer 和 BpmnModeler 都是 bpmn-js 库中使用的术语，但它们在概念和实际使用中有明显的区别。
BpmnViewer 是一个用于查看 BPMN 2.0 流程图的 Web 视图。它提供了一个图形界面，用于显示流程图及其相关的任务、事件和属性。BpmnViewer 的主要目的是提供一个易于使用的界面，以便用户可以查看、导航和分析 BPMN 流程。BpmnViewer 并不支持编辑或创建 BPMN 流程，它只是一个纯粹的查看器。
BpmnModeler 是一个用于创建、编辑和调试 BPMN 2.0 流程图的图形编辑器。BpmnModeler 提供了创建、编辑、调试和验证 BPMN 流程的功能。它包括一个图形设计器，用于拖放和连接流程元素以创建流程图，以及一个属性编辑器，用于设置流程元素的各种属性。BpmnModeler 还提供了许多实用工具，例如将任务分配给参与者、设置任务依赖关系、生成流程实例等。与 BpmnViewer 不同，BpmnModeler 是一个完整的 BPMN 编辑器，支持创建和编辑 BPMN 流程。
总结一下，BpmnViewer 是一个用于查看 BPMN 流程的 Web 视图，而 BpmnModeler 是一个用于创建、编辑和调试 BPMN 流程的图形编辑器。两者都是 BPMN 2.0 规范的一部分，但它们的用途和功能有所不同。
BpmnModeler 实例化参数
moddleExtensions
moddleExtensions 参数用于在 bpmn-js 中注册自定义的模型扩展。这些扩展定义了您在 BPMN 模型中使用的自定义元素和属性。通过使用模型扩展，您可以增强 BPMN 模型以满足特定的业务需求，同时仍然保持与 BPMN 标准的兼容性。
例如，假设您希望在 BPMN 任务元素上添加一个自定义的属性 myCustomProperty。您可以创建一个名为 my-custom.json 的模型扩展文件，如下所示：
{
"name": "MyCustomExtension",
"uri": "http://example.com/my-custom",
"prefix": "my",
"xml": {
"tagAlias": "lowerCase"
},
"associations": [],
"types": [
{
"name": "Task",
"extends": [
"bpmn:Task"
],
"properties": [
{
"name": "myCustomProperty",
"isAttr": true,
"type": "String"
}
]
}
]
}接下来，您需要在创建 bpmn-js 实例时，使用 moddleExtensions 参数注册这个扩展：
import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
import customModdleDescriptor from './my-custom.json';
const viewer = new BpmnJS({
container: '#canvas',
moddleExtensions: {
my: customModdleDescriptor,
},
});现在，您可以在 BPMN 任务元素中使用 my:myCustomProperty 属性。例如：
<bpmn:task id="Task_1" name="My Task" my:myCustomProperty="CustomValue" />在 bpmn-js 中，您可以使用 element.businessObject 访问这些自定义属性，例如：
const taskElement = /* 从某处获取任务元素 */;
const customProperty = taskElement.businessObject.myCustomProperty;
console.log('Custom property value:', customProperty);总之，moddleExtensions 参数使您能够在 BPMN 模型中使用自定义元素和属性，从而更好地满足特定的业务需求。
以下是 my-custom.json 文件中每个键的含义：
name：模型扩展的名称。这是一个字符串，用于标识您的模型扩展。uri：模型扩展的命名空间 URI。这是一个字符串，用于区分您的模型扩展和其他扩展。它应该是唯一的，通常使用您的组织或项目的 URL。prefix：模型扩展的前缀。这是一个字符串，用于在 BPMN XML 文件中为您的模型扩展定义缩写。这将用于您的自定义元素和属性的 XML 标签和属性名。xml：模型扩展的 XML 配置。这是一个对象，用于定义如何在 BPMN XML 文件中表示您的模型扩展。它可以包含以下属性：tagAlias：一个字符串，定义了如何为您的模型扩展生成 XML 标签。可以是"lowerCase"（将类型名转换为小写）或"camelCase"（保留类型名的驼峰命名）。
associations：模型扩展的关联。这是一个对象数组，用于定义您的模型扩展中的关联。在此示例中，我们没有使用关联，因此该数组为空。types：模型扩展的类型。这是一个对象数组，用于定义您的模型扩展中的自定义元素和属性。每个类型对象可以包含以下属性：name：类型的名称。这是一个字符串，用于标识您的自定义类型。extends：类型扩展的基本类型。这是一个字符串数组，表示您的自定义类型继承自哪些 BPMN 类型。在此示例中，我们扩展了bpmn:Task类型。properties：类型的属性。这是一个对象数组，用于定义您的自定义类型中的属性。每个属性对象可以包含以下属性：name：属性的名称。这是一个字符串，用于标识您的自定义属性。isAttr：一个布尔值，表示该属性是否应作为 XML 属性表示。如果为true，则属性将作为 XML 属性添加到扩展的 BPMN 类型中。type：属性的类型。这是一个字符串，表示属性的数据类型。可以是"String"、"Number"、"Boolean"等。
这个 JSON 文件定义了一个名为 "MyCustomExtension" 的模型扩展，它扩展了 bpmn:Task 类型以添加一个名为 myCustomProperty 的自定义属性。在 BPMN XML 文件中，您可以使用 my:myCustomProperty 属性为任务元素设置自定义值。
未完待续。。。