HTML Presentation Object: BPMN Diagram

This is an example on how to use the available BPMN.io library in an HTML presentation object:

To use the library, do as follows:

1. Create a view and a panel.
2. Add an HTML presentation object to the panel. Use the below defined code for the HTML presentation object.

<div id="canvas<#uniqueId>"></div>

<style>
  #canvas<#uniqueId> {
    height: 100%;
  }
</style>

<script>
var exampleModeler = new bpmnModeler({
  container: '#canvas<#uniqueId>',
    keyboard: {
      bindTo: window
    }
});

// Definition of empty model canvas
var bpmnModel ='<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
  <process id="Process_1n1ursk" />
  <bpmndi:BPMNDiagram id="sid-74620812-92c4-44e5-949c-aa47393d3830">
    <bpmndi:BPMNPlane id="sid-cdcae759-2af7-4a6d-bd02-53f3352a731d" bpmnElement="Process_1n1ursk" />
    <bpmndi:BPMNLabelStyle id="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
      <omgdc:Font name="Arial" size="11" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
    </bpmndi:BPMNLabelStyle>
    <bpmndi:BPMNLabelStyle id="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
      <omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
    </bpmndi:BPMNLabelStyle>
  </bpmndi:BPMNDiagram>
</definitions>';

// Import model
exampleModeler.importXML(bpmnModel, function(err) {
  if (err != null) { alert("Error in importing BPMN XML. The file doesn't seem to be valid. More information: " + err.message); return; }
});
</script>

Additional Libraries

There are also the following libraries available to be used with the BPMN.io library:

• https://github.com/bpmn-io/bpmn-js-examples/tree/master/overlays
• https://github.com/bpmn-io/bpmn-js-examples/tree/master/interaction
• https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel