JointJS - Stack Element

An element representing stack of elements.

HTML

<script src="https://code.jquery.com/jquery-2.0.3.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.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/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
});

joint.shapes.orgChart = {};
joint.shapes.orgChart.Node = joint.dia.Element.extend({

  markup: '<g class="rotatable"><g class="scalable"><rect class="card3"/><rect class="card2"/><rect class="card"/></g><text class="content"/><path class="expand"/></g>',

  defaults: joint.util.deepSupplement({

    type: 'orgChart.Node',
    size: {
      width: 260,
      height: 90
    },
    attrs: {

      '.card': {
        'ref-width': 1,
        'ref-height': 1,
        'stroke': '#000000',
        'stroke-width': 1,
        fill: '#FFFFFF',
        stroke: '#000000',
        'stroke-width': 1,
        'pointer-events': 'visiblePainted',
        rx: 10,
        ry: 10
      },
      '.card2': {
        x: 10,
        y: 10,
        'ref-width': 1,
        'ref-height': 1,
        'stroke': '#000000',
        'stroke-width': 1,
        fill: '#F2F2F2',
        stroke: '#000000',
        'stroke-width': 1,
        'pointer-events': 'visiblePainted',
        rx: 10,
        ry: 10
      },
      '.card3': {
        x: 20,
        y: 20,
        'ref-width': 1,
        'ref-height': 1,
        'stroke': '#000000',
        'stroke-width': 1,
        fill: '#F2F2F2',
        stroke: '#000000',
        'stroke-width': 1,
        'pointer-events': 'visiblePainted',
        rx: 10,
        ry: 10
      },
      '.content': {
        'font-weight': 500,
        'font-family': 'Courier New',
        'font-size': 16,
        'text-anchor': 'middle',
        ref: '.card',
        'ref-x': .5,
        'ref-y': 10
      },

      '.expand': {
        ref: '.card',
        'ref-dx': -25,
        'ref-y': 10,
        'fill': '#ffffff',
        'stroke': '#000000',
        'stroke-width': 1,
        'd': 'M 10 0 10 20 M 0 10 20 10'
      }
    },
    z: 3
  }, joint.dia.Element.prototype.defaults)

});

var el1 = new...