bpmn-js API

bpmn-js介绍：
https://github.com/bpmn-io

1.导入流程图

    var bpmnModeler = new BpmnJS({
      container: '#canvas',
      keyboard: {
        bindTo: window
      }
    });
       bpmnModeler.importXML(bpmnXML, function (err) {
        if (err) {
          return console.error('could not import BPMN 2.0 diagram', err);
        }
        var canvas = bpmnModeler.get('canvas');
        canvas.zoom('fit-viewport');
      });

2.导出流程图XML

    bpmnModeler.saveXML({ format: true }, function (err, xml) {
        if (err) {
          return console.error('could not save BPMN 2.0 diagram', err);
        }
        xmldata = xml;
      });

3.读取节点属性

ar eventBus = bpmnModeler.get('eventBus');
eventBus.on('element.click', function(evt) { 
  $('#hidNode').val(evt.element.id);
  $('#hidNodeType').val(evt.element.type);
  $('#hidNodeName').val(evt.element.businessObject.name);
 })

4.更新节点名称

var modeling = bpmnModeler.get('modeling');
      var shape = bpmnModeler.get('elementRegistry').get(nodeId);
      modeling.updateProperties(shape, { name: "新名称" });

5.改变节点颜色

  var elementToColor = bpmnModeler.get('elementRegistry').get('StartEvent_1'); 
  var modeling = bpmnModeler.get('modeling');
  modeling.setColor([elementToColor], { 
    stroke: 'green',
    fill: 'rgba(0, 80, 0, 0.4)'
  });

待整理……