TLDR; Use the bpmn-js-seed project to quickly bootstrap bpmn-js in a simple application.
Pull the dependencies
Pull the modeler dependencies into your project via direct download or bower.
bower install bpmn-js
This downloads the dependencies into the bower_components
directory.
Add scripts to a HTML page
Include the modeler and its dependencies into a HTML page:
<!-- bpmn-js modeler -->
<script src="bower_components/bpmn-js/dist/bpmn-modeler.js"></script>
Bootstrap bpmn-js
Add an element you would like to bootstrap the modeler in:
<!-- element to draw bpmn diagram in -->
<div id="canvas"></div>
Bootstrap the modeler and import a BPMN 2.0 XML document:
<script>
(function() {
// load bpmn20xml from external resource or embed it into the page
var bpmn20xml = '...';
// create viewer
var bpmnViewer = new BpmnJS({ container: '#canvas' });
// import diagram
bpmnViewer.importXML(bpmn20xml, function(err) {
if (err) {
alert('could not import BPMN 2.0 diagram', err);
}
});
})();
</script>