<div id="canvas"></div>
#canvas {
  border: 1px solid;
  width: 100%;
  height: 35vh;
  min-height: 300px;
}
View Compiled
var canvas = $('#canvas');
var graph = new joint.dia.Graph();

var paper = new joint.dia.Paper({
  el: canvas,
  width: canvas.outerWidth(),
  height: canvas.outerHeight(),
  model: graph
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.9/joint.core.css

External JavaScript

  1. https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js
  4. https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js
  5. https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.js