Joint.js adiciona portas personalizadas com a classe de caminho. para elementos personalizados

O que estou tentando fazer é criar um elemento com classe personalizada para portas e caminho, para que eu possa adicionar um elemento com caminho personalizado e minha própria marcação para portas. Dessa maneira, ao criar um elemento, passarei o caminho dinâmico apenas para sua forma. como elementos da classe path se comportam e, como também estendi o PortsModelInterface, também terei minha própria marcação para ports. Todo esse esforço é para tornar o svg escalável para zomming. Anteriormente, eu estava usando o elemento personalizado html com minhas portas personalizadas, o que funcionava bem, mas o html dos elementos personalizados não era redimensionado no zoom

var graph = new joint.dia.
var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 800,
    height: 600,
    gridSize: 1,
    model: graph,
    snapLinks: true,
    embeddingMode: true
});
joint.shapes.custom1={};
 joint.shapes.custom1.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
        markup: '<g class="rotatable"><g class="scalable"><rect class = "myrect"/></g><g class="inPorts"/><g class="outPorts"/></g>',
        portMarkup: '<g class="port<%= id %>"><circle class="port-body"/></g>',
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            size: { width: 200, height: 110 },
            inPorts: [],
            outPorts: [],
            attrs: {
                '.': { magnet: true},
                rect: {
                    stroke: 'none', 'fill-opacity': 0, width: 300, height: 210,
                },
                circle: {
                    r: 6, //circle radius
                    magnet: true,
          left:0,
                    stroke: 'gray'
                },

                '.inPorts circle': { fill: 'gray', magnet: 'passive', type: 'input', y: 0},
                '.outPorts circle': { fill: 'gray', type: 'output' }
            }
        }, joint.shapes.basic.Generic.prototype.defaults),
        getPortAttrs: function (portName, index, total, selector, type) {

            var attrs = {};
            var portClass = 'port' + index;
            var portSelector = selector + '>.' + portClass;
            var portCircleSelector = portSelector + '>circle';
            attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type), type: type } };
            attrs[portSelector] = { ref: 'rect', 'ref-x': (index + 1) * (0.55 / total)};
            if (selector === '.outPorts') { 
          attrs[portSelector]['ref-dy'] = 15; 
      }
            return attrs;
        }
    }));
joint.shapes.custom1.Atomic = joint.shapes.custom1.Element.extend({

    markup: '<g class="rotatable"><g class="scalable"><path/></g><text/></g>',

    defaults: joint.util.deepSupplement({

        type: 'basic.Path',
        size: { width: 60, height: 60 },
        attrs: {
            'path': { fill: '#FFFFFF', stroke: 'black' },
            'text': { 'font-size': 14, text: '', 'text-anchor': 'middle', 'ref-x': .5, 'ref-dy': 20, ref: 'path', 'y-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
        }
    }, joint.shapes.basic.Generic.prototype.defaults)

});

var a2 = new joint.shapes.custom1.Atomic({
    position: { x: 50, y: 260 },
    size: { width: 100, height: 100 },
    attrs: {
        path: { d: 'M 30 0 L 60 30 30 60 0 30 z' },
        text: {
            text: 'Diamond',
            'ref-y': .5 // basic.Path text is originally positioned under the element
        }
    },
     inPorts: ['in'],
     outPorts: ['out']
});
graph.addCells([a2])

O elemento é adicionado no gráfico, mas de alguma forma como as portas não aparecem. Eu não tenho um conceito adequado de adição de classes, portanto, qualquer ajuda será muito apreciada. Obrigado.Exemplo de violino