当前位置：首页 > JavaScript

js 实现bpmn

2026-04-05 07:27:20JavaScript

JavaScript 实现 BPMN 流程建模

BPMN（Business Process Model and Notation）是一种用于业务流程建模的标准符号。在 JavaScript 中可以通过以下方式实现 BPMN 建模功能：

使用 bpmn-js 库

bpmn-js 是一个流行的开源库，专门用于在 Web 应用中嵌入 BPMN 2.0 建模器：

安装 bpmn-js
```
npm install bpmn-js
```

基础使用示例


import BpmnModeler from 'bpmn-js/lib/Modeler';

const modeler = new BpmnModeler({ container: '#canvas' });

js 实现bpmn

async function createNewDiagram() { try { const result = await modeler.createDiagram(); console.log('Diagram created'); } catch (err) { console.error('Error creating diagram', err); } }


#### 自定义建模器功能

可以扩展默认建模器功能：

```javascript
const customModeler = new BpmnModeler({
  container: '#canvas',
  additionalModules: [
    customContextPadProvider,
    customPaletteProvider
  ],
  moddleExtensions: {
    custom: customModdleExtension
  }
});

保存和加载 BPMN 图表

保存为 XML

async function saveDiagram() {
try {
 const { xml } = await modeler.saveXML({ format: true });
 console.log('Diagram XML', xml);
 return xml;
} catch (err) {
 console.error('Error saving diagram', err);
}
}

加载 XML

js 实现bpmn

async function loadDiagram(xml) {
try {
 await modeler.importXML(xml);
 console.log('Diagram imported');
} catch (err) {
 console.error('Error loading diagram', err);
}
}

集成属性面板

可以添加属性面板编辑元素属性：

import PropertiesPanelModule from 'bpmn-js-properties-panel';
import PropertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';

const modelerWithProperties = new BpmnModeler({
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties'
  },
  additionalModules: [
    PropertiesPanelModule,
    PropertiesProviderModule
  ]
});

添加自定义元素

通过扩展 BPMN 元模型添加自定义元素类型：

const customModdleExtension = {
  name: 'custom',
  uri: 'http://custom',
  prefix: 'custom',
  xml: {
    tagAlias: 'lowerCase'
  },
  types: [
    {
      name: 'CustomTask',
      extends: ['bpmn:Task'],
      properties: [
        {
          name: 'customAttribute',
          isAttr: true,
          type: 'String'
        }
      ]
    }
  ]
};

事件处理

监听建模器事件实现交互功能：

modeler.on('element.click', function(event) {
  const element = event.element;
  console.log('Element clicked', element);
});

modeler.on('selection.changed', function(event) {
  const newSelection = event.newSelection;
  console.log('New selection', newSelection);
});