JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.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.2.1/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.5/joint.core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.5/joint.shapes.devs.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.5/joint.core.css">
<h1>JointJS</h1>
<div id="graph-container">
<div id="graph-big" class="graph-container"></div>
<div id="graph-small" class="graph-container"></div>
</div>
CSS
#graph-container {
border: 1px solid blue;
}
.graph-container > svg {
border: 1px solid red;
}
JavaScript
$(function () {
joint.shapes.devs.SBModel = joint.shapes.devs.Model.extend({
portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/></g>',
defaults: joint.util.deepSupplement({
type: 'devs.SBModel',
attrs: {
'.body': {
stroke: 'red',
fill: 'yellow'
}
}
}, joint.shapes.devs.Model.prototype.defaults)
});
joint.shapes.devs.SBModelView = joint.dia.ElementView.extend(joint.shapes.devs.ModelView);
var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
el: $("#graph-big"),
width: 600,
height: 400,
model: graph,
gridSize: 1
});
var sbModel = new joint.shapes.devs.SBModel({
position: {
x: 150,
y: 150
},
size: {
width: 190,
height: 190
},
inPorts: ['in1', 'in2'],
outPorts: ['out'],
attrs: {
'.label': {
text: 'Model',
'ref-x': .4,
'ref-y': .2
}
}
});
var model = new joint.shapes.devs.Model({
position: {
x: 200,
y: 50
},
size: {
width: 90,
height: 90
},
inPorts: ['in1', 'in2'],
outPorts: ['out'],
attrs: {
'.label': {
text: 'Model',
'ref-x': .4,
'ref-y': .2
}
}
});
graph.addCells([sbModel, model]);
});