bpmn-js bower example

bpmn-js is the BPMN 2.0 diagram modeling and rendering toolkit that powers

This example showcases how pull bpmn-js into a web application via bower.


This example uses bpmn-js to embed the pizza collaboration diagram into a web application.

demo application screenshot

Usage Summary

Install bpmn-js via bower

bower install --save bpmn-js

Embed it and its dependencies into a website

Embed the Viewer

<script src="bower_components/bpmn-js/dist/bpmn-viewer.js"></script>

Embed the Modeler

<!-- necessary stylesheets -->
<link rel="stylesheet" href="bower_components/bpmn-js/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="bower_components/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css" />

<script src="bower_components/bpmn-js/dist/bpmn-modeler.js"></script>

Use it in your application

var BpmnViewer = window.BpmnJS;

var viewer = new BpmnViewer({ container: '#canvas' });

viewer.importXML(pizzaDiagram, function(err) {

  if (!err) {
  } else {
    console.log('something went wrong:', err);

Make sure you serve the application via a web server (nginx, apache or for testing just python -m SimpleHTTPServer 8080) and ensure that the diagrams you want to access are either on the same server or CORS is enabled.