Javascript example to demonstrate how to integrate bpmn-visualization in a html page.
- ⏩ live environment
- to run locally, open the index.html directly in a Web Browser
Load the browser bundle from jsdelivr, unpkg or any other location:
<script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.27.1/dist/bpmn-visualization.min.js"></script>💡 During the development step, you can use the non-minified version:
<script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.27.1/dist/bpmn-visualization.js"></script>Initialize bpmn-visualization and then load a BPMN Diagram.
The library is bundled as an IIFE style script and binds itself to the global bpmnvisu variable.
In the following, the HTML page defined a div identified by the bpmn-container id, where the BPMN diagram is rendered.
// initialize bpmn-visualization
const bpmnVisualization = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container' });
// load the BPMN diagram
bpmnVisualization.load(bpmnDiagram());