How to embed the modeler into my applications

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>