angular使用流程图

先看使用对应包的版本

"bpmn-js": "7.5.0",
"bpmn-js-properties-panel": "^0.43.1",
"camunda-bpmn-moddle": "^5.1.2",

 "@angular/cli": "~7.2.0", // 理论上 45678910 11 12都可以

要实现流程图查看的功能,看了这篇文章,改了改,就能用了

bpmn有编辑与只读功能,即 BpmnModeler 与 BpmnViewer ,本篇介绍的是BpmnViewer,生成可以访问链接查看

布局使用的是nz-card,可以认为是有背景色的div

html

<nz-card>
  <nz-col nzSpan="24">
    <div style="width: 100%; height: calc(100vh - 365px)" id="bpnmDiv"></div>
  </nz-col>
</nz-card>

css

// less
// 隐藏授权
::ng-deep {
  .bjs-container {
    .bjs-powered-by {
      display: none;
      z-index: -999;
    }
  }
}

ts

import BpmnViewer from 'bpmn-js/lib/Viewer';

export class BpmnViewrComponent implements OnInit, AfterViewInit, OnDestroy {
	ngAfterViewInit(): void {
	let str=  `<?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"
	    xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
	    id="diagram_123"
	    targetNamespace="http://activiti.org/bpmn">
	    <bpmn2:process id="123" name="123" isExecutable="true">
	    </bpmn2:process>
	    <bpmndi:BPMNDiagram id="BPMNDiagram_1">
	      <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="123">
	      </bpmndi:BPMNPlane>
	    </bpmndi:BPMNDiagram>
	  </bpmn2:definitions>`
		this.drawBpmn(str);
	}
	
	bpmnViewer;
	// 渲染流程图
	 drawBpmn(bpmnXmlStr: string): void {
	    this.bpmnViewer && this.bpmnViewer.destroy();
	    this.bpmnViewer = new BpmnViewer({
	      container: '#bpnmDiv'
	    });
	    this.bpmnViewer.importXML(bpmnXmlStr, (err) => {
	      if (err) { console.error(err); }
	      const bpmnCanvas = this.bpmnViewer.get('canvas');
	      bpmnCanvas.zoom('fit-viewport');
	      bpmnCanvas.addMarker('fifthTask_ANONYMOUS', 'highlight');
	    });
	  }
	
	
	ngOnDestroy(): void {
	    this.bpmnViewer && this.bpmnViewer.destroy();
	  }
}

最终效果图

效果图