BPMN（业务流程建模与标记法）是一种标准化的图形化表示方法，用于描述和可视化业务流程。在现代企业级应用中，流程管理和自动化已经成为提高效率和降低出错率的关键技术之一。而 bpmn-js 是一个非常流行的开源库，用于在 Web 中创建和显示 BPMN 流程图。
在本篇文章中，我们将带你快速入门 bpmn-js，学习如何使用它来构建一个基础的流程编辑器。文章将涵盖基础配置、常用 API、如何实现流程图的加载与保存、以及如何进行基本的自定义。
1. 安装 bpmn-js
首先，我们需要将 bpmn-js 安装到我们的项目中。可以通过 npm 来安装：
npm install bpmn-js
如果你是通过 CDN 直接引入，也可以使用下面的链接：
<script src="https://unpkg.com/[email protected]/dist/bpmn-navigated-viewer.production.min.js"></script>
2. 基本配置与渲染
一旦安装了 bpmn-js，我们可以开始创建一个简单的流程图。在最基础的使用场景中，你只需要创建一个容器，然后通过 BpmnViewer 类来渲染 BPMN 文件。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BPMN-js 基本使用</title>
<style>
#canvas {
width: 100%;
height: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script src="https://unpkg.com/[email protected]/dist/bpmn-navigated-viewer.production.min.js"></script>
<script>
const BpmnViewer = window.BpmnJS;
// 创建 BPMN Viewer 实例
const viewer = new BpmnViewer({
container: '#canvas' // 指定渲染的容器
});
// 加载 BPMN 文件
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/BPMN"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/BPMN bpmn20.xsd">
<bpmn:process id="Process_1" isExecutable="true">
<bpmn:startEvent id="StartEvent_1" />
<bpmn:task id="Task_1" />
<bpmn:endEvent id="EndEvent_1" />
<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_1" />
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_1" targetRef="EndEvent_1" />
</bpmn:process>
</bpmn:definitions>`;
// 渲染 BPMN 流程图
viewer.importXML(bpmnXML, function(err) {
if (err) {
console.error('Error rendering BPMN diagram: ', err);
} else {
console.log('BPMN diagram rendered successfully');
}
});
</script>
</body>
</html>
解释：
- 我们通过
BpmnViewer类创建了一个viewer实例，并将其绑定到#canvas容器上。 importXML()方法用来加载 BPMN 格式的 XML 数据。bpmnXML是我们用于表示流程图的标准 BPMN XML 数据。
这段代码会将一个简单的 BPMN 流程图加载到页面上，显示一个有起始事件、任务和结束事件的流程。
3. 使用 bpmn-js 实现交互功能
bpmn-js 不仅可以渲染流程图，还可以实现一些交互功能，如拖拽元素、编辑节点和连接线等。下面我们来演示如何启用流程编辑功能。
示例代码：启用流程编辑功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BPMN-js 编辑器</title>
<style>
#canvas {
width: 100%;
height: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script src="https://unpkg.com/[email protected]/dist/bpmn-modeler.production.min.js"></script>
<script>
const BpmnModeler = window.BpmnJS;
// 创建 BPMN Modeler 实例
const modeler = new BpmnModeler({
container: '#canvas'
});
// BPMN XML 数据
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/BPMN"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/BPMN bpmn20.xsd">
<bpmn:process id="Process_1" isExecutable="true">
<bpmn:startEvent id="StartEvent_1" />
<bpmn:task id="Task_1" />
<bpmn:endEvent id="EndEvent_1" />
<bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_1" />
<bpmn:sequenceFlow id="Flow_2" sourceRef="Task_1" targetRef="EndEvent_1" />
</bpmn:process>
</bpmn:definitions>`;
// 加载并启用编辑功能
modeler.importXML(bpmnXML, function(err) {
if (err) {
console.error('Error rendering BPMN diagram: ', err);
} else {
console.log('BPMN diagram rendered successfully');
}
});
</script>
</body>
</html>
解释：
- 这次我们使用的是
BpmnModeler，它除了可以渲染流程图，还可以编辑流程图。 - 在容器中加载 XML 数据后，用户可以通过界面交互来拖动节点、调整连接线等。
4. 自定义与事件处理
bpmn-js 提供了丰富的 API，允许开发者对 BPMN 流程图进行定制。例如，你可以处理节点的点击事件、获取选中的节点、修改节点属性等。
示例代码：添加事件监听器
modeler.on('element.click', function(event) {
const element = event.element;
if (element.type === 'bpmn:Task') {
console.log('Task clicked:', element);
}
});
这段代码将在用户点击一个任务节点时触发，并打印出该节点的信息。
5. 流程图的保存与导出
bpmn-js 还支持将编辑后的 BPMN 流程图导出为 XML 数据，可以方便地保存或者传输给后端。
示例代码：导出 BPMN 数据
modeler.saveXML({
format: true }, function(err, xml) {
if (err) {
console.error('Error saving BPMN diagram: ', err);
} else {
console.log('BPMN XML:', xml);
}
});
通过 saveXML() 方法，我们可以获取到当前编辑的 BPMN XML 数据，format: true 参数表示输出的 XML 格式化。
6. 总结
在这篇文章中，我们介绍了 bpmn-js 的基本使用，包括：
- 如何安装和配置
bpmn-js。 - 如何渲染一个简单的 BPMN 流程图。
- 如何启用流程图编辑功能。
- 如何处理用户事件和自定义操作。
- 如何导出 BPMN 数据。
bpmn-js 提供了强大的功能，可以帮助开发者在 Web 中创建复杂的 BPMN 流程编辑器。掌握这些基本操作后，你可以开始根据项目的需求进行更多的定制和优化。