官網(wǎng)地址：https://bpmn.io/

安裝Node.js

• 下載地址https://nodejs.org/en/download/

BPMN-JS地址

• 下載源碼https://github.com/bpmn-io/bpmn-js-examples/

基于有屬性面板的例子去修改
https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel 屬性面板
https://github.com/bpmn-io/bpmn-js-examples/tree/master/i18n 漢化說明

在resources文件夾下再創(chuàng)建一個resources文件夾，

實際路徑為resources/resources/

把從github下載的bpmn-js-examples-master.zip壓縮包解壓

拷貝properties-panel到resources/resources/并改文件夾名字為bpmnjs

實際路徑為resources/resources/bpmnjs

bpmnjs漢化包地址：https://www.aliyundrive.com/s/tde7EYKttYb

解壓bpmnjs漢化包，并資源拷貝到以下路徑

bpmnjs初始化.zip
resources/resources/bpmnjs/resources

打開app.js

image.png

注釋以下內(nèi)容

import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';

注釋以下內(nèi)容

var bpmnModeler = new BpmnModeler({
 container: canvas,
 propertiesPanel: {
   parent: '#js-properties-panel'
 },
 additionalModules: [
   propertiesPanelModule,
   propertiesProviderModule
 ],
 moddleExtensions: {
   camunda: camundaModdleDescriptor
 }
});

添加以下內(nèi)容

import propertiesProviderModule from '../resources/properties-panel/provider/activiti';
import activitiModdleDescriptor from '../resources/activiti.json';
import customTranslate from '../resources/customTranslate/customTranslate';
import customControlsModule from '../resources/customControls';

// 添加翻譯組件
var customTranslateModule = {
   translate: ['value', customTranslate]
};


var bpmnModeler = new BpmnModeler({
   container: canvas,
   propertiesPanel: {
       parent: '#js-properties-panel'
   },
   additionalModules: [
       propertiesPanelModule,
       propertiesProviderModule,
       customControlsModule,
       customTranslateModule
   ],
   moddleExtensions: {
       activiti:activitiModdleDescriptor
   }
});

使用命令行工具打開resources/resources/bpmnjs/并執(zhí)行命令

npm install

npm run dev

增加BPMNJS可執(zhí)行選框默認勾選，打開resources/newDiagram.bpmn

屬性修改為isExecutable="true

<bpmn2:process id="Process_1" isExecutable="true">

最后展示界面：

image.png

同時頁面的左下角還有下載，圖繪制完成之后，下載然后放到項目中就可以使用了。