JointJS devs.Model with Image

A special markup for devs.Model allowing to embed an image inside the element body.

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.devs.MyImageModel = joint.shapes.devs.Model.extend({

  markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><image/><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',

  defaults: joint.util.deepSupplement({

    type: 'devs.MyImageModel',
    size: {
      width: 80,
      height: 80
    },
    attrs: {
      rect: {
        stroke: '#d1d1d1',
        fill: {
          type: 'linearGradient',
          stops: [{
            offset: '0%',
            color: 'white'
          }, {
            offset: '50%',
            color: '#d1d1d1'
          }],
          attrs: {
            x1: '0%',
            y1: '0%',
            x2: '0%',
            y2: '100%'
          }
        }
      },
      circle: {
        stroke: 'gray'
      },
      '.label': {
        text: 'My Shape',
        'ref-y': -20
      },
      '.inPorts circle': {
        fill: '#c8c8c8'
      },
      '.outPorts circle': {
        fill: '#262626'
      },
      image: {
        'xlink:href': 'https://uploads-ssl.webflow.com/5773a44a2de39fb074c75653/57e10aaec73be37b63d3ce45_722d9578d7be2bb5781f04b5754d78f7.jpg',
        width: 80,
        height: 50,
        'ref-x': .5,
        'ref-y': .5,
        ref: 'rect',
        'x-alignment': 'middle',
        'y-alignment': 'middle'
      }
    }

  }, joint.shapes.devs.Model.prototype.defaults)
});

joint.shapes.devs.MyImageModelView = joint.shapes.devs.ModelView;

// Usage:

var imageModel = new joint.shapes.devs.MyImageModel({
  position: {
    x: 200,
    y: 250
  },
  size: {
    width: 150,
    height: 100
  },
  inPorts: ['in1', 'in2'],
  outPorts: ['out']
});

graph.addCell(imageModel);