前端：vue+bpmn-js实现activiti的流程设计器，后端Springboot+Activiti开发工作流

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

import activitiModdleDescriptor from '../js/activiti.json';

this.bpmnModeler = new BpmnModeler({
  container: canvas,
  //添加属性面板，添加翻译模块
  additionalModules: [
      customTranslateModule,
      customControlsModule  
  ],
  //模块拓展，拓展activiti的描述
  moddleExtensions: {
      activiti: activitiModdleDescriptor
  }
});

{
  "name": "Activiti", // 标识是activiti
  "uri": "http://activiti.org/bpmn", // 添加activiti的命名空间
  "prefix": "activiti", // 属性前缀
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "Process", // <bpmn2:process> 标签
      "isAbstract": true, 
      "extends": [
        "bpmn:Process" // 继承自<bpmn2:process>
      ],
      "properties": [ // 这个标签的属性
        {
          "name": "candidateStarterGroups", // 属性名
          "isAttr": true,  // 是否是属性
          "type": "String" // 属性类型
        },
        {
          "name": "candidateStarterUsers",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "versionTag",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "historyTimeToLive",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "isStartableInTasklist",
          "isAttr": true,
          "type": "Boolean",
          "default": true // 给属性添加默认值，但这个默认值没有写入xml中
        },
        {
          "name":"executionListener", // 监听器属性
          "isAbstract": true, // 抽象
          "type":"Expression" // 类型是表达式
        }
      ]
    },
    // 在这里接着加其他节点
    
    
  ],
  "emumerations": [ ]
}

{
  "name": "UserTask",
  "isAbstract": true, 
  "extends": [
    "bpmn:UserTask"
  ],
  "properties": [
    {
      "name": "nodeType",
      "isAttr": true,
      "type": "String"
    },
  ] 
}

import CustomContextPad from './CustomContextPad';
import CustomPalette from './CustomPalette';

export default {
    __init__: [ 'customContextPad', 'customPalette' ],
    customContextPad: [ 'type', CustomContextPad ],
    customPalette: [ 'type', CustomPalette ]
};

import CustomContextPad from './CustomContextPad';
import CustomPalette from './CustomPalette';

export default {
    __init__: [ 'contextPadProvider', 'paletteProvider' ],
    contextPadProvider: [ 'type', CustomContextPad ],
    paletteProvider: [ 'type', CustomPalette ]
};

<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns:bpmn2="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" 
xmlns:normal="http://flowable.org/bpmn/normal" 
xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" 
id="sample-diagram" targetNamespace="http://activiti.org/bpmn">
<bpmn2:process id="Process_1" isExecutable="true">
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>

modeling.updateProperties(element, {
  'normal:nodeType': 'nodeType'
})

watch: {
  id (newVal, oldVal) {
    const bpmnModeler = this.bpmnModeler();
    const modeling = bpmnModeler.get('modeling');
    modeling.updateProperties(this.element,{'id':newVal});
  },
  name(newVal, oldVal){
    const bpmnModeler = this.bpmnModeler();
    const modeling = bpmnModeler.get('modeling');
    modeling.updateProperties(this.element,{'name':newVal}); 
  },
  // 监控element值，当发生改变时获取响应的属性
  element: {
    deep: true,
    immediate: true,
    handler(newVal, oldVal) {
      if(newVal) {
        const bpmnModeler = this.bpmnModeler(); // 我这里由于项目原因用的是方法获取bpmnModeler
        this.id = newVal.businessObject.get('id');
        this.name = newVal.businessObject.get('name');
        // 初始化赋值
        const modeling = bpmnModeler.get('modeling');
        modeling.updateProperties(this.element,{'name':this.name});
        modeling.updateProperties(this.element,{'process_namespace':this.process_namespace});
        modeling.updateProperties(this.element,{'process_id':this.id});
      }
    }
  }
}

const moddle = bpmnModeler.get('moddle');
loopCharacteristics = moddle.create('bpmn:MultiInstanceLoopCharacteristics');
loopCharacteristics['collection'] = 'flow_assignee';
loopCharacteristics['elementVariable'] = 'flow_assignee';
let completionCondition = elementsHelper.createElement('bpmn:FormalExpression', { body: '${mulitiInstance.completeTask(execution,passResult,mulitiActivityId)}' }, loopCharacteristics, bpmnFactory);

loopCharacteristics['completionCondition'] = completionCondition;
modeling.updateProperties(element, { loopCharacteristics: loopCharacteristics });

// 获取全部节点，也可以用来获取根节点
bpmnModeler._definitions.rootElements[0]
// 根节点
bpmnModeler.get('canvas').getRootElement()

bpmnModeler._definitions.rootElements[0].flowElements.push(boundaryEvent);

id = `T-${uuidv4()}`

const currentViewbox = this.bpmnViewer.get('canvas').viewbox()      
const widthWindow = window.outerWidth;      
const heightWindow = window.outerHeight;      
const elementMid = {        
x: widthWindow / 2,        
y: heightWindow / 2      
}      
this.bpmnViewer.get('canvas').viewbox({        
x: elementMid.x - currentViewbox.width / 2,        
y: elementMid.y - currentViewbox.height / 2,        
width: currentViewbox.width,        
height: currentViewbox.height      
})      
const width = document.getElementById('canvas').offsetWidth      
this.bpmnViewer.get('canvas').zoom(width / this.width)