Rappid Fiddle Template

by Roman Bruckner

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://resources.jointjs.com/demos/rappid/build/package/rappid.js"></script>
<link rel="stylesheet" href="https://resources.jointjs.com/demos/rappid/build/package/rappid.css">
<!-- JointJS Fiddle -->
<div id="paper"></div>

CSS

#paper {
    display: inline-block;
    border: 1px solid gray;
    background-color: lightgray;
}

JavaScript

var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    width: 600,
    height: 600,
    gridSize: 20,
    model: graph
});