JointJS demo

<!DOCTYPE html>
<html>

  <head>
    <link data-require="jointjs@*" rel="stylesheet" href="//rawgithub.com/clientIO/joint/master/dist/joint.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
    <script src="//rawgithub.com/clientIO/joint/master/dist/joint.js"></script>
  
  </head>

  <body>
    <div id="paper" class="paper"></div>
    
    <script src="script.js"></script>
  </body>

</html>

var graph = new joint.dia.Graph();

var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 800,
  height: 600,
  gridSize: 1,
  model: graph,
  snapLinks: true
});

var connect = function(source, sourcePort, target, targetPort) {
  var link = new joint.shapes.devs.Link({
    source: {
      id: source.id,
      port: sourcePort
    },
    target: {
      id: target.id,
      port: targetPort
    }
  });
  link.addTo(graph);
};

var c1 = new joint.shapes.devs.Coupled({
  position: {
    x: 230,
    y: 150
  },
  size: {
    width: 300,
    height: 300
  },
  inPorts: ['in'],
  outPorts: ['out 1', 'out 2']
});

var a1 = new joint.shapes.devs.Atomic({
markup: '<g class="rotatable"><g class="scalable"><path class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
    portMarkup: '<g class="port port<%= id %>"><path class="port-body"/><text class="port-label"/></g>',
    defaults: joint.util.deepSupplement({
        attrs: {
            '.body': { stroke: 'blue', fill: 'lightblue' },
            '.label': { 'ref-y': -30 },
            '.port-body': { stroke: 'gray', fill: 'lightgray', magnet: 'active', transform: 'translate(-235)' },
            '.inPorts .port-body': { transform: 'translate(-135)' },
            '.outPorts .port-body': { transform: 'translate(45)' },
            '.inPorts .port-label': { dx: -230 },
            '.outPorts .port-label': { dx: 210 }
        }

    }),
  position: {
    x: 360,
    y: 360
  },
  inPorts: ['xy'],
  outPorts: ['x', 'y']
});

var a2 = new joint.shapes.devs.Atomic({
  position: {
    x: 50,
    y: 260
  },
  outPorts: ['out']
});

var a3 = new joint.shapes.devs.Atomic({
  position: {
    x: 650,
    y: 150
  },
  size: {
    width: 100,
    height: 300
  },
  inPorts: ['a', 'b']
});

graph.addCells([c1, a1, a2, a3]);


connect(a2, 'out', c1, 'in');
connect(c1, 'in', a1, 'xy');
connect(a1, 'x', c1, 'out 1');
connect(a1, 'y', c1, 'out 2');
connect(c1, 'out 1', a3, 'a');
connect(c1, 'out 2', a3, 'b');

console.log('test');

 .joint-type-devs text {
            text-transform: uppercase;
            font-weight: 800;
        }

        .joint-type-devs .body {
            fill: #ffffff;
            stroke: #31d0c6;
            stroke-width: 6px;
        }

        .joint-type-devs .label {
            fill: #31d0c6;
            font-size: 16px;
        }

        .joint-type-devs .port-body {
            stroke: #ffffff;
            stroke-width: 3px;
            fill: #7c68fc;
        }

        .joint-type-devs .port-body:hover {
            opacity: 1;
            fill: #ff7e5d;
        }

        .joint-type-devs .port-label {
            fill: #7c68fc;
        }

        .joint-type-devs.joint-type-devs-coupled .body {
            stroke: #feb663;
        }

        .joint-type-devs.joint-type-devs-coupled .label {
            fill: #feb663;
        }

        /* links */

        .link .connection {
            stroke: #4B4F6A;
            stroke-width: 4px;
        }

        .link .marker-arrowhead, .link .marker-vertex {
            fill: #31D0C6;
        }
        .link .marker-arrowhead:hover {
            fill: #F39C12;
        }

        .link-tools .tool-remove circle {
            fill: #fe854f;
        }

        /* highlighting */

        .joint-type-devs.highlighted-parent .body {
            stroke: #fe854f;
            transition: stroke 1s;
        }

        .joint-type-devs.highlighted-parent .label {
            fill: #fe854f;
            transition: fill 1s;
            text-decoration: underline;
        }