JointJS v1.0.1 - devs.TopBottomModel

an element with ports located at the top and bottom.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.1/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/1.0.2/joint.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/1.0.2/joint.css">
<!-- JointJS Fiddle -->
<div id="paper"></div>

CSS

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

JavaScript

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

var model = new joint.shapes.devs.Model({
  position: {
    x: 200,
    y: 200
  },
  size: {
    width: 100,
    height: 100
  },
  attrs: {
    text: {
      text: 'Top\nBottom\nModel'
    }
  },
  inPorts: ['a'],
  outPorts: ['b', 'c'],
  ports: {
    groups: {
      'in': {
        position: 'top',
        label: {
          position: 'outside'
        }
      },
      'out': {
        position: 'bottom',
        label: {
          position: 'outside'
        }
      }
    }
  }
});

graph.addCell(model);