var bpmnViewer = new BpmnJS({ container: '#canvas' }); function openDiagram(bpmnXML) { // import diagram bpmnViewer.importXML(bpmnXML, function (err) { if (err) { return console.error('could not import BPMN 2.0 diagram', err); } // access viewer components var canvas = bpmnViewer.get('canvas'); // zoom to fit full viewport canvas.zoom('fit-viewport'); // add marker // canvas.addMarker('SCAN_OK', 'needs-discussion'); //add by cf 20200608 for overlays test var overlays = bpmnViewer.get('overlays'); ////////////////////////////////////////////////// // add overlay to StartEvent_1 // 给startEvent_1上添加overlays ////////////////////////////////////////////////// overlays.add('StartEvent_1', { html: '<div> <span style="border-radius: 50%; height: 20px; width: 20px; display: inline-block; background: gray; vertical-align: top;"> <span style="display: block; color: black; height: 20px; font-size: 12px; line-height: 20px; cursor:pointer; text-align: center">20</span> </span> </div>', position: { right: 15, bottom: 15 } }); //add by cf 20200608 }); }