Верхние нижние порты JointJs

Позиции портов рассчитываются в devs.Model.prototype.getPortAttrs. Что вы можете сделать, так это просто поменять местами координаты портов x и y, как в примере ниже.

joint.shapes.devs.Model = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {

   markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
   portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/></g>',

   defaults: joint.util.deepSupplement({

       type: 'devs.Model',
       size: { width: 1, height: 1 },

       inPorts: [],
       outPorts: [],

       attrs: {
            '.': { magnet: false },
           '.body': {
               width: 150, height: 250,
               stroke: 'black'
           },
           '.port-body': {
               r: 10,
               magnet: true,
               stroke: 'black'
           },
           text: {
               fill: 'black',
               'pointer-events': 'none'
           },
           '.label': { text: 'Model', 'ref-x': 10, 'ref-y': .2, 'ref': '.body' },

           // CHANGED: find better positions for port labels 
           '.inPorts .port-label': { dy:-30, x: 4 },
           '.outPorts .port-label':{ dy: 15, x: 4 }
           //
       }

   }, joint.shapes.basic.Generic.prototype.defaults),

   getPortAttrs: function(portName, index, total, selector, type) {

       var attrs = {};

       var portClass = 'port' + index;
       var portSelector = selector + '>.' + portClass;
       var portLabelSelector = portSelector + '>.port-label';
       var portBodySelector = portSelector + '>.port-body';

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

       // CHANGED: swap x and y ports coordinates ('ref-y' => 'ref-x')
       attrs[portSelector] = { ref: '.body', 'ref-x': (index + 0.5) * (1 / total) };
       // ('ref-dx' => 'ref-dy')
       if (selector === '.outPorts') { attrs[portSelector]['ref-dy'] = 0; }
       //

       return attrs;
   }
}));

JS Fiddle: http://jsfiddle.net/kumilingus/L2f73cbf/

Обновление:

Вот пример того, как добиться того же с JointJS v1.0.1+.

Больше нет необходимости расширять класс с помощью PortsModelInterface. API портов теперь реализован joint.dia.Element, т.е. произвольный элемент может быть легко дополнен портами.

var shape = new joint.shapes.devs.Model({
    inPorts: ['in1', 'in2'],
    outPorts: ['out1', 'out2'],
    ports: {
        groups: {
            'in': { position: 'top'},
            'out': { position: 'bottom' }
        }
    }
});

JSFiddle: http://jsfiddle.net/kumilingus/trk63agg/

Для получения дополнительной информации см. документы:

• API портов
• макеты портов

Просто измените название позиции в своем joint.shapes.devs.Model творении следующим образом:

new joint.shapes.devs.Model({
            position: { x: x, y: y },
            size: { width: 90, height: 90 },
            inPorts: ['in1'],
            outPorts:['out1'],
            attrs: {
                rect: { fill: '#2ECC71' },
                '.inPorts circle': {r:10, fill: '#16A085' },
                '.outPorts circle': { fill: '#E74C3C' }
            },
            ports: {
                groups: {
                    'in': {
                        position: {
                            name: 'top'
                        },
                        attrs: {
                            '.port-body': {
                                r: 1
                            }
                        }
                    },
                    'out': {
                        position: {
                            name: 'bottom'
                        },
                        attrs: {
                            '.port-body': {
                                r: 1
                            }
                        }
                    }
                }
            }
        });

Учтите, что название позиции изменилось на top и bottom.