Issue with interaction and loading bpmn graphics


I am using interaction based example to test it out with Spring MVC. I can see the console, but no graphics in canvas. So, I cannot verify interaction. I can load the graphics as shown in simple-bower, however, when I use Async method to load in interaction based example, it does not work.

Appreciate any help in advance

Following is the js file snippet:

'use strict';
var console = document.querySelector('#console');
function log() {
console.value += {
  return String(e);
}).join(' ');
console.value += '\n';
console.scrollTop = console.scrollHeight;
var BpmnViewer = window.BpmnJS;
var viewer = new BpmnViewer({ container: '#canvas' });
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        viewer.importXML(xhr.response, function(err) {
          if (!err) {
          } else {
            console.log('something went wrong:', err);
};'GET', '/bpmn/interaction/resources/pizza-collaboration.bpmn', true);
  // diagram is loaded, add interaction to it

// Option 1:
// directly hook into internal diagram events
// this allows you to access the clicked element directly

var eventBus = viewer.get('eventBus');

// you may hook into any of the following events
var events = [

events.forEach(function(event) {
  eventBus.on(event, function(e) {
    // e.element = the model element
    // e.gfx = the graphical element

    log(event, 'on',;


Does the #canvas element exist and is it visible in the DOM?


I am creating a jsp file with Bootstrap’s class Card , and used id= “canvas” to display. This worked fine with simple-bower example.

Following is the jsp:

<%@ page language="java" contentType="text/html; charset=US-ASCII"    pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>    <head>    <meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<link rel="stylesheet" href="/js/lib/bootstrap-4.0.0-beta-dist/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="/bpmn-js-0.22.1/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="/bpmn-js-0.22.1/dist/assets/bpmn-font/css/bpmn-embedded.css" />
  <style>    html, body, #canvas {      height: 400px;      font-family: 'Arial', sans-serif;    }  </style>
 <style>    .console {      width: 100%;      min-height: 80px;      border: none;      padding: 0;    }
            .console textarea {      width: 100%;      min-height: 80px;    }  </style>
<%@taglib prefix ="spring" uri=""%>
 <h1>Pizza Collaboration Viewer</h1>
  <div class="card" >          <div id="canvas" class="card-body">  </div>      </div>
 <div class="console">    <h3>console</h3>    <textarea id="js-console"></textarea>  </div>
<script src="/bpmn-js-0.22.1/dist/bpmn-viewer.js"></script>
<script src="/bpmn/interaction/app/app.js"></script>	  
<!-- Optional JavaScript -->    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
   <script src="/jsp/lib/bootstrap-4.0.0-beta-dist/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>    </html>


So what is the difference between your JSP and a plain HTML file, hosting the simple bower example?