This example showcases how to use the pre-packaged version(s) of bpmn-js.
We provide pre-packaged versions of our toolkit via unpkg.
This example shows how to embed these resources to integrate a BPMN viewer or editor into a website.
Download or simply include the relevant dependencies into your website:
<!-- required viewer styles -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/bpmn-js.css" />
<script src="https://unpkg.com/[email protected]/dist/bpmn-viewer.development.js"></script>Download the complete viewer example.
<!-- required modeler styles -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/bpmn-js.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/assets/bpmn-font/css/bpmn.css" />
<script src="https://unpkg.com/[email protected]/dist/bpmn-modeler.development.js"></script>Download the complete modeler example.
The library is bundled as an UMD bundle and binds itself to the global BpmnJS
variable.
var bpmnJS = new BpmnJS({
container: '#canvas'
});
try {
await bpmnJS.importXML(someDiagram);
console.log('success!');
viewer.get('canvas').zoom('fit-viewport');
} catch (err) {
console.error('something went wrong:', err);
}MIT