JointJS Manhattan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/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.devs.Decision = joint.shapes.devs.Model.extend({
    markup: '<g class="rotatable"><g class="scalable"><path/></g>' +
        '<text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
    defaults: window.joint.util.deepSupplement({
        type: 'devs.Decision',
        attrs: {
            path: {
                d: 'M 30 0 L 60 30 30 60 0 30 z',
                stroke: '#558ED5',
                fill: '#DCE6F2',
                'stroke-width': '2'
            },
            circle: {
                stroke: 'gray',
                fill: '#262626',
                r: '4',
                magnet: 'true'
            },
                '.label': {
                text: 'DECISION',
                'ref-x': 0.7,
                'ref-y': 40,
                    'x-alignment': 'middle',
                'y-alignment': 5,
                ref: 'path'
            },
                '.port-body': {
                r: '5',
                fill: '#262626',
                magnet: 'true'
            },
            //'.inPorts circle': { 'ref-x': 24, 'ref-y': 5 },
            //'.outPorts circle': { 'ref-x': 24, 'ref-y': 5 },
            '.inPorts text, .outPorts text': {
                visibility: 'hidden'
            }
        },
    }, joint.shapes.devs.Model.prototype.defaults),

    getPortAttrs: function (portName, index, total, selector, type) {
        var attrs = {};
        var portClass = 'port' + index;
        var portSelector = selector + '>.' + portClass;
        var portTextSelector = portSelector + '>text';
        var portCircleSelector = portSelector + '>circle';

        attrs[portTextSelector] = {
            text: portName
        };
        attrs[portCircleSelector] = {
            port: {
                id: portName || _.uniqueId(type),
                type: type
     ...