bpmn-js 8.8.0 → 9.0.0-subprocesses.1

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v8.8.0
+ * bpmn-js - bpmn-modeler v9.0.0-subprocesses.1
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2021-10-13
+ * Date: 2021-10-26
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2337,13 +2337,14 @@
 	  eventBus.on([ 'render.shape', 'render.connection' ], renderPriority, function(evt, context) {
 	    var type = evt.type,
 	        element = context.element,
-	        visuals = context.gfx;
+	        visuals = context.gfx,
+	        attrs = context.attrs;
 
 	    if (self.canRender(element)) {
 	      if (type === 'render.shape') {
-	        return self.drawShape(visuals, element);
+	        return self.drawShape(visuals, element, attrs);
 	      } else {
-	        return self.drawConnection(visuals, element);
+	        return self.drawConnection(visuals, element, attrs);
 	      }
 	    }
 	  });
@@ -2803,7 +2804,7 @@
 	  return true;
 	};
 
-	DefaultRenderer.prototype.drawShape = function drawShape(visuals, element) {
+	DefaultRenderer.prototype.drawShape = function drawShape(visuals, element, attrs) {
 	  var rect = create$1('rect');
 
 	  attr(rect, {
@@ -2814,9 +2815,9 @@
 	  });
 
 	  if (isFrameElement$1(element)) {
-	    attr(rect, this.FRAME_STYLE);
+	    attr(rect, assign({}, this.FRAME_STYLE, attrs || {}));
 	  } else {
-	    attr(rect, this.SHAPE_STYLE);
+	    attr(rect, assign({}, this.SHAPE_STYLE, attrs || {}));
 	  }
 
 	  append(visuals, rect);
@@ -2824,9 +2825,9 @@
 	  return rect;
 	};
 
-	DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection) {
+	DefaultRenderer.prototype.drawConnection = function drawConnection(visuals, connection, attrs) {
 
-	  var line = createLine(connection.waypoints, this.CONNECTION_STYLE);
+	  var line = createLine(connection.waypoints, assign({}, this.CONNECTION_STYLE, attrs || {}));
 	  append(visuals, line);
 
 	  return line;
@@ -14940,10 +14941,74 @@
 	  return '<' + e.$type + (e.id ? ' id="' + e.id : '') + '" />';
 	}
 
-	var diRefs = new Refs(
-	  { name: 'bpmnElement', enumerable: true },
-	  { name: 'di', configurable: true }
-	);
+	// TODO(nikku): remove with future bpmn-js version
+
+	/**
+	 * Wraps APIs to check:
+	 *
+	 * 1) If a callback is passed -> Warn users about callback deprecation.
+	 * 2) If Promise class is implemented in current environment.
+	 *
+	 * @private
+	 */
+	function wrapForCompatibility(api) {
+
+	  return function() {
+
+	    if (!window.Promise) {
+	      throw new Error('Promises is not supported in this environment. Please polyfill Promise.');
+	    }
+
+	    var argLen = arguments.length;
+	    if (argLen >= 1 && isFunction(arguments[argLen - 1])) {
+
+	      var callback = arguments[argLen - 1];
+
+	      console.warn(new Error(
+	        'Passing callbacks to ' + api.name + ' is deprecated and will be removed in a future major release. ' +
+	        'Please switch to promises: https://bpmn.io/l/moving-to-promises.html'
+	      ));
+
+	      var argsWithoutCallback = Array.prototype.slice.call(arguments, 0, -1);
+
+	      api.apply(this, argsWithoutCallback).then(function(result) {
+
+	        var firstKey = Object.keys(result)[0];
+
+	        // The APIs we are wrapping all resolve a single item depending on the API.
+	        // For instance, importXML resolves { warnings } and saveXML returns { xml }.
+	        // That's why we can call the callback with the first item of result.
+	        return callback(null, result[firstKey]);
+
+	        // Passing a second paramter instead of catch because we don't want to
+	        // catch errors thrown by callback().
+	      }, function(err) {
+
+	        return callback(err, err.warnings);
+	      });
+	    } else {
+
+	      return api.apply(this, arguments);
+	    }
+	  };
+	}
+
+
+	// TODO(nikku): remove with future bpmn-js version
+
+	var DI_ERROR_MESSAGE = 'Tried to access di from the businessObject. The di is available through the diagram element only. For more information, see https://github.com/bpmn-io/bpmn-js/issues/1472';
+
+	function ensureCompatDiRef(businessObject) {
+
+	  // bpmnElement can have multiple independent DIs
+	  if (!has(businessObject, 'di')) {
+	    Object.defineProperty(businessObject, 'di', {
+	      get: function() {
+	        throw new Error(DI_ERROR_MESSAGE);
+	      }
+	    });
+	  }
+	}
 
 	/**
 	 * Returns true if an element has the given meta-model type
@@ -14978,6 +15043,8 @@
 	  // prerequisites are drawn
 	  var deferred = [];
 
+	  var diMap = {};
+
 	  // Helpers //////////////////////
 
 	  function contextual(fn, ctx) {
@@ -15006,17 +15073,17 @@
 	    }
 
 	    // call handler
-	    return handler.element(element, ctx);
+	    return handler.element(element, diMap[element.id], ctx);
 	  }
 
 	  function visitRoot(element, diagram) {
-	    return handler.root(element, diagram);
+	    return handler.root(element, diMap[element.id], diagram);
 	  }
 
 	  function visitIfDi(element, ctx) {
 
 	    try {
-	      var gfx = element.di && visit(element, ctx);
+	      var gfx = diMap[element.id] && visit(element, ctx);
 
 	      handled(element);
 
@@ -15039,7 +15106,7 @@
 	    var bpmnElement = di.bpmnElement;
 
 	    if (bpmnElement) {
-	      if (bpmnElement.di) {
+	      if (diMap[bpmnElement.id]) {
 	        logError(
 	          translate('multiple DI elements defined for {element}', {
 	            element: elementToString(bpmnElement)
@@ -15047,8 +15114,9 @@
 	          { element: bpmnElement }
 	        );
 	      } else {
-	        diRefs.bind(bpmnElement, 'di');
-	        bpmnElement.di = di;
+	        diMap[bpmnElement.id] = di;
+
+	        ensureCompatDiRef(bpmnElement);
 	      }
 	    } else {
 	      logError(
@@ -15105,6 +15173,7 @@
 	    }
 
 	    // load DI from selected diagram only
+	    diMap = {};
 	    handleDiagram(diagram);
 
 
@@ -15144,10 +15213,10 @@
 
 	    var ctx = visitRoot(rootElement, plane);
 
-	    if (is$2(rootElement, 'bpmn:Process')) {
+	    if (is$2(rootElement, 'bpmn:Process') || is$2(rootElement, 'bpmn:SubProcess')) {
 	      handleProcess(rootElement, ctx);
 	    } else if (is$2(rootElement, 'bpmn:Collaboration')) {
-	      handleCollaboration(rootElement);
+	      handleCollaboration(rootElement, ctx);
 
 	      // force drawing of everything not yet drawn that is part of the target DI
 	      handleUnhandledProcesses(definitions.rootElements, ctx);
@@ -15354,15 +15423,15 @@
 	    }
 	  }
 
-	  function handleCollaboration(collaboration) {
+	  function handleCollaboration(collaboration, context) {
 
-	    forEach(collaboration.participants, contextual(handleParticipant));
+	    forEach(collaboration.participants, contextual(handleParticipant, context));
 
-	    handleArtifacts(collaboration.artifacts);
+	    handleArtifacts(collaboration.artifacts, context);
 
 	    // handle message flows latest in the process
 	    deferred.push(function() {
-	      handleMessageFlows(collaboration.messageFlows);
+	      handleMessageFlows(collaboration.messageFlows, context);
 	    });
 	  }
 
@@ -15421,7 +15490,8 @@
 
 	  var importer,
 	      eventBus,
-	      translate;
+	      translate,
+	      canvas;
 
 	  var error,
 	      warnings = [];
@@ -15437,12 +15507,12 @@
 
 	    var visitor = {
 
-	      root: function(element) {
-	        return importer.add(element);
+	      root: function(element, di) {
+	        return importer.add(element, di);
 	      },
 
-	      element: function(element, parentShape) {
-	        return importer.add(element, parentShape);
+	      element: function(element, di, parentShape) {
+	        return importer.add(element, di, parentShape);
 	      },
 
 	      error: function(message, context) {
@@ -15454,7 +15524,16 @@
 
 	    // traverse BPMN 2.0 document model,
 	    // starting at definitions
-	    walker.handleDefinitions(definitions, bpmnDiagram);
+	    if (!bpmnDiagram && definitions.diagrams) {
+	      for (var i = 0; i < definitions.diagrams.length; i++) {
+	        walker.handleDefinitions(definitions, definitions.diagrams[i]);
+	      }
+	    } else {
+	      walker.handleDefinitions(definitions, bpmnDiagram);
+	    }
+
+	    var mainDiagram = bpmnDiagram || definitions.diagrams[0];
+	    canvas.setActivePlane(mainDiagram.plane.bpmnElement.id);
 	  }
 
 	  return new Promise(function(resolve, reject) {
@@ -15462,6 +15541,7 @@
 	      importer = diagram.get('bpmnImporter');
 	      eventBus = diagram.get('eventBus');
 	      translate = diagram.get('translate');
+	      canvas = diagram.get('canvas');
 
 	      eventBus.fire('import.render.start', { definitions: definitions });
 
@@ -15481,58 +15561,6 @@
 	  });
 	}
 
-	// TODO(nikku): remove with future bpmn-js version
-
-	/**
-	 * Wraps APIs to check:
-	 *
-	 * 1) If a callback is passed -> Warn users about callback deprecation.
-	 * 2) If Promise class is implemented in current environment.
-	 *
-	 * @private
-	 */
-	function wrapForCompatibility(api) {
-
-	  return function() {
-
-	    if (!window.Promise) {
-	      throw new Error('Promises is not supported in this environment. Please polyfill Promise.');
-	    }
-
-	    var argLen = arguments.length;
-	    if (argLen >= 1 && isFunction(arguments[argLen - 1])) {
-
-	      var callback = arguments[argLen - 1];
-
-	      console.warn(new Error(
-	        'Passing callbacks to ' + api.name + ' is deprecated and will be removed in a future major release. ' +
-	        'Please switch to promises: https://bpmn.io/l/moving-to-promises.html'
-	      ));
-
-	      var argsWithoutCallback = Array.prototype.slice.call(arguments, 0, -1);
-
-	      api.apply(this, argsWithoutCallback).then(function(result) {
-
-	        var firstKey = Object.keys(result)[0];
-
-	        // The APIs we are wrapping all resolve a single item depending on the API.
-	        // For instance, importXML resolves { warnings } and saveXML returns { xml }.
-	        // That's why we can call the callback with the first item of result.
-	        return callback(null, result[firstKey]);
-
-	        // Passing a second paramter instead of catch because we don't want to
-	        // catch errors thrown by callback().
-	      }, function(err) {
-
-	        return callback(err, err.warnings);
-	      });
-	    } else {
-
-	      return api.apply(this, arguments);
-	    }
-	  };
-	}
-
 	/**
 	 * This file must not be changed or exchanged.
 	 *
@@ -16112,19 +16140,6 @@
 	    return;
 	  }
 
-	  // remove businessObject#di binding
-	  //
-	  // this is necessary, as we establish the bindings
-	  // in the BpmnTreeWalker (and assume none are given
-	  // on reimport)
-	  this.get('elementRegistry').forEach(function(element) {
-	    var bo = element.businessObject;
-
-	    if (bo && bo.di) {
-	      delete bo.di;
-	    }
-	  });
-
 	  // remove drawn elements
 	  Diagram.prototype.clear.call(this);
 	};
@@ -16453,14 +16468,31 @@
 	  return (element && element.businessObject) || element;
 	}
 
-	function isExpanded(element) {
+	/**
+	 * Return the di object for a given element.
+	 *
+	 * @param  {djs.model.Base} element
+	 *
+	 * @return {ModdleElement}
+	 */
+	function getDi(element) {
+	  return element && element.di;
+	}
+
+	function isExpanded(element, di) {
 
 	  if (is$1(element, 'bpmn:CallActivity')) {
 	    return false;
 	  }
 
 	  if (is$1(element, 'bpmn:SubProcess')) {
-	    return getBusinessObject(element).di && !!getBusinessObject(element).di.isExpanded;
+	    di = di || getDi(element);
+
+	    if (di && is$1(di, 'bpmndi:BPMNPlane')) {
+	      return true;
+	    }
+
+	    return di && !!di.isExpanded;
 	  }
 
 	  if (is$1(element, 'bpmn:Participant')) {
@@ -16605,10 +16637,6 @@
 	  return element.isCollection || (dataObject && dataObject.isCollection);
 	}
 
-	function getDi(element) {
-	  return element.businessObject.di;
-	}
-
 	function getSemantic(element) {
 	  return element.businessObject;
 	}
@@ -17041,8 +17069,8 @@
 	  }
 
 	  function as(type) {
-	    return function(parentGfx, element) {
-	      return handlers[type](parentGfx, element);
+	    return function(parentGfx, element, attrs) {
+	      return handlers[type](parentGfx, element, attrs);
 	    };
 	  }
 
@@ -17050,58 +17078,58 @@
 	    return handlers[type];
 	  }
 
-	  function renderEventContent(element, parentGfx) {
+	  function renderEventContent(element, parentGfx, attrs) {
 
 	    var event = getSemantic(element);
 	    var isThrowing = isThrowEvent(event);
 
 	    if (event.eventDefinitions && event.eventDefinitions.length>1) {
 	      if (event.parallelMultiple) {
-	        return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, isThrowing);
+	        return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, attrs, isThrowing);
 	      }
 	      else {
-	        return renderer('bpmn:MultipleEventDefinition')(parentGfx, element, isThrowing);
+	        return renderer('bpmn:MultipleEventDefinition')(parentGfx, element, attrs, isThrowing);
 	      }
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:MessageEventDefinition')) {
-	      return renderer('bpmn:MessageEventDefinition')(parentGfx, element, isThrowing);
+	      return renderer('bpmn:MessageEventDefinition')(parentGfx, element, attrs, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:TimerEventDefinition')) {
-	      return renderer('bpmn:TimerEventDefinition')(parentGfx, element, isThrowing);
+	      return renderer('bpmn:TimerEventDefinition')(parentGfx, element, attrs, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:ConditionalEventDefinition')) {
-	      return renderer('bpmn:ConditionalEventDefinition')(parentGfx, element);
+	      return renderer('bpmn:ConditionalEventDefinition')(parentGfx, element, attrs);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:SignalEventDefinition')) {
-	      return renderer('bpmn:SignalEventDefinition')(parentGfx, element, isThrowing);
+	      return renderer('bpmn:SignalEventDefinition')(parentGfx, element, attrs, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:EscalationEventDefinition')) {
-	      return renderer('bpmn:EscalationEventDefinition')(parentGfx, element, isThrowing);
+	      return renderer('bpmn:EscalationEventDefinition')(parentGfx, element, attrs, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:LinkEventDefinition')) {
-	      return renderer('bpmn:LinkEventDefinition')(parentGfx, element, isThrowing);
+	      return renderer('bpmn:LinkEventDefinition')(parentGfx, element, attrs, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:ErrorEventDefinition')) {
-	      return renderer('bpmn:ErrorEventDefinition')(parentGfx, element, isThrowing);
+	      return renderer('bpmn:ErrorEventDefinition')(parentGfx, element, attrs, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:CancelEventDefinition')) {
-	      return renderer('bpmn:CancelEventDefinition')(parentGfx, element, isThrowing);
+	      return renderer('bpmn:CancelEventDefinition')(parentGfx, element, attrs, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:CompensateEventDefinition')) {
-	      return renderer('bpmn:CompensateEventDefinition')(parentGfx, element, isThrowing);
+	      return renderer('bpmn:CompensateEventDefinition')(parentGfx, element, attrs, isThrowing);
 	    }
 
 	    if (isTypedEvent(event, 'bpmn:TerminateEventDefinition')) {
-	      return renderer('bpmn:TerminateEventDefinition')(parentGfx, element, isThrowing);
+	      return renderer('bpmn:TerminateEventDefinition')(parentGfx, element, attrs, isThrowing);
 	    }
 
 	    return null;
@@ -17124,20 +17152,20 @@
 	    return text;
 	  }
 
-	  function renderEmbeddedLabel(parentGfx, element, align) {
+	  function renderEmbeddedLabel(parentGfx, element, align, attrs) {
 	    var semantic = getSemantic(element);
 
 	    return renderLabel(parentGfx, semantic.name, {
 	      box: element,
 	      align: align,
 	      padding: 5,
-	      style: {
+	      style: assign({
 	        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-	      }
+	      }, attrs)
 	    });
 	  }
 
-	  function renderExternalLabel(parentGfx, element) {
+	  function renderExternalLabel(parentGfx, element, attrs) {
 
 	    var box = {
 	      width: 90,
@@ -17154,21 +17182,22 @@
 	        textRenderer.getExternalStyle(),
 	        {
 	          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-	        }
+	        },
+	        attrs
 	      )
 	    });
 	  }
 
-	  function renderLaneLabel(parentGfx, text, element) {
+	  function renderLaneLabel(parentGfx, text, element, attrs) {
 	    var textBox = renderLabel(parentGfx, text, {
 	      box: {
 	        height: 30,
 	        width: element.height
 	      },
 	      align: 'center-middle',
-	      style: {
+	      style: assign({
 	        fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-	      }
+	      }, attrs)
 	    });
 
 	    var top = -1 * element.height;
@@ -17195,11 +17224,11 @@
 
 	      return drawCircle(parentGfx, element.width, element.height, attrs);
 	    },
-	    'bpmn:StartEvent': function(parentGfx, element) {
-	      var attrs = {
+	    'bpmn:StartEvent': function(parentGfx, element, attrs) {
+	      attrs = assign({
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      };
+	      }, attrs);
 
 	      var semantic = getSemantic(element);
 
@@ -17218,7 +17247,7 @@
 
 	      return circle;
 	    },
-	    'bpmn:MessageEventDefinition': function(parentGfx, element, isThrowing) {
+	    'bpmn:MessageEventDefinition': function(parentGfx, element, attrs, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_MESSAGE', {
 	        xScaleFactor: 0.9,
 	        yScaleFactor: 0.9,
@@ -17233,20 +17262,24 @@
 	      var fill = isThrowing ? getStrokeColor$1(element, defaultStrokeColor) : getFillColor(element, defaultFillColor);
 	      var stroke = isThrowing ? getFillColor(element, defaultFillColor) : getStrokeColor$1(element, defaultStrokeColor);
 
-	      var messagePath = drawPath(parentGfx, pathData, {
+	      attrs = assign({
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: stroke
-	      });
+	      }, attrs);
+
+	      var messagePath = drawPath(parentGfx, pathData, attrs);
 
 	      return messagePath;
 	    },
-	    'bpmn:TimerEventDefinition': function(parentGfx, element) {
-	      var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
+	    'bpmn:TimerEventDefinition': function(parentGfx, element, attrs) {
+	      var outerAttrs = assign({
 	        strokeWidth: 2,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, outerAttrs);
 
 	      var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {
 	        xScaleFactor: 0.75,
@@ -17259,11 +17292,13 @@
 	        }
 	      });
 
-	      drawPath(parentGfx, pathData, {
+	      var innerAttrs = assign({
 	        strokeWidth: 2,
 	        strokeLinecap: 'square',
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      drawPath(parentGfx, pathData, innerAttrs);
 
 	      for (var i = 0;i < 12; i++) {
 
@@ -17281,17 +17316,25 @@
 	        var width = element.width / 2;
 	        var height = element.height / 2;
 
-	        drawPath(parentGfx, linePathData, {
+	        var lineAttrs = assign({
 	          strokeWidth: 1,
 	          strokeLinecap: 'square',
 	          transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
 	          stroke: getStrokeColor$1(element, defaultStrokeColor)
-	        });
+	        }, attrs);
+
+	        drawPath(parentGfx, linePathData, lineAttrs);
 	      }
 
 	      return circle;
 	    },
-	    'bpmn:EscalationEventDefinition': function(parentGfx, event, isThrowing) {
+	    'bpmn:EscalationEventDefinition': function(parentGfx, event, attrs, isThrowing) {
+	      attrs = assign({
+	        strokeWidth: 1,
+	        fill: fill,
+	        stroke: getStrokeColor$1(event, defaultStrokeColor)
+	      }, attrs);
+
 	      var pathData = pathMap.getScaledPath('EVENT_ESCALATION', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -17305,13 +17348,14 @@
 
 	      var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';
 
-	      return drawPath(parentGfx, pathData, {
+	      return drawPath(parentGfx, pathData, attrs);
+	    },
+	    'bpmn:ConditionalEventDefinition': function(parentGfx, event, attrs) {
+	      attrs = assign({
 	        strokeWidth: 1,
-	        fill: fill,
 	        stroke: getStrokeColor$1(event, defaultStrokeColor)
-	      });
-	    },
-	    'bpmn:ConditionalEventDefinition': function(parentGfx, event) {
+	      }, attrs);
+
 	      var pathData = pathMap.getScaledPath('EVENT_CONDITIONAL', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -17323,12 +17367,9 @@
 	        }
 	      });
 
-	      return drawPath(parentGfx, pathData, {
-	        strokeWidth: 1,
-	        stroke: getStrokeColor$1(event, defaultStrokeColor)
-	      });
+	      return drawPath(parentGfx, pathData, attrs);
 	    },
-	    'bpmn:LinkEventDefinition': function(parentGfx, event, isThrowing) {
+	    'bpmn:LinkEventDefinition': function(parentGfx, event, attrs, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_LINK', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -17342,13 +17383,15 @@
 
 	      var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';
 
-	      return drawPath(parentGfx, pathData, {
+	      attrs = assign({
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: getStrokeColor$1(event, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      return drawPath(parentGfx, pathData, attrs);
 	    },
-	    'bpmn:ErrorEventDefinition': function(parentGfx, event, isThrowing) {
+	    'bpmn:ErrorEventDefinition': function(parentGfx, event, attrs, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_ERROR', {
 	        xScaleFactor: 1.1,
 	        yScaleFactor: 1.1,
@@ -17362,13 +17405,15 @@
 
 	      var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';
 
-	      return drawPath(parentGfx, pathData, {
+	      attrs = assign({
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: getStrokeColor$1(event, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      return drawPath(parentGfx, pathData, attrs);
 	    },
-	    'bpmn:CancelEventDefinition': function(parentGfx, event, isThrowing) {
+	    'bpmn:CancelEventDefinition': function(parentGfx, event, attrs, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_CANCEL_45', {
 	        xScaleFactor: 1.0,
 	        yScaleFactor: 1.0,
@@ -17382,17 +17427,19 @@
 
 	      var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';
 
-	      var path = drawPath(parentGfx, pathData, {
+	      attrs = assign({
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: getStrokeColor$1(event, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      var path = drawPath(parentGfx, pathData, attrs);
 
 	      rotate(path, 45);
 
 	      return path;
 	    },
-	    'bpmn:CompensateEventDefinition': function(parentGfx, event, isThrowing) {
+	    'bpmn:CompensateEventDefinition': function(parentGfx, event, attrs, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_COMPENSATION', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -17406,13 +17453,15 @@
 
 	      var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';
 
-	      return drawPath(parentGfx, pathData, {
+	      attrs = assign({
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: getStrokeColor$1(event, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      return drawPath(parentGfx, pathData, attrs);
 	    },
-	    'bpmn:SignalEventDefinition': function(parentGfx, event, isThrowing) {
+	    'bpmn:SignalEventDefinition': function(parentGfx, event, attrs, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_SIGNAL', {
 	        xScaleFactor: 0.9,
 	        yScaleFactor: 0.9,
@@ -17426,13 +17475,15 @@
 
 	      var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';
 
-	      return drawPath(parentGfx, pathData, {
+	      attrs = assign({
 	        strokeWidth: 1,
 	        fill: fill,
 	        stroke: getStrokeColor$1(event, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      return drawPath(parentGfx, pathData, attrs);
 	    },
-	    'bpmn:MultipleEventDefinition': function(parentGfx, event, isThrowing) {
+	    'bpmn:MultipleEventDefinition': function(parentGfx, event, attrs, isThrowing) {
 	      var pathData = pathMap.getScaledPath('EVENT_MULTIPLE', {
 	        xScaleFactor: 1.1,
 	        yScaleFactor: 1.1,
@@ -17446,12 +17497,14 @@
 
 	      var fill = isThrowing ? getStrokeColor$1(event, defaultStrokeColor) : 'none';
 
-	      return drawPath(parentGfx, pathData, {
+	      attrs = assign({
 	        strokeWidth: 1,
 	        fill: fill
-	      });
+	      }, attrs);
+
+	      return drawPath(parentGfx, pathData, attrs);
 	    },
-	    'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event) {
+	    'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event, attrs) {
 	      var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {
 	        xScaleFactor: 1.2,
 	        yScaleFactor: 1.2,
@@ -17463,47 +17516,54 @@
 	        }
 	      });
 
-	      return drawPath(parentGfx, pathData, {
+	      attrs = assign({
 	        strokeWidth: 1,
 	        fill: getStrokeColor$1(event, defaultStrokeColor),
 	        stroke: getStrokeColor$1(event, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+
+	      return drawPath(parentGfx, pathData, attrs);
 	    },
-	    'bpmn:EndEvent': function(parentGfx, element) {
-	      var circle = renderer('bpmn:Event')(parentGfx, element, {
+	    'bpmn:EndEvent': function(parentGfx, element, attrs) {
+	      var outerAttrs = assign({
 	        strokeWidth: 4,
 	        fill: getFillColor(element, defaultFillColor),
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	        stroke: getStrokeColor$1(element, defaultStrokeColor),
+	      }, attrs);
 
-	      renderEventContent(element, parentGfx);
+	      var circle = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
+
+	      renderEventContent(element, parentGfx, attrs);
 
 	      return circle;
 	    },
-	    'bpmn:TerminateEventDefinition': function(parentGfx, element) {
-	      var circle = drawCircle(parentGfx, element.width, element.height, 8, {
-	        strokeWidth: 4,
-	        fill: getStrokeColor$1(element, defaultStrokeColor),
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	    'bpmn:TerminateEventDefinition': function(parentGfx, element, attrs) {
+	      attrs = assign({
+	        fill: getFillColor(element, defaultFillColor),
+	        stroke: getStrokeColor$1(element, defaultStrokeColor),
+	        strokeWidth: 4
+	      }, attrs);
+
+	      var circle = drawCircle(parentGfx, element.width, element.height, 8, attrs);
 
 	      return circle;
 	    },
-	    'bpmn:IntermediateEvent': function(parentGfx, element) {
-	      var outer = renderer('bpmn:Event')(parentGfx, element, {
+	    'bpmn:IntermediateEvent': function(parentGfx, element, attrs) {
+	      var outerAttrs = assign({
 	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      var outer = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
 
 	      /* inner */
-	      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
-	        strokeWidth: 1,
+	      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, assign({}, outerAttrs, {
 	        fill: getFillColor(element, 'none'),
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }));
 
-	      renderEventContent(element, parentGfx);
+	      renderEventContent(element, parentGfx, attrs);
 
 	      return outer;
 	    },
@@ -17521,21 +17581,21 @@
 	      return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
 	    },
 
-	    'bpmn:Task': function(parentGfx, element) {
-	      var attrs = {
+	    'bpmn:Task': function(parentGfx, element, attrs) {
+	      attrs = assign({
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      };
+	      }, attrs);
 
 	      var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
 
 	      renderEmbeddedLabel(parentGfx, element, 'center-middle');
-	      attachTaskMarkers(parentGfx, element);
+	      attachTaskMarkers(parentGfx, element, attrs);
 
 	      return rect;
 	    },
-	    'bpmn:ServiceTask': function(parentGfx, element) {
-	      var task = renderer('bpmn:Task')(parentGfx, element);
+	    'bpmn:ServiceTask': function(parentGfx, element, attrs) {
+	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
 	      var pathDataBG = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
 	        abspos: {
@@ -17544,11 +17604,12 @@
 	        }
 	      });
 
-	      /* service bg */ drawPath(parentGfx, pathDataBG, {
+	      var serviceAttrs = assign({
 	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      /* service bg */ drawPath(parentGfx, pathDataBG, serviceAttrs);
 
 	      var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', {
 	        abspos: {
@@ -17557,10 +17618,11 @@
 	        }
 	      });
 
-	      /* service fill */ drawPath(parentGfx, fillPathData, {
+	      var fillAttrs = assign({
 	        strokeWidth: 0,
 	        fill: getFillColor(element, defaultFillColor)
-	      });
+	      }, attrs);
+	      /* service fill */ drawPath(parentGfx, fillPathData, fillAttrs);
 
 	      var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
 	        abspos: {
@@ -17569,16 +17631,12 @@
 	        }
 	      });
 
-	      /* service */ drawPath(parentGfx, pathData, {
-	        strokeWidth: 1,
-	        fill: getFillColor(element, defaultFillColor),
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      /* service */ drawPath(parentGfx, pathData, serviceAttrs);
 
 	      return task;
 	    },
-	    'bpmn:UserTask': function(parentGfx, element) {
-	      var task = renderer('bpmn:Task')(parentGfx, element);
+	    'bpmn:UserTask': function(parentGfx, element, attrs) {
+	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
 	      var x = 15;
 	      var y = 12;
@@ -17590,11 +17648,12 @@
 	        }
 	      });
 
-	      /* user path */ drawPath(parentGfx, pathData, {
+	      var userAttrs = assign({
 	        strokeWidth: 0.5,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      /* user path */ drawPath(parentGfx, pathData, userAttrs);
 
 	      var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
 	        abspos: {
@@ -17603,11 +17662,7 @@
 	        }
 	      });
 
-	      /* user2 path */ drawPath(parentGfx, pathData2, {
-	        strokeWidth: 0.5,
-	        fill: getFillColor(element, defaultFillColor),
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      /* user2 path */ drawPath(parentGfx, pathData2, userAttrs);
 
 	      var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
 	        abspos: {
@@ -17616,16 +17671,12 @@
 	        }
 	      });
 
-	      /* user3 path */ drawPath(parentGfx, pathData3, {
-	        strokeWidth: 0.5,
-	        fill: getStrokeColor$1(element, defaultStrokeColor),
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      /* user3 path */ drawPath(parentGfx, pathData3, userAttrs);
 
 	      return task;
 	    },
-	    'bpmn:ManualTask': function(parentGfx, element) {
-	      var task = renderer('bpmn:Task')(parentGfx, element);
+	    'bpmn:ManualTask': function(parentGfx, element, attrs) {
+	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
 	      var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
 	        abspos: {
@@ -17634,16 +17685,17 @@
 	        }
 	      });
 
-	      /* manual path */ drawPath(parentGfx, pathData, {
+	      var manualAttrs = assign({
 	        strokeWidth: 0.5, // 0.25,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      /* manual path */ drawPath(parentGfx, pathData, manualAttrs);
 
 	      return task;
 	    },
-	    'bpmn:SendTask': function(parentGfx, element) {
-	      var task = renderer('bpmn:Task')(parentGfx, element);
+	    'bpmn:SendTask': function(parentGfx, element, attrs) {
+	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
 	      var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
 	        xScaleFactor: 1,
@@ -17656,22 +17708,25 @@
 	        }
 	      });
 
-	      /* send path */ drawPath(parentGfx, pathData, {
+	      /* send path */
+	      var pathAttrs = assign({
 	        strokeWidth: 1,
 	        fill: getStrokeColor$1(element, defaultStrokeColor),
 	        stroke: getFillColor(element, defaultFillColor)
-	      });
+	      }, attrs);
+
+	      drawPath(parentGfx, pathData, pathAttrs);
 
 	      return task;
 	    },
-	    'bpmn:ReceiveTask' : function(parentGfx, element) {
+	    'bpmn:ReceiveTask' : function(parentGfx, element, attrs) {
 	      var semantic = getSemantic(element);
 
-	      var task = renderer('bpmn:Task')(parentGfx, element);
+	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 	      var pathData;
 
 	      if (semantic.instantiate) {
-	        drawCircle(parentGfx, 28, 28, 20 * 0.22, { strokeWidth: 1 });
+	        drawCircle(parentGfx, 28, 28, 20 * 0.22, assign({ strokeWidth: 1 }, attrs));
 
 	        pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
 	          abspos: {
@@ -17693,16 +17748,18 @@
 	        });
 	      }
 
-	      /* receive path */ drawPath(parentGfx, pathData, {
+	      var receiveAttrs = assign({
 	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      /* receive path */ drawPath(parentGfx, pathData, receiveAttrs);
 
 	      return task;
 	    },
-	    'bpmn:ScriptTask': function(parentGfx, element) {
-	      var task = renderer('bpmn:Task')(parentGfx, element);
+	    'bpmn:ScriptTask': function(parentGfx, element, attrs) {
+	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
 	      var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
 	        abspos: {
@@ -17711,15 +17768,16 @@
 	        }
 	      });
 
-	      /* script path */ drawPath(parentGfx, pathData, {
+	      var scriptAttrs = assign({
 	        strokeWidth: 1,
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      /* script path */ drawPath(parentGfx, pathData, scriptAttrs);
 
 	      return task;
 	    },
-	    'bpmn:BusinessRuleTask': function(parentGfx, element) {
-	      var task = renderer('bpmn:Task')(parentGfx, element);
+	    'bpmn:BusinessRuleTask': function(parentGfx, element, attrs) {
+	      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
 	      var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
 	        abspos: {
@@ -17728,12 +17786,12 @@
 	        }
 	      });
 
-	      var businessHeaderPath = drawPath(parentGfx, headerPathData);
-	      attr(businessHeaderPath, {
+	      var headerAttrs = assign({
 	        strokeWidth: 1,
 	        fill: getFillColor(element, '#aaaaaa'),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      drawPath(parentGfx, headerPathData, headerAttrs);
 
 	      var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
 	        abspos: {
@@ -17742,11 +17800,11 @@
 	        }
 	      });
 
-	      var businessPath = drawPath(parentGfx, headerData);
-	      attr(businessPath, {
+	      var businessAttrs = assign({
 	        strokeWidth: 1,
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      drawPath(parentGfx, headerData, businessAttrs);
 
 	      return task;
 	    },
@@ -17769,41 +17827,42 @@
 	      renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle');
 
 	      if (expanded) {
-	        attachTaskMarkers(parentGfx, element);
+	        attachTaskMarkers(parentGfx, element, attrs);
 	      } else {
-	        attachTaskMarkers(parentGfx, element, ['SubProcessMarker']);
+	        attachTaskMarkers(parentGfx, element, attrs, ['SubProcessMarker']);
 	      }
 
 	      return rect;
 	    },
-	    'bpmn:AdHocSubProcess': function(parentGfx, element) {
-	      return renderer('bpmn:SubProcess')(parentGfx, element);
+	    'bpmn:AdHocSubProcess': function(parentGfx, element, attrs) {
+	      return renderer('bpmn:SubProcess')(parentGfx, element, attrs);
 	    },
-	    'bpmn:Transaction': function(parentGfx, element) {
-	      var outer = renderer('bpmn:SubProcess')(parentGfx, element);
+	    'bpmn:Transaction': function(parentGfx, element, attrs) {
+	      var outer = renderer('bpmn:SubProcess')(parentGfx, element, attrs);
 
 	      var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
 	      });
 
-	      /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, innerAttrs);
+	      /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, assign(innerAttrs, attrs));
 
 	      return outer;
 	    },
-	    'bpmn:CallActivity': function(parentGfx, element) {
-	      return renderer('bpmn:SubProcess')(parentGfx, element, {
+	    'bpmn:CallActivity': function(parentGfx, element, attrs) {
+	      attrs = assign({
 	        strokeWidth: 5
-	      });
-	    },
-	    'bpmn:Participant': function(parentGfx, element) {
+	      }, attrs);
 
-	      var attrs = {
+	      return renderer('bpmn:SubProcess')(parentGfx, element, attrs);
+	    },
+	    'bpmn:Participant': function(parentGfx, element, attrs) {
+	      var outerAttrs = assign({
 	        fillOpacity: DEFAULT_FILL_OPACITY,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      };
+	      }, attrs);
 
-	      var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
+	      var lane = renderer('bpmn:Lane')(parentGfx, element, outerAttrs);
 
 	      var expandedPool = isExpanded(element);
 
@@ -17811,9 +17870,9 @@
 	        drawLine(parentGfx, [
 	          { x: 30, y: 0 },
 	          { x: 30, y: element.height }
-	        ], {
+	        ], assign({
 	          stroke: getStrokeColor$1(element, defaultStrokeColor)
-	        });
+	        }, attrs));
 	        var text = getSemantic(element).name;
 	        renderLaneLabel(parentGfx, text, element);
 	      } else {
@@ -17831,7 +17890,7 @@
 	      var participantMultiplicity = !!(getSemantic(element).participantMultiplicity);
 
 	      if (participantMultiplicity) {
-	        renderer('ParticipantMultiplicityMarker')(parentGfx, element);
+	        renderer('ParticipantMultiplicityMarker')(parentGfx, element, attrs);
 	      }
 
 	      return lane;
@@ -17852,20 +17911,23 @@
 
 	      return rect;
 	    },
-	    'bpmn:InclusiveGateway': function(parentGfx, element) {
-	      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+	    'bpmn:InclusiveGateway': function(parentGfx, element, attrs) {
+	      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
 
-	      /* circle path */
-	      drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
+
+	      var circleAttrs = assign({
 	        strokeWidth: 2.5,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      /* circle path */
+	      drawCircle(parentGfx, element.width, element.height, element.height * 0.24, circleAttrs);
 
 	      return diamond;
 	    },
-	    'bpmn:ExclusiveGateway': function(parentGfx, element) {
-	      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+	    'bpmn:ExclusiveGateway': function(parentGfx, element, attrs) {
+	      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
 
 	      var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
 	        xScaleFactor: 0.4,
@@ -17879,17 +17941,17 @@
 	      });
 
 	      if ((getDi(element).isMarkerVisible)) {
-	        drawPath(parentGfx, pathData, {
+	        drawPath(parentGfx, pathData, assign({
 	          strokeWidth: 1,
 	          fill: getStrokeColor$1(element, defaultStrokeColor),
 	          stroke: getStrokeColor$1(element, defaultStrokeColor)
-	        });
+	        }, attrs));
 	      }
 
 	      return diamond;
 	    },
-	    'bpmn:ComplexGateway': function(parentGfx, element) {
-	      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+	    'bpmn:ComplexGateway': function(parentGfx, element, attrs) {
+	      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
 
 	      var pathData = pathMap.getScaledPath('GATEWAY_COMPLEX', {
 	        xScaleFactor: 0.5,
@@ -17902,16 +17964,17 @@
 	        }
 	      });
 
-	      /* complex path */ drawPath(parentGfx, pathData, {
+	      var innerAttrs = assign({
 	        strokeWidth: 1,
 	        fill: getStrokeColor$1(element, defaultStrokeColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      /* complex path */ drawPath(parentGfx, pathData, innerAttrs);
 
 	      return diamond;
 	    },
-	    'bpmn:ParallelGateway': function(parentGfx, element) {
-	      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+	    'bpmn:ParallelGateway': function(parentGfx, element, attrs) {
+	      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
 
 	      var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
 	        xScaleFactor: 0.6,
@@ -17924,25 +17987,27 @@
 	        }
 	      });
 
-	      /* parallel path */ drawPath(parentGfx, pathData, {
+	      var innerAttrs = assign({
 	        strokeWidth: 1,
 	        fill: getStrokeColor$1(element, defaultStrokeColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      /* parallel path */ drawPath(parentGfx, pathData, innerAttrs);
 
 	      return diamond;
 	    },
-	    'bpmn:EventBasedGateway': function(parentGfx, element) {
+	    'bpmn:EventBasedGateway': function(parentGfx, element, attrs) {
 
 	      var semantic = getSemantic(element);
 
-	      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+	      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
 
-	      /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
+	      var outerAttrs = assign({
 	        strokeWidth: 1,
 	        fill: 'none',
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, outerAttrs);
 
 	      var type = semantic.eventGatewayType;
 	      var instantiate = !!semantic.instantiate;
@@ -17960,13 +18025,12 @@
 	          }
 	        });
 
-	        var attrs = {
+	        var innerAttrs = assign({
 	          strokeWidth: 2,
 	          fill: getFillColor(element, 'none'),
 	          stroke: getStrokeColor$1(element, defaultStrokeColor)
-	        };
-
-	        /* event path */ drawPath(parentGfx, pathData, attrs);
+	        }, attrs);
+	        /* event path */ drawPath(parentGfx, pathData, innerAttrs);
 	      }
 
 	      if (type === 'Parallel') {
@@ -17982,7 +18046,7 @@
 	          }
 	        });
 
-	        var parallelPath = drawPath(parentGfx, pathData);
+	        var parallelPath = drawPath(parentGfx, pathData, attrs);
 	        attr(parallelPath, {
 	          strokeWidth: 1,
 	          fill: 'none'
@@ -17990,12 +18054,12 @@
 	      } else if (type === 'Exclusive') {
 
 	        if (!instantiate) {
-	          var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
-	          attr(innerCircle, {
+	          var innerCircleAttrs = assign({
 	            strokeWidth: 1,
 	            fill: 'none',
 	            stroke: getStrokeColor$1(element, defaultStrokeColor)
-	          });
+	          }, attrs);
+	          drawCircle(parentGfx, element.width, element.height, element.height * 0.26, innerCircleAttrs);
 	        }
 
 	        drawEvent();
@@ -18004,26 +18068,28 @@
 
 	      return diamond;
 	    },
-	    'bpmn:Gateway': function(parentGfx, element) {
-	      var attrs = {
+	    'bpmn:Gateway': function(parentGfx, element, attrs) {
+	      attrs = assign({
 	        fill: getFillColor(element, defaultFillColor),
 	        fillOpacity: DEFAULT_FILL_OPACITY,
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      };
+	      }, attrs);
 
 	      return drawDiamond(parentGfx, element.width, element.height, attrs);
 	    },
-	    'bpmn:SequenceFlow': function(parentGfx, element) {
+	    'bpmn:SequenceFlow': function(parentGfx, element, attrs) {
+	      attrs = attrs || {};
+
 	      var pathData = createPathFromConnection(element);
 
-	      var fill = getFillColor(element, defaultFillColor),
-	          stroke = getStrokeColor$1(element, defaultStrokeColor);
+	      var fill = attrs.fill || getFillColor(element, defaultFillColor),
+	          stroke = attrs.stroke || getStrokeColor$1(element, defaultStrokeColor);
 
-	      var attrs = {
+	      attrs = assign({
 	        strokeLinejoin: 'round',
 	        markerEnd: marker('sequenceflow-end', fill, stroke),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      };
+	      }, attrs || {});
 
 	      var path = drawPath(parentGfx, pathData, attrs);
 
@@ -18077,41 +18143,56 @@
 
 	      return drawLine(parentGfx, element.waypoints, attrs);
 	    },
-	    'bpmn:DataInputAssociation': function(parentGfx, element) {
-	      var fill = getFillColor(element, defaultFillColor),
-	          stroke = getStrokeColor$1(element, defaultStrokeColor);
+	    'bpmn:DataInputAssociation': function(parentGfx, element, attrs) {
+	      attrs = attrs || {};
+
+	      var fill = attrs.fill || getFillColor(element, defaultFillColor),
+	          stroke = attrs.stroke || getStrokeColor$1(element, defaultStrokeColor);
 
-	      return renderer('bpmn:Association')(parentGfx, element, {
+	      attrs = assign({
+	        fill: fill,
+	        stroke: stroke,
 	        markerEnd: marker('association-end', fill, stroke)
-	      });
+	      }, attrs);
+
+	      return renderer('bpmn:Association')(parentGfx, element, attrs);
 	    },
-	    'bpmn:DataOutputAssociation': function(parentGfx, element) {
-	      var fill = getFillColor(element, defaultFillColor),
-	          stroke = getStrokeColor$1(element, defaultStrokeColor);
+	    'bpmn:DataOutputAssociation': function(parentGfx, element, attrs) {
+	      attrs = attrs || {};
+
+	      var fill = attrs.fill || getFillColor(element, defaultFillColor),
+	          stroke = attrs.stroke || getStrokeColor$1(element, defaultStrokeColor);
+
 
-	      return renderer('bpmn:Association')(parentGfx, element, {
+	      attrs = assign({
+	        fill: fill,
+	        stroke: stroke,
 	        markerEnd: marker('association-end', fill, stroke)
-	      });
+	      }, attrs);
+
+	      return renderer('bpmn:Association')(parentGfx, element, attrs);
 	    },
-	    'bpmn:MessageFlow': function(parentGfx, element) {
+	    'bpmn:MessageFlow': function(parentGfx, element, attrs) {
+	      attrs = attrs || {};
 
 	      var semantic = getSemantic(element),
 	          di = getDi(element);
 
-	      var fill = getFillColor(element, defaultFillColor),
-	          stroke = getStrokeColor$1(element, defaultStrokeColor);
+	      var fill = attrs.fill || getFillColor(element, defaultFillColor),
+	          stroke = attrs.stroke || getStrokeColor$1(element, defaultStrokeColor);
 
 	      var pathData = createPathFromConnection(element);
 
-	      var attrs = {
+
+	      attrs = assign({
 	        markerEnd: marker('messageflow-end', fill, stroke),
 	        markerStart: marker('messageflow-start', fill, stroke),
 	        strokeDasharray: '10, 12',
 	        strokeLinecap: 'round',
 	        strokeLinejoin: 'round',
 	        strokeWidth: '1.5px',
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      };
+	        stroke: stroke
+	      }, attrs);
 
 	      var path = drawPath(parentGfx, pathData, attrs);
 
@@ -18158,7 +18239,7 @@
 
 	      return path;
 	    },
-	    'bpmn:DataObject': function(parentGfx, element) {
+	    'bpmn:DataObject': function(parentGfx, element, attrs) {
 	      var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -18170,46 +18251,56 @@
 	        }
 	      });
 
-	      var elementObject = drawPath(parentGfx, pathData, {
+	      var outerAttrs = assign({
 	        fill: getFillColor(element, defaultFillColor),
 	        fillOpacity: DEFAULT_FILL_OPACITY,
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      var elementObject = drawPath(parentGfx, pathData, outerAttrs);
 
 	      var semantic = getSemantic(element);
 
 	      if (isCollection(semantic)) {
-	        renderDataItemCollection(parentGfx, element);
+	        renderDataItemCollection(parentGfx, element, attrs);
 	      }
 
 	      return elementObject;
 	    },
 	    'bpmn:DataObjectReference': as('bpmn:DataObject'),
-	    'bpmn:DataInput': function(parentGfx, element) {
+	    'bpmn:DataInput': function(parentGfx, element, attrs) {
 
 	      var arrowPathData = pathMap.getRawPath('DATA_ARROW');
 
 	      // page
-	      var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+	      var elementObject = renderer('bpmn:DataObject')(parentGfx, element, attrs);
 
-	      /* input arrow path */ drawPath(parentGfx, arrowPathData, { strokeWidth: 1 });
+	      var innerAttrs = assign({ strokeWidth: 1 }, attrs);
+	      /* input arrow path */ drawPath(parentGfx, arrowPathData, innerAttrs);
 
 	      return elementObject;
 	    },
-	    'bpmn:DataOutput': function(parentGfx, element) {
+	    'bpmn:DataOutput': function(parentGfx, element, attrs) {
 	      var arrowPathData = pathMap.getRawPath('DATA_ARROW');
 
 	      // page
-	      var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+	      var elementObject = renderer('bpmn:DataObject')(parentGfx, element, attrs);
 
-	      /* output arrow path */ drawPath(parentGfx, arrowPathData, {
+	      var arrowAttrs = assign({
 	        strokeWidth: 1,
 	        fill: 'black'
-	      });
+	      }, attrs);
+	      /* output arrow path */ drawPath(parentGfx, arrowPathData, arrowAttrs);
 
 	      return elementObject;
 	    },
-	    'bpmn:DataStoreReference': function(parentGfx, element) {
+	    'bpmn:DataStoreReference': function(parentGfx, element, attrs) {
+	      attrs = assign({
+	        strokeWidth: 2,
+	        fill: getFillColor(element, defaultFillColor),
+	        fillOpacity: DEFAULT_FILL_OPACITY,
+	        stroke: getStrokeColor$1(element, defaultStrokeColor)
+	      }, attrs);
+
 	      var DATA_STORE_PATH = pathMap.getScaledPath('DATA_STORE', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -18221,25 +18312,20 @@
 	        }
 	      });
 
-	      var elementStore = drawPath(parentGfx, DATA_STORE_PATH, {
-	        strokeWidth: 2,
-	        fill: getFillColor(element, defaultFillColor),
-	        fillOpacity: DEFAULT_FILL_OPACITY,
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      var elementStore = drawPath(parentGfx, DATA_STORE_PATH, attrs);
 
 	      return elementStore;
 	    },
-	    'bpmn:BoundaryEvent': function(parentGfx, element) {
+	    'bpmn:BoundaryEvent': function(parentGfx, element, attrs) {
 
 	      var semantic = getSemantic(element),
 	          cancel = semantic.cancelActivity;
 
-	      var attrs = {
+	      attrs = assign({
 	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      };
+	      }, attrs);
 
 	      if (!cancel) {
 	        attrs.strokeDasharray = '6';
@@ -18260,30 +18346,32 @@
 
 	      /* inner path */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, innerAttrs);
 
-	      renderEventContent(element, parentGfx);
+	      renderEventContent(element, parentGfx, attrs);
 
 	      return outer;
 	    },
-	    'bpmn:Group': function(parentGfx, element) {
+	    'bpmn:Group': function(parentGfx, element, attrs) {
 
-	      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
+	      attrs = assign({
 	        stroke: getStrokeColor$1(element, defaultStrokeColor),
 	        strokeWidth: 1,
 	        strokeDasharray: '8,3,1,3',
 	        fill: 'none',
 	        pointerEvents: 'none'
-	      });
+	      }, attrs);
+
+	      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
 
 	      return group;
 	    },
 	    'label': function(parentGfx, element) {
 	      return renderExternalLabel(parentGfx, element);
 	    },
-	    'bpmn:TextAnnotation': function(parentGfx, element) {
-	      var style = {
+	    'bpmn:TextAnnotation': function(parentGfx, element, attrs) {
+	      var style = assign({}, attrs, {
 	        'fill': 'none',
 	        'stroke': 'none'
-	      };
+	      });
 
 	      var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, style);
 
@@ -18298,9 +18386,10 @@
 	        }
 	      });
 
-	      drawPath(parentGfx, textPathData, {
+	      var pathAttrs = assign({
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+	      drawPath(parentGfx, textPathData, pathAttrs);
 
 	      var text = getSemantic(element).text || '';
 	      renderLabel(parentGfx, text, {
@@ -18314,7 +18403,13 @@
 
 	      return textElement;
 	    },
-	    'ParticipantMultiplicityMarker': function(parentGfx, element) {
+	    'ParticipantMultiplicityMarker': function(parentGfx, element, attrs) {
+	      attrs = assign({
+	        strokeWidth: 2,
+	        fill: getFillColor(element, defaultFillColor),
+	        stroke: getStrokeColor$1(element, defaultStrokeColor)
+	      }, attrs);
+
 	      var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -18326,18 +18421,15 @@
 	        }
 	      });
 
-	      drawMarker('participant-multiplicity', parentGfx, markerPath, {
-	        strokeWidth: 2,
-	        fill: getFillColor(element, defaultFillColor),
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      drawMarker('participant-multiplicity', parentGfx, markerPath, attrs);
 	    },
-	    'SubProcessMarker': function(parentGfx, element) {
-	      var markerRect = drawRect(parentGfx, 14, 14, 0, {
-	        strokeWidth: 1,
+	    'SubProcessMarker': function(parentGfx, element, attrs) {
+	      attrs = assign({
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      }, attrs);
+
+	      var markerRect = drawRect(parentGfx, 14, 14, 0, assign({ strokeWidth: 1 }, attrs));
 
 	      // Process marker is placed in the middle of the box
 	      // therefore fixed values can be used here
@@ -18354,12 +18446,14 @@
 	        }
 	      });
 
-	      drawMarker('sub-process', parentGfx, markerPath, {
+	      drawMarker('sub-process', parentGfx, markerPath, attrs);
+	    },
+	    'ParallelMarker': function(parentGfx, element, attrs, position) {
+	      attrs = assign({
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
-	    },
-	    'ParallelMarker': function(parentGfx, element, position) {
+	      }, attrs);
+
 	      var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -18371,12 +18465,13 @@
 	        }
 	      });
 
-	      drawMarker('parallel', parentGfx, markerPath, {
+	      drawMarker('parallel', parentGfx, markerPath, attrs);
+	    },
+	    'SequentialMarker': function(parentGfx, element, attrs, position) {
+	      attrs = assign({
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
-	    },
-	    'SequentialMarker': function(parentGfx, element, position) {
+	      }, attrs);
 	      var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -18388,12 +18483,15 @@
 	        }
 	      });
 
-	      drawMarker('sequential', parentGfx, markerPath, {
+	      drawMarker('sequential', parentGfx, markerPath, attrs);
+	    },
+	    'CompensationMarker': function(parentGfx, element, attrs, position) {
+	      attrs = assign({
+	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
 	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
-	    },
-	    'CompensationMarker': function(parentGfx, element, position) {
+	      }, attrs);
+
 	      var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -18405,13 +18503,17 @@
 	        }
 	      });
 
-	      drawMarker('compensation', parentGfx, markerMath, {
+	      drawMarker('compensation', parentGfx, markerMath, attrs);
+	    },
+	    'LoopMarker': function(parentGfx, element, attrs, position) {
+	      attrs = assign({
 	        strokeWidth: 1,
 	        fill: getFillColor(element, defaultFillColor),
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
-	    },
-	    'LoopMarker': function(parentGfx, element, position) {
+	        stroke: getStrokeColor$1(element, defaultStrokeColor),
+	        strokeLinecap: 'round',
+	        strokeMiterlimit: 0.5
+	      }, attrs);
+
 	      var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -18423,15 +18525,15 @@
 	        }
 	      });
 
-	      drawMarker('loop', parentGfx, markerPath, {
-	        strokeWidth: 1,
-	        fill: getFillColor(element, defaultFillColor),
-	        stroke: getStrokeColor$1(element, defaultStrokeColor),
-	        strokeLinecap: 'round',
-	        strokeMiterlimit: 0.5
-	      });
+	      drawMarker('loop', parentGfx, markerPath, attrs);
 	    },
-	    'AdhocMarker': function(parentGfx, element, position) {
+	    'AdhocMarker': function(parentGfx, element, attrs, position) {
+	      attrs = assign({
+	        strokeWidth: 1,
+	        fill: getStrokeColor$1(element, defaultStrokeColor),
+	        stroke: getStrokeColor$1(element, defaultStrokeColor)
+	      }, attrs);
+
 	      var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
 	        xScaleFactor: 1,
 	        yScaleFactor: 1,
@@ -18443,15 +18545,11 @@
 	        }
 	      });
 
-	      drawMarker('adhoc', parentGfx, markerPath, {
-	        strokeWidth: 1,
-	        fill: getStrokeColor$1(element, defaultStrokeColor),
-	        stroke: getStrokeColor$1(element, defaultStrokeColor)
-	      });
+	      drawMarker('adhoc', parentGfx, markerPath, attrs);
 	    }
 	  };
 
-	  function attachTaskMarkers(parentGfx, element, taskMarkers) {
+	  function attachTaskMarkers(parentGfx, element, attrs, taskMarkers) {
 	    var obj = getSemantic(element);
 
 	    var subprocess = taskMarkers && taskMarkers.indexOf('SubProcessMarker') !== -1;
@@ -18476,15 +18574,15 @@
 	    }
 
 	    forEach(taskMarkers, function(marker) {
-	      renderer(marker)(parentGfx, element, position);
+	      renderer(marker)(parentGfx, element, attrs, position);
 	    });
 
 	    if (obj.isForCompensation) {
-	      renderer('CompensationMarker')(parentGfx, element, position);
+	      renderer('CompensationMarker')(parentGfx, element, attrs, position);
 	    }
 
 	    if (obj.$type === 'bpmn:AdHocSubProcess') {
-	      renderer('AdhocMarker')(parentGfx, element, position);
+	      renderer('AdhocMarker')(parentGfx, element, attrs, position);
 	    }
 
 	    var loopCharacteristics = obj.loopCharacteristics,
@@ -18493,20 +18591,23 @@
 	    if (loopCharacteristics) {
 
 	      if (isSequential === undefined) {
-	        renderer('LoopMarker')(parentGfx, element, position);
+	        renderer('LoopMarker')(parentGfx, element, attrs, position);
 	      }
 
 	      if (isSequential === false) {
-	        renderer('ParallelMarker')(parentGfx, element, position);
+	        renderer('ParallelMarker')(parentGfx, element, attrs, position);
 	      }
 
 	      if (isSequential === true) {
-	        renderer('SequentialMarker')(parentGfx, element, position);
+	        renderer('SequentialMarker')(parentGfx, element, attrs, position);
 	      }
 	    }
 	  }
 
-	  function renderDataItemCollection(parentGfx, element) {
+	  function renderDataItemCollection(parentGfx, element, attrs) {
+	    attrs = assign({
+	      strokeWidth: 2
+	    }, attrs);
 
 	    var yPosition = (element.height - 18) / element.height;
 
@@ -18521,9 +18622,7 @@
 	      }
 	    });
 
-	    /* collection path */ drawPath(parentGfx, pathData, {
-	      strokeWidth: 2
-	    });
+	    /* collection path */ drawPath(parentGfx, pathData, attrs);
 	  }
 
 
@@ -18549,20 +18648,20 @@
 	  return is$1(element, 'bpmn:BaseElement');
 	};
 
-	BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
+	BpmnRenderer.prototype.drawShape = function(parentGfx, element, attrs) {
 	  var type = element.type;
 	  var h = this.handlers[type];
 
 	  /* jshint -W040 */
-	  return h(parentGfx, element);
+	  return h(parentGfx, element, attrs);
 	};
 
-	BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
+	BpmnRenderer.prototype.drawConnection = function(parentGfx, element, attrs) {
 	  var type = element.type;
 	  var h = this.handlers[type];
 
 	  /* jshint -W040 */
-	  return h(parentGfx, element);
+	  return h(parentGfx, element, attrs);
 	};
 
 	BpmnRenderer.prototype.getShapePath = function(element) {
@@ -19679,15 +19778,14 @@
 	 * Returns the bounds of an elements label, parsed from the elements DI or
 	 * generated from its bounds.
 	 *
-	 * @param {BpmnElement} semantic
+	 * @param {BpmndDi} di
 	 * @param {djs.model.Base} element
 	 */
-	function getExternalLabelBounds(semantic, element) {
+	function getExternalLabelBounds(di, element) {
 
 	  var mid,
 	      size,
 	      bounds,
-	      di = semantic.di,
 	      label = di.label;
 
 	  if (label && label.bounds) {
@@ -19719,17 +19817,18 @@
 	  return element && !!element.labelTarget;
 	}
 
-	function elementData(semantic, attrs) {
+	function elementData(semantic, di, attrs) {
 	  return assign({
 	    id: semantic.id,
 	    type: semantic.$type,
-	    businessObject: semantic
+	    businessObject: semantic,
+	    di: di
 	  }, attrs);
 	}
 
-	function getWaypoints(bo, source, target) {
+	function getWaypoints(di, source, target) {
 
-	  var waypoints = bo.di.waypoint;
+	  var waypoints = di.waypoint;
 
 	  if (!waypoints || waypoints.length < 2) {
 	    return [ getMid(source), getMid(target) ];
@@ -19740,6 +19839,32 @@
 	  });
 	}
 
+	var PLANE_PADDING = 50;
+
+	function getPlaneBounds(plane) {
+	  var planeTrbl = {
+	    top: Infinity,
+	    right: -Infinity,
+	    bottom: -Infinity,
+	    left: Infinity
+	  };
+
+	  plane.planeElement.forEach(function(element) {
+	    if (!element.bounds) {
+	      return;
+	    }
+
+	    var trbl = asTRBL(element.bounds);
+
+	    planeTrbl.top = Math.min(trbl.top, planeTrbl.top);
+	    planeTrbl.left = Math.min(trbl.left, planeTrbl.left);
+	    planeTrbl.right = Math.max(trbl.right, planeTrbl.right);
+	    planeTrbl.bottom = Math.max(trbl.bottom, planeTrbl.bottom);
+	  });
+
+	  return asBounds(planeTrbl);
+	}
+
 	function notYetDrawn(translate, semantic, refSemantic, property) {
 	  return new Error(translate('element {element} referenced by {referenced}#{property} not yet drawn', {
 	    element: elementToString(refSemantic),
@@ -19785,10 +19910,8 @@
 	 * Add bpmn element (semantic) to the canvas onto the
 	 * specified parent shape.
 	 */
-	BpmnImporter.prototype.add = function(semantic, parentElement) {
-
-	  var di = semantic.di,
-	      element,
+	BpmnImporter.prototype.add = function(semantic, di, parentElement) {
+	  var element,
 	      translate = this._translate,
 	      hidden;
 
@@ -19799,22 +19922,49 @@
 	  // invisible root element (process or collaboration)
 	  if (is$1(di, 'bpmndi:BPMNPlane')) {
 
-	    // add a virtual element (not being drawn)
-	    element = this._elementFactory.createRoot(elementData(semantic));
+	    if (is$1(semantic, 'bpmn:SubProcess')) {
+	      var plane = this._canvas.createPlane(semantic.id, element);
+
+	      // Get size of expanded element
+	      var bounds = getPlaneBounds(di);
+
+	      var primary = this._elementRegistry.get(semantic.id);
+	      element = this._elementFactory.createShape(elementData(semantic, di, {
+	        collapsed: false,
+	        hidden: false,
+	        x: bounds.x - PLANE_PADDING,
+	        y: bounds.y - PLANE_PADDING,
+	        width: bounds.width + PLANE_PADDING * 2,
+	        height: bounds.height + PLANE_PADDING * 2,
+	        isFrame: true
+	      }));
+
+	      element.id = element.id + '_secondary';
+	      element.isSecondary = true;
+	      element.primaryShape = primary;
+
+	      this._canvas.addShape(element, plane.rootElement);
+	    }
+	    else {
+
+	      // add a virtual element (not being drawn)
+	      element = this._elementFactory.createRoot(elementData(semantic, di));
 
-	    this._canvas.setRootElement(element);
+	      this._canvas.createPlane(semantic.id, element);
+	    }
 	  }
 
 	  // SHAPE
 	  else if (is$1(di, 'bpmndi:BPMNShape')) {
 
-	    var collapsed = !isExpanded(semantic),
+	    var collapsed = !isExpanded(semantic, di),
 	        isFrame = isFrameElement(semantic);
+
 	    hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
 
-	    var bounds = semantic.di.bounds;
+	    bounds = di.bounds;
 
-	    element = this._elementFactory.createShape(elementData(semantic, {
+	    element = this._elementFactory.createShape(elementData(semantic, di, {
 	      collapsed: collapsed,
 	      hidden: hidden,
 	      x: Math.round(bounds.x),
@@ -19837,7 +19987,7 @@
 
 	      // check whether data store is inside our outside of its semantic parent
 	      if (!isPointInsideBBox$1(parentElement, getMid(bounds))) {
-	        parentElement = this._canvas.getRootElement();
+	        parentElement = this._canvas.findPlane(parentElement).rootElement;
 	      }
 	    }
 
@@ -19852,11 +20002,11 @@
 
 	    hidden = parentElement && (parentElement.hidden || parentElement.collapsed);
 
-	    element = this._elementFactory.createConnection(elementData(semantic, {
+	    element = this._elementFactory.createConnection(elementData(semantic, di, {
 	      hidden: hidden,
 	      source: source,
 	      target: target,
-	      waypoints: getWaypoints(semantic, source, target)
+	      waypoints: getWaypoints(di, source, target)
 	    }));
 
 	    if (is$1(semantic, 'bpmn:DataAssociation')) {
@@ -19865,7 +20015,7 @@
 	      // are rendered correctly across different "hacks" people
 	      // love to model such as cross participant / sub process
 	      // associations
-	      parentElement = null;
+	      parentElement = this._canvas.findPlane(parentElement).rootElement;
 	    }
 
 	    // insert sequence flows behind other flow nodes (cf. #727)
@@ -19883,7 +20033,7 @@
 
 	  // (optional) LABEL
 	  if (isLabelExternal(semantic) && getLabel(element)) {
-	    this.addLabel(semantic, element);
+	    this.addLabel(semantic, di, element);
 	  }
 
 
@@ -19932,12 +20082,12 @@
 	/**
 	 * add label for an element
 	 */
-	BpmnImporter.prototype.addLabel = function(semantic, element) {
+	BpmnImporter.prototype.addLabel = function(semantic, di, element) {
 	  var bounds,
 	      text,
 	      label;
 
-	  bounds = getExternalLabelBounds(semantic, element);
+	  bounds = getExternalLabelBounds(di, element);
 
 	  text = getLabel(element);
 
@@ -19947,7 +20097,7 @@
 	    bounds = this._textRenderer.getExternalLabelBounds(bounds, text);
 	  }
 
-	  label = this._elementFactory.createLabel(elementData(semantic, {
+	  label = this._elementFactory.createLabel(elementData(semantic, di, {
 	    id: semantic.id + '_label',
 	    labelTarget: element,
 	    type: 'label',
@@ -21491,22 +21641,26 @@
 
 	Overlays.prototype._updateOverlayVisibilty = function(overlay, viewbox) {
 	  var show = overlay.show,
+	      plane = overlay.plane,
 	      minZoom = show && show.minZoom,
 	      maxZoom = show && show.maxZoom,
 	      htmlContainer = overlay.htmlContainer,
+	      activePlane = this._canvas.getActivePlane(),
 	      visible = true;
 
-	  if (show) {
+	  if (plane !== activePlane) {
+	    visible = false;
+	  } else if (show) {
 	    if (
 	      (isDefined(minZoom) && minZoom > viewbox.scale) ||
 	      (isDefined(maxZoom) && maxZoom < viewbox.scale)
 	    ) {
 	      visible = false;
 	    }
-
-	    setVisible$1(htmlContainer, visible);
 	  }
 
+	  setVisible$1(htmlContainer, visible);
+
 	  this._updateOverlayScale(overlay, viewbox);
 	};
 
@@ -21677,6 +21831,660 @@
 	  overlays: [ 'type', Overlays ]
 	};
 
+	/**
+	 * Adds change support to the diagram, including
+	 *
+	 * <ul>
+	 *   <li>redrawing shapes and connections on change</li>
+	 * </ul>
+	 *
+	 * @param {EventBus} eventBus
+	 * @param {Canvas} canvas
+	 * @param {ElementRegistry} elementRegistry
+	 * @param {GraphicsFactory} graphicsFactory
+	 */
+	function ChangeSupport(
+	    eventBus, canvas, elementRegistry,
+	    graphicsFactory) {
+
+
+	  // redraw shapes / connections on change
+
+	  eventBus.on('element.changed', function(event) {
+
+	    var element = event.element;
+
+	    // element might have been deleted and replaced by new element with same ID
+	    // thus check for parent of element except for root element
+	    if (element.parent || element === canvas.getRootElement()) {
+	      event.gfx = elementRegistry.getGraphics(element);
+	    }
+
+	    // shape + gfx may have been deleted
+	    if (!event.gfx) {
+	      return;
+	    }
+
+	    eventBus.fire(getType(element) + '.changed', event);
+	  });
+
+	  eventBus.on('elements.changed', function(event) {
+
+	    var elements = event.elements;
+
+	    elements.forEach(function(e) {
+	      eventBus.fire('element.changed', { element: e });
+	    });
+
+	    graphicsFactory.updateContainments(elements);
+	  });
+
+	  eventBus.on('shape.changed', function(event) {
+	    graphicsFactory.update('shape', event.element, event.gfx);
+	  });
+
+	  eventBus.on('connection.changed', function(event) {
+	    graphicsFactory.update('connection', event.element, event.gfx);
+	  });
+	}
+
+	ChangeSupport.$inject = [
+	  'eventBus',
+	  'canvas',
+	  'elementRegistry',
+	  'graphicsFactory'
+	];
+
+	var ChangeSupportModule = {
+	  __init__: [ 'changeSupport'],
+	  changeSupport: [ 'type', ChangeSupport ]
+	};
+
+	function SubprocessElements(eventBus, elementRegistry, canvas, elementFactory) {
+	  var attachBoundaries = function() {
+	    var secondaryShapes = elementRegistry.filter(function(el) {
+	      return is$1(el, 'bpmn:SubProcess') && el.isSecondary;
+	    });
+
+	    secondaryShapes.forEach(function(process) {
+
+	      // Add Boundary events
+	      if (process.primaryShape && process.primaryShape.attachers) {
+	        process.primaryShape.attachers.forEach(function(boundary) {
+	          var bo = getBusinessObject(boundary);
+
+	          var primary = process.primaryShape;
+
+	          var relativeXPos = (boundary.x + 15 - primary.x) / primary.width;
+	          var relativeYPos = (boundary.y + 15 - primary.y) / primary.height;
+
+	          var dx = process.x + (process.width * relativeXPos) - 15;
+	          var dy = process.y + (process.height * relativeYPos) - 15;
+
+	          var boundaryShape = elementFactory.createShape({
+	            id: bo.id + '_secondary',
+	            businessObject: bo,
+	            type: 'bpmn:BoundaryEvent',
+	            hidden: false,
+	            x: dx,
+	            y: dy,
+	            width: 30,
+	            height: 30,
+	            isFrame: false,
+	            isSecondary: true,
+	            primaryShape: boundary,
+	            di: boundary.di
+	          });
+
+	          canvas.addShape(boundaryShape, process.parent);
+
+	          if (!process.attachers) {
+	            process.attachers = [];
+	          }
+
+	          process.attachers.push(boundaryShape);
+	        });
+	      }
+	    });
+	  };
+
+	  eventBus.on('import.done', attachBoundaries);
+	}
+
+
+	SubprocessElements.$inject = [ 'eventBus', 'elementRegistry', 'canvas', 'elementFactory' ];
+
+	var defaultPosition = { x: 100, y: 50 };
+
+	function SubprocessCentering(eventBus, canvas) {
+	  var currentPlane = 'base';
+	  var positionMap = {};
+
+	  eventBus.on('plane.set', function(event) {
+
+	    var currentViewbox = canvas.viewbox();
+	    positionMap[currentPlane] = {
+	      x: currentViewbox.x,
+	      y: currentViewbox.y,
+	      zoom: currentViewbox.scale
+	    };
+
+	    var planeId = event.plane.name;
+	    var storedViewbox = positionMap[planeId];
+
+	    if (!storedViewbox) {
+	      if (!event.plane.rootElement.isImplicit) {
+	        storedViewbox = {
+	          x: 0,
+	          y: 0,
+	          zoom: 1
+	        };
+	      }
+	      else {
+	        var currentBoundingBox = canvas.getActiveLayer().getBBox();
+	        storedViewbox = {
+	          x: currentBoundingBox.x - defaultPosition.x,
+	          y: currentBoundingBox.y - defaultPosition.y,
+	          zoom: 1
+	        };
+	      }
+	    }
+
+	    var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,
+	        dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;
+
+	    if (dx !== 0 || dy !== 0) {
+	      canvas.scroll({
+	        dx: dx,
+	        dy: dy
+	      });
+	    }
+
+	    if (storedViewbox.zoom !== currentViewbox.scale) {
+	      canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });
+	    }
+
+	    currentPlane = planeId;
+	  });
+	}
+
+	SubprocessCentering.$inject = [ 'eventBus', 'canvas' ];
+
+	function SubprocessCompatibility(eventBus, elementRegistry, canvas, moddle, elementFactory, bpmnjs) {
+	  this._eventBus = eventBus;
+	  this._elementRegistry = elementRegistry;
+	  this._canvas = canvas;
+	  this._bpmnjs = bpmnjs;
+	  this._moddle = moddle;
+	  this._elementFactory = elementFactory;
+
+	  var self = this;
+
+	  eventBus.on('import.done', 1500, function() {
+	    self._handleImport();
+	  });
+	}
+
+	SubprocessCompatibility.prototype._handleImport = function() {
+	  var elementRegistry = this._elementRegistry;
+	  var canvas = this._canvas;
+	  var elementFactory = this._elementFactory;
+	  var self = this;
+	  var legacyProcesses = elementRegistry.filter(function(element) {
+	    return is$1(element, 'bpmn:SubProcess') && !isExpanded(element) && element.children && element.children.length;
+	  });
+
+	  legacyProcesses.forEach(function(oldParent) {
+	    var bo = getBusinessObject(oldParent);
+
+	    var newDiagram = self.createDiagram(bo);
+
+	    var newParent = elementFactory.createRoot(
+	      {
+	        id: bo.id,
+	        type: bo.$type,
+	        businessObject: bo,
+	        di: newDiagram.plane
+	      }
+	    );
+
+	    newParent.id = newParent.id + '_plane';
+
+	    canvas.createPlane(bo.id, newParent);
+
+	    var elementsToChange = selfAndAllChildren(oldParent).filter(function(el) {
+	      return el !== oldParent;
+	    });
+
+	    self.moveElementsToRoot(elementsToChange);
+
+	    elementsToChange.forEach(function(el) {
+	      if (el.parent === oldParent) {
+	        el.parent = newParent;
+	      }
+	      el.hidden = el.parent && (el.parent.hidden || el.parent.collapsed);
+
+	      self.moveToDiPlane(el, newDiagram.plane);
+
+	      self._eventBus.fire('elements.changed', { elements: [el] });
+	    });
+	  });
+
+	};
+
+	SubprocessCompatibility.prototype.moveToDiPlane = function(element, newPlane) {
+	  var di = getDi(element);
+	  var containingDiagram = findRootDiagram(di);
+
+	  // Remove DI from old Plane and add it to the new one
+	  var parentPlaneElement = containingDiagram.plane.get('planeElement');
+	  parentPlaneElement.splice(parentPlaneElement.indexOf(di), 1);
+	  newPlane.get('planeElement').push(di);
+	};
+
+	SubprocessCompatibility.prototype.moveElementsToRoot = function(elements) {
+	  var defaultPosition = { x: 180, y: 160 },
+	      minX = Infinity,
+	      minY = Infinity;
+
+	  elements.forEach(function(el) {
+	    minX = Math.min(minX, el.x || Infinity);
+	    minY = Math.min(minY, el.y || Infinity);
+	  });
+
+	  var xOffset = defaultPosition.x - minX;
+	  var yOffset = defaultPosition.y - minY;
+
+	  elements.forEach(function(el) {
+	    if (el.waypoints) {
+	      el.waypoints.forEach(function(waypoint) {
+	        waypoint.x = waypoint.x + xOffset;
+	        waypoint.y = waypoint.y + yOffset;
+	      });
+	    } else {
+	      el.x = el.x + xOffset;
+	      el.y = el.y + yOffset;
+	    }
+	  });
+	};
+
+	SubprocessCompatibility.prototype.getDefinitions = function() {
+	  return this._bpmnjs._definitions || [];
+	};
+
+	SubprocessCompatibility.prototype.getDiagrams = function() {
+	  return this.getDefinitions().diagrams || [];
+	};
+
+	SubprocessCompatibility.prototype.createDiagram = function(bo) {
+	  var plane = this._moddle.create('bpmndi:BPMNPlane', { bpmnElement: bo });
+	  var diagram = this._moddle.create('bpmndi:BPMNDiagram', {
+	    plane: plane
+	  });
+	  plane.$parent = diagram;
+	  plane.bpmnElement = bo;
+	  diagram.$parent = this.getDefinitions();
+	  this.getDiagrams().push(diagram);
+	  return diagram;
+	};
+
+	SubprocessCompatibility.$inject = [ 'eventBus', 'elementRegistry', 'canvas', 'moddle', 'elementFactory', 'bpmnjs' ];
+
+
+	//  Util
+
+	var findRootDiagram = function(element) {
+	  if (is$1(element, 'bpmndi:BPMNDiagram')) {
+	    return element;
+	  } else {
+	    return findRootDiagram(element.$parent);
+	  }
+	};
+
+	var css_escape = {exports: {}};
+
+	/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
+
+	(function (module, exports) {
+	(function(root, factory) {
+		// https://github.com/umdjs/umd/blob/master/returnExports.js
+		{
+			// For Node.js.
+			module.exports = factory(root);
+		}
+	}(typeof commonjsGlobal != 'undefined' ? commonjsGlobal : commonjsGlobal, function(root) {
+
+		if (root.CSS && root.CSS.escape) {
+			return root.CSS.escape;
+		}
+
+		// https://drafts.csswg.org/cssom/#serialize-an-identifier
+		var cssEscape = function(value) {
+			if (arguments.length == 0) {
+				throw new TypeError('`CSS.escape` requires an argument.');
+			}
+			var string = String(value);
+			var length = string.length;
+			var index = -1;
+			var codeUnit;
+			var result = '';
+			var firstCodeUnit = string.charCodeAt(0);
+			while (++index < length) {
+				codeUnit = string.charCodeAt(index);
+				// Note: there’s no need to special-case astral symbols, surrogate
+				// pairs, or lone surrogates.
+
+				// If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
+				// (U+FFFD).
+				if (codeUnit == 0x0000) {
+					result += '\uFFFD';
+					continue;
+				}
+
+				if (
+					// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+					// U+007F, […]
+					(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
+					// If the character is the first character and is in the range [0-9]
+					// (U+0030 to U+0039), […]
+					(index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+					// If the character is the second character and is in the range [0-9]
+					// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+					(
+						index == 1 &&
+						codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
+						firstCodeUnit == 0x002D
+					)
+				) {
+					// https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+					result += '\\' + codeUnit.toString(16) + ' ';
+					continue;
+				}
+
+				if (
+					// If the character is the first character and is a `-` (U+002D), and
+					// there is no second character, […]
+					index == 0 &&
+					length == 1 &&
+					codeUnit == 0x002D
+				) {
+					result += '\\' + string.charAt(index);
+					continue;
+				}
+
+				// If the character is not handled by one of the above rules and is
+				// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+				// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+				// U+005A), or [a-z] (U+0061 to U+007A), […]
+				if (
+					codeUnit >= 0x0080 ||
+					codeUnit == 0x002D ||
+					codeUnit == 0x005F ||
+					codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
+					codeUnit >= 0x0041 && codeUnit <= 0x005A ||
+					codeUnit >= 0x0061 && codeUnit <= 0x007A
+				) {
+					// the character itself
+					result += string.charAt(index);
+					continue;
+				}
+
+				// Otherwise, the escaped character.
+				// https://drafts.csswg.org/cssom/#escape-a-character
+				result += '\\' + string.charAt(index);
+
+			}
+			return result;
+		};
+
+		if (!root.CSS) {
+			root.CSS = {};
+		}
+
+		root.CSS.escape = cssEscape;
+		return cssEscape;
+
+	}));
+	}(css_escape));
+
+	var cssEscape = css_escape.exports;
+
+	var HTML_ESCAPE_MAP = {
+	  '&': '&amp;',
+	  '<': '&lt;',
+	  '>': '&gt;',
+	  '"': '&quot;',
+	  '\'': '&#39;'
+	};
+
+	function escapeHTML(str) {
+	  str = '' + str;
+
+	  return str && str.replace(/[&<>"']/g, function(match) {
+	    return HTML_ESCAPE_MAP[match];
+	  });
+	}
+
+	var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
+	var ARROW_UP_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.1819805,12.4926407 L5.5003106,6.8103106 L5.5,12 L4,12 L4,4 L12,4 L12,5.5 L6.3103106,5.5003106 L12.2426407,11.4319805 C12.5355339,11.7248737 12.5355339,12.1997475 12.2426407,12.4926407 C11.9497475,12.7855339 11.4748737,12.7855339 11.1819805,12.4926407 Z"/></svg>';
+
+	function SubprocessOverlays(eventBus, elementRegistry, overlays, canvas) {
+
+	  function createBreadcrumbs(subProcess) {
+	    var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
+	    var drillUp = domify('<button class="bjs-drilldown">' + ARROW_UP_SVG + '</button>');
+	    drillUp.addEventListener('click', function() {
+	      var plane = canvas.findPlane(getBusinessObject(subProcess).id);
+	      canvas.setActivePlane(plane);
+	    });
+
+	    breadcrumbs.appendChild(drillUp);
+
+	    var parents = getParentChain(subProcess);
+
+	    var path = parents.map(function(el) {
+	      var title = escapeHTML(el.name) || el.id;
+	      var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
+
+	      link.addEventListener('click', function() {
+	        if (canvas.getPlane(el.id)) {
+	          canvas.setActivePlane(el.id);
+	        } else {
+	          var plane = canvas.findPlane(el.id);
+	          canvas.setActivePlane(plane);
+	        }
+	      });
+
+	      return link;
+	    });
+
+	    path.forEach(function(el) {
+	      breadcrumbs.appendChild(el);
+	    });
+
+	    overlays.add(subProcess, {
+	      position: {
+	        top: -30,
+	        left: -10
+	      },
+	      html: breadcrumbs
+	    });
+	  }
+
+	  var createDrilldown = function(element) {
+	    var html = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
+
+	    html.addEventListener('click', function() {
+	      canvas.setActivePlane(element.id);
+	    });
+
+	    overlays.add(element, {
+	      position: {
+	        bottom: -7,
+	        right: -8
+	      },
+	      html: html
+	    });
+	  };
+
+	  var addOverlays = function(elements) {
+	    elements.forEach(function(element) {
+	      if (is$1(element, 'bpmn:SubProcess')
+	          && element.collapsed
+	          && canvas.getPlane(element.id)) {
+	        createDrilldown(element);
+	      }
+
+	      if (is$1(element, 'bpmn:SubProcess') && element.isSecondary) {
+	        createBreadcrumbs(element);
+	      }
+	    });
+	  };
+
+	  eventBus.on('import.done', function() {
+	    addOverlays(elementRegistry.filter(function(el) {
+	      return is$1(el, 'bpmn:SubProcess');
+	    }));
+	  });
+	}
+
+	SubprocessOverlays.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+
+
+	var getParentChain = function(child) {
+	  var bo = getBusinessObject(child);
+
+	  var parents = [];
+
+	  for (var element = bo; element; element = element.$parent) {
+	    if (is$1(element, 'bpmn:SubProcess') || is$1(element, 'bpmn:Process')) {
+	      parents.push(element);
+	    }
+	  }
+
+	  return parents.reverse();
+	};
+
+	var FLOW_LENGTH = 50;
+	var HIGH_RENDER_PRIORITY = 2000;
+
+	function SubprocessFlows(eventBus, config) {
+
+	  var mutedStrokeColor = (config && config.mutedStrokeColor) || '#dddddd';
+
+	  function drawFakeFlows(element, parentGfx) {
+	    var primary = element.primaryShape;
+
+	    var drawFakeConnection = function(connection, isOutgoing) {
+
+	      var segment;
+	      if (isOutgoing) {
+	        segment = connection.waypoints.slice(0, 2);
+
+	        // Reverse order for normalizing
+	        segment = segment.reverse();
+	      } else {
+	        segment = connection.waypoints.slice(connection.waypoints.length - 2);
+	      }
+
+	      var endpoint = segment[1];
+
+	      var relativePosition = {
+	        x: (endpoint.x - primary.x) / primary.width,
+	        y: (endpoint.y - primary.y) / primary.height
+	      };
+
+	      var anchorPoint = {
+	        x: endpoint.x - (element.width * relativePosition.x),
+	        y: endpoint.y - (element.height * relativePosition.y)
+	      };
+
+	      var newWaypoints = segment.map(function(el) {
+	        return { x: el.x - anchorPoint.x, y: el.y - anchorPoint.y };
+	      });
+
+	      newWaypoints[0] = normalizeLength(newWaypoints[1], newWaypoints[0], FLOW_LENGTH);
+
+	      var attrs = {
+	        stroke: mutedStrokeColor
+	      };
+
+	      if (isOutgoing) {
+
+	        // Reverse order again for correct end marker position
+	        newWaypoints = newWaypoints.reverse();
+	      } else {
+
+	        // Remove start marker for incoming flows
+	        attrs.markerStart = undefined;
+	      }
+
+	      eventBus.fire('render.connection', {
+	        type: connection.type,
+	        gfx: parentGfx,
+	        element: {
+	          type: connection.type,
+	          waypoints: newWaypoints,
+	          di: connection.di,
+	          businessObject: connection.businessObject
+	        },
+	        attrs: attrs
+	      });
+	    };
+
+	    primary.incoming && primary.incoming.forEach(function(connection) {
+	      drawFakeConnection(connection, false);
+	    });
+
+	    primary.outgoing && primary.outgoing.forEach(function(connection) {
+	      drawFakeConnection(connection, true);
+	    });
+	  }
+
+	  eventBus.on([ 'render.shape' ], HIGH_RENDER_PRIORITY, function(evt, context) {
+	    var element = context.element,
+	        visuals = context.gfx;
+
+	    if (element.isSecondary && element.primaryShape) {
+	      drawFakeFlows(element, visuals);
+	    }
+
+	  });
+
+	}
+
+	SubprocessFlows.$inject = [ 'eventBus', 'config' ];
+
+
+	// helpers
+
+	function normalizeLength(fixedPoint, variablePoint, length) {
+	  var dx = fixedPoint.x - variablePoint.x,
+	      dy = fixedPoint.y - variablePoint.y,
+	      totalDistance = Math.abs(dx) + Math.abs(dy);
+
+	  dx = dx / totalDistance;
+	  dy = dy / totalDistance;
+
+	  dx *= length;
+	  dy *= length;
+
+	  return {
+	    x: fixedPoint.x - dx,
+	    y: fixedPoint.y - dy
+	  };
+	}
+
+	var SubprocessNavigationModule = {
+	  __depends__: [ OverlaysModule, ChangeSupportModule ],
+	  __init__: [ 'subprocessElements', 'subprocessOverlays', 'subprocessCompatibility', 'subprocessCentering', 'subprocessFlows' ],
+	  subprocessElements: [ 'type', SubprocessElements ],
+	  subprocessOverlays: [ 'type', SubprocessOverlays ],
+	  subprocessCompatibility: [ 'type', SubprocessCompatibility ],
+	  subprocessCentering: [ 'type', SubprocessCentering ],
+	  subprocessFlows: ['type', SubprocessFlows]
+	};
+
 	/**
 	 * A viewer for BPMN 2.0 diagrams.
 	 *
@@ -21735,7 +22543,8 @@
 	  CoreModule,
 	  translate,
 	  SelectionModule,
-	  OverlaysModule
+	  OverlaysModule,
+	  SubprocessNavigationModule
 	];
 
 	// default moddle extensions the viewer is composed of
@@ -28263,130 +29072,6 @@
 	    calculateSegmentMoveRegion(segmentLengthYAxis);
 	}
 
-	var css_escape = {exports: {}};
-
-	/*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */
-
-	(function (module, exports) {
-	(function(root, factory) {
-		// https://github.com/umdjs/umd/blob/master/returnExports.js
-		{
-			// For Node.js.
-			module.exports = factory(root);
-		}
-	}(typeof commonjsGlobal != 'undefined' ? commonjsGlobal : commonjsGlobal, function(root) {
-
-		if (root.CSS && root.CSS.escape) {
-			return root.CSS.escape;
-		}
-
-		// https://drafts.csswg.org/cssom/#serialize-an-identifier
-		var cssEscape = function(value) {
-			if (arguments.length == 0) {
-				throw new TypeError('`CSS.escape` requires an argument.');
-			}
-			var string = String(value);
-			var length = string.length;
-			var index = -1;
-			var codeUnit;
-			var result = '';
-			var firstCodeUnit = string.charCodeAt(0);
-			while (++index < length) {
-				codeUnit = string.charCodeAt(index);
-				// Note: there’s no need to special-case astral symbols, surrogate
-				// pairs, or lone surrogates.
-
-				// If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
-				// (U+FFFD).
-				if (codeUnit == 0x0000) {
-					result += '\uFFFD';
-					continue;
-				}
-
-				if (
-					// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
-					// U+007F, […]
-					(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
-					// If the character is the first character and is in the range [0-9]
-					// (U+0030 to U+0039), […]
-					(index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
-					// If the character is the second character and is in the range [0-9]
-					// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
-					(
-						index == 1 &&
-						codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
-						firstCodeUnit == 0x002D
-					)
-				) {
-					// https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
-					result += '\\' + codeUnit.toString(16) + ' ';
-					continue;
-				}
-
-				if (
-					// If the character is the first character and is a `-` (U+002D), and
-					// there is no second character, […]
-					index == 0 &&
-					length == 1 &&
-					codeUnit == 0x002D
-				) {
-					result += '\\' + string.charAt(index);
-					continue;
-				}
-
-				// If the character is not handled by one of the above rules and is
-				// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
-				// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
-				// U+005A), or [a-z] (U+0061 to U+007A), […]
-				if (
-					codeUnit >= 0x0080 ||
-					codeUnit == 0x002D ||
-					codeUnit == 0x005F ||
-					codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
-					codeUnit >= 0x0041 && codeUnit <= 0x005A ||
-					codeUnit >= 0x0061 && codeUnit <= 0x007A
-				) {
-					// the character itself
-					result += string.charAt(index);
-					continue;
-				}
-
-				// Otherwise, the escaped character.
-				// https://drafts.csswg.org/cssom/#escape-a-character
-				result += '\\' + string.charAt(index);
-
-			}
-			return result;
-		};
-
-		if (!root.CSS) {
-			root.CSS = {};
-		}
-
-		root.CSS.escape = cssEscape;
-		return cssEscape;
-
-	}));
-	}(css_escape));
-
-	var cssEscape = css_escape.exports;
-
-	var HTML_ESCAPE_MAP = {
-	  '&': '&amp;',
-	  '<': '&lt;',
-	  '>': '&gt;',
-	  '"': '&quot;',
-	  '\'': '&#39;'
-	};
-
-	function escapeHTML(str) {
-	  str = '' + str;
-
-	  return str && str.replace(/[&<>"']/g, function(match) {
-	    return HTML_ESCAPE_MAP[match];
-	  });
-	}
-
 	/**
 	 * A service that adds editable bendpoints to connections.
 	 */
@@ -33447,23 +34132,13 @@
 	        element = context.element;
 
 	    var businessObject = descriptor.oldBusinessObject = getBusinessObject(element);
+	    var di = descriptor.oldDi = getDi(element);
 
 	    descriptor.type = element.type;
 
 	    copyProperties$1(businessObject, descriptor, 'name');
 
-	    descriptor.di = {};
-
-	    // colors will be set to DI
-	    copyProperties$1(businessObject.di, descriptor.di, [
-	      'fill',
-	      'stroke',
-	      'background-color',
-	      'border-color',
-	      'color'
-	    ]);
-
-	    copyProperties$1(businessObject.di, descriptor, 'isExpanded');
+	    copyProperties$1(di, descriptor, 'isExpanded');
 
 	    if (isLabel$3(descriptor)) {
 	      return descriptor;
@@ -33537,11 +34212,13 @@
 	    var cache = context.cache,
 	        descriptor = context.descriptor,
 	        oldBusinessObject = descriptor.oldBusinessObject,
-	        newBusinessObject;
+	        oldDi = descriptor.oldDi,
+	        newBusinessObject, newDi;
 
 	    // do NOT copy business object if external label
 	    if (isLabel$3(descriptor)) {
 	      descriptor.businessObject = getBusinessObject(cache[ descriptor.labelTarget ]);
+	      descriptor.di = getDi(cache[ descriptor.labelTarget ]);
 
 	      return;
 	    }
@@ -33553,6 +34230,13 @@
 	      newBusinessObject
 	    );
 
+	    newDi = bpmnFactory.create(oldDi.$type);
+
+	    descriptor.di = moddleCopy.copyElement(
+	      oldDi,
+	      newDi
+	    );
+
 	    // resolve references e.g. default sequence flow
 	    resolveReferences(descriptor, cache);
 
@@ -33784,11 +34468,16 @@
 
 	  var propertyDescriptor = this._moddle.getPropertyDescriptor(parent, propertyName);
 
-	  // do NOT copy Ids and references
-	  if (propertyDescriptor.isId || propertyDescriptor.isReference) {
+	  // do NOT copy references
+	  if (propertyDescriptor.isReference) {
 	    return;
 	  }
 
+	  // copy id
+	  if (propertyDescriptor.isId) {
+	    return this._copyId(property, parent);
+	  }
+
 	  // copy arrays
 	  if (isArray$2(property)) {
 	    return reduce(property, function(childProperties, childProperty) {
@@ -33827,6 +34516,18 @@
 	  return property;
 	};
 
+	ModdleCopy.prototype._copyId = function(id, element) {
+
+	  // disallow if already taken
+	  if (this._moddle.ids.assigned(id)) {
+	    return;
+	  } else {
+
+	    this._moddle.ids.claim(id, element);
+	    return id;
+	  }
+	};
+
 	// helpers //////////
 
 	function getPropertyNames(descriptor, keepDefaultProperties) {
@@ -33927,6 +34628,7 @@
 	  });
 	}
 
+
 	var CUSTOM_PROPERTIES = [
 	  'cancelActivity',
 	  'instantiate',
@@ -33935,8 +34637,10 @@
 	  'isInterrupting'
 	];
 
-
-	function toggeling(element, target) {
+	/**
+	 * Check if element should be collapsed or expanded.
+	 */
+	function shouldToggleCollapsed(element, targetElement) {
 
 	  var oldCollapsed = (
 	    element && has(element, 'collapsed') ? element.collapsed : !isExpanded(element)
@@ -33944,11 +34648,11 @@
 
 	  var targetCollapsed;
 
-	  if (target && (has(target, 'collapsed') || has(target, 'isExpanded'))) {
+	  if (targetElement && (has(targetElement, 'collapsed') || has(targetElement, 'isExpanded'))) {
 
 	    // property is explicitly set so use it
 	    targetCollapsed = (
-	      has(target, 'collapsed') ? target.collapsed : !target.isExpanded
+	      has(targetElement, 'collapsed') ? targetElement.collapsed : !targetElement.isExpanded
 	    );
 	  } else {
 
@@ -33957,7 +34661,6 @@
 	  }
 
 	  if (oldCollapsed !== targetCollapsed) {
-	    element.collapsed = oldCollapsed;
 	    return true;
 	  }
 
@@ -33965,7 +34668,6 @@
 	}
 
 
-
 	/**
 	 * This module takes care of replacing BPMN elements
 	 */
@@ -33996,15 +34698,13 @@
 	    var type = target.type,
 	        oldBusinessObject = element.businessObject;
 
-	    if (isSubProcess(oldBusinessObject)) {
-	      if (type === 'bpmn:SubProcess') {
-	        if (toggeling(element, target)) {
+	    if (isSubProcess(oldBusinessObject) && type === 'bpmn:SubProcess') {
+	      if (shouldToggleCollapsed(element, target)) {
 
-	          // expanding or collapsing process
-	          modeling.toggleCollapse(element);
+	        // expanding or collapsing process
+	        modeling.toggleCollapse(element);
 
-	          return element;
-	        }
+	        return element;
 	      }
 	    }
 
@@ -34012,9 +34712,20 @@
 
 	    var newElement = {
 	      type: type,
-	      businessObject: newBusinessObject
+	      businessObject: newBusinessObject,
 	    };
 
+	    newElement.di = {};
+
+	    // colors will be set to DI
+	    copyProperties(element.di, newElement.di, [
+	      'fill',
+	      'stroke',
+	      'background-color',
+	      'border-color',
+	      'color'
+	    ]);
+
 	    var elementProps = getPropertyNames(oldBusinessObject.$descriptor),
 	        newElementProps = getPropertyNames(newBusinessObject.$descriptor, true),
 	        copyProps = intersection(elementProps, newElementProps);
@@ -34074,7 +34785,7 @@
 	      if (isSubProcess(oldBusinessObject)) {
 
 	        // no toggeling, so keep old state
-	        newElement.isExpanded = isExpanded(oldBusinessObject);
+	        newElement.isExpanded = isExpanded(element);
 	      }
 
 	      // else if property is explicitly set, use it
@@ -34085,7 +34796,7 @@
 	      // TODO: need also to respect min/max Size
 	      // copy size, from an expanded subprocess to an expanded alternative subprocess
 	      // except bpmn:Task, because Task is always expanded
-	      if ((isExpanded(oldBusinessObject) && !is$1(oldBusinessObject, 'bpmn:Task')) && newElement.isExpanded) {
+	      if ((isExpanded(element) && !is$1(oldBusinessObject, 'bpmn:Task')) && newElement.isExpanded) {
 	        newElement.width = element.width;
 	        newElement.height = element.height;
 	      }
@@ -34110,12 +34821,12 @@
 
 	      // apply same width and default height
 	      newElement.width = element.width;
-	      newElement.height = elementFactory._getDefaultSize(newBusinessObject).height;
+	      newElement.height = elementFactory.getDefaultSize(newElement).height;
 	    }
 
 	    if (!rules.allowed('shape.resize', { shape: newBusinessObject })) {
-	      newElement.height = elementFactory._getDefaultSize(newBusinessObject).height;
-	      newElement.width = elementFactory._getDefaultSize(newBusinessObject).width;
+	      newElement.height = elementFactory.getDefaultSize(newElement).height;
+	      newElement.width = elementFactory.getDefaultSize(newElement).width;
 	    }
 
 	    newBusinessObject.name = oldBusinessObject.name;
@@ -34153,16 +34864,6 @@
 	      newElement.x = element.x + (element.width - newElement.width) / 2;
 	    }
 
-	    newElement.di = {};
-
-	    // colors will be set to DI
-	    copyProperties(oldBusinessObject.di, newElement.di, [
-	      'fill',
-	      'stroke',
-	      'background-color',
-	      'border-color',
-	      'color'
-	    ]);
 
 	    newElement = replace.replaceElement(element, newElement, hints);
 
@@ -34247,7 +34948,7 @@
 
 	    var isExpandedEqual = (
 	      target.isExpanded === undefined ||
-	      target.isExpanded === isExpanded(businessObject)
+	      target.isExpanded === isExpanded(element)
 	    );
 
 	    return !isTypeEqual || !isEventDefinitionEqual || !isTriggeredByEventEqual || !isExpandedEqual;
@@ -35184,7 +35885,7 @@
 	  if (is$1(businessObject, 'bpmn:Participant')) {
 
 	    entries = filter(PARTICIPANT, function(entry) {
-	      return isExpanded(businessObject) !== entry.target.isExpanded;
+	      return isExpanded(element) !== entry.target.isExpanded;
 	    });
 
 	    return this._createEntries(element, entries);
@@ -35280,7 +35981,7 @@
 	  }
 
 	  // expanded event sub processes
-	  if (isEventSubProcess(businessObject) && isExpanded(businessObject)) {
+	  if (isEventSubProcess(businessObject) && isExpanded(element)) {
 
 	    entries = filter(EVENT_SUB_PROCESS, differentType);
 
@@ -35288,7 +35989,7 @@
 	  }
 
 	  // expanded sub processes
-	  if (is$1(businessObject, 'bpmn:SubProcess') && isExpanded(businessObject)) {
+	  if (is$1(businessObject, 'bpmn:SubProcess') && isExpanded(element)) {
 
 	    entries = filter(SUBPROCESS_EXPANDED, differentType);
 
@@ -35296,7 +35997,7 @@
 	  }
 
 	  // collapsed ad hoc sub processes
-	  if (is$1(businessObject, 'bpmn:AdHocSubProcess') && !isExpanded(businessObject)) {
+	  if (is$1(businessObject, 'bpmn:AdHocSubProcess') && !isExpanded(element)) {
 
 	    entries = filter(TASK, function(entry) {
 
@@ -35322,7 +36023,7 @@
 	    entries = filter(TASK, differentType);
 
 	    // collapsed SubProcess can not be replaced with itself
-	    if (is$1(businessObject, 'bpmn:SubProcess') && !isExpanded(businessObject)) {
+	    if (is$1(businessObject, 'bpmn:SubProcess') && !isExpanded(element)) {
 	      entries = filter(entries, function(entry) {
 	        return entry.label !== 'Sub Process (collapsed)';
 	      });
@@ -36228,7 +36929,7 @@
 	  }
 
 
-	  if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(businessObject)) {
+	  if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(element)) {
 
 	    var childLanes = getChildLanes(element);
 
@@ -38455,75 +39156,6 @@
 	  keyboardMoveSelection: [ 'type', KeyboardMoveSelection ]
 	};
 
-	/**
-	 * Adds change support to the diagram, including
-	 *
-	 * <ul>
-	 *   <li>redrawing shapes and connections on change</li>
-	 * </ul>
-	 *
-	 * @param {EventBus} eventBus
-	 * @param {Canvas} canvas
-	 * @param {ElementRegistry} elementRegistry
-	 * @param {GraphicsFactory} graphicsFactory
-	 */
-	function ChangeSupport(
-	    eventBus, canvas, elementRegistry,
-	    graphicsFactory) {
-
-
-	  // redraw shapes / connections on change
-
-	  eventBus.on('element.changed', function(event) {
-
-	    var element = event.element;
-
-	    // element might have been deleted and replaced by new element with same ID
-	    // thus check for parent of element except for root element
-	    if (element.parent || element === canvas.getRootElement()) {
-	      event.gfx = elementRegistry.getGraphics(element);
-	    }
-
-	    // shape + gfx may have been deleted
-	    if (!event.gfx) {
-	      return;
-	    }
-
-	    eventBus.fire(getType(element) + '.changed', event);
-	  });
-
-	  eventBus.on('elements.changed', function(event) {
-
-	    var elements = event.elements;
-
-	    elements.forEach(function(e) {
-	      eventBus.fire('element.changed', { element: e });
-	    });
-
-	    graphicsFactory.updateContainments(elements);
-	  });
-
-	  eventBus.on('shape.changed', function(event) {
-	    graphicsFactory.update('shape', event.element, event.gfx);
-	  });
-
-	  eventBus.on('connection.changed', function(event) {
-	    graphicsFactory.update('connection', event.element, event.gfx);
-	  });
-	}
-
-	ChangeSupport.$inject = [
-	  'eventBus',
-	  'canvas',
-	  'elementRegistry',
-	  'graphicsFactory'
-	];
-
-	var ChangeSupportModule = {
-	  __init__: [ 'changeSupport'],
-	  changeSupport: [ 'type', ChangeSupport ]
-	};
-
 	var DEFAULT_MIN_WIDTH = 10;
 
 
@@ -39615,9 +40247,9 @@
 	// helpers ///////////////////
 
 	function getStrokeColor(element, defaultColor) {
-	  var bo = getBusinessObject(element);
+	  var di = getDi(element);
 
-	  return bo.di.get('stroke') || defaultColor || 'black';
+	  return di.get('stroke') || defaultColor || 'black';
 	}
 
 	var LabelEditingModule = {
@@ -40828,21 +41460,23 @@
 
 	UpdateSemanticParentHandler.prototype.execute = function(context) {
 	  var dataStoreBo = context.dataStoreBo,
+	      dataStoreDi = context.dataStoreDi,
 	      newSemanticParent = context.newSemanticParent,
 	      newDiParent = context.newDiParent;
 
 	  context.oldSemanticParent = dataStoreBo.$parent;
-	  context.oldDiParent = dataStoreBo.di.$parent;
+	  context.oldDiParent = dataStoreDi.$parent;
 
 	  // update semantic parent
 	  this._bpmnUpdater.updateSemanticParent(dataStoreBo, newSemanticParent);
 
 	  // update DI parent
-	  this._bpmnUpdater.updateDiParent(dataStoreBo.di, newDiParent);
+	  this._bpmnUpdater.updateDiParent(dataStoreDi, newDiParent);
 	};
 
 	UpdateSemanticParentHandler.prototype.revert = function(context) {
 	  var dataStoreBo = context.dataStoreBo,
+	      dataStoreDi = context.dataStoreDi,
 	      oldSemanticParent = context.oldSemanticParent,
 	      oldDiParent = context.oldDiParent;
 
@@ -40850,7 +41484,7 @@
 	  this._bpmnUpdater.updateSemanticParent(dataStoreBo, oldSemanticParent);
 
 	  // update DI parent
-	  this._bpmnUpdater.updateDiParent(dataStoreBo.di, oldDiParent);
+	  this._bpmnUpdater.updateDiParent(dataStoreDi, oldDiParent);
 	};
 
 	/**
@@ -40886,8 +41520,9 @@
 
 	      commandStack.execute('dataStore.updateContainment', {
 	        dataStoreBo: dataStoreBo,
+	        dataStoreDi: getDi(dataStore),
 	        newSemanticParent: newDataStoreParentBo.processRef || newDataStoreParentBo,
-	        newDiParent: newDataStoreParentBo.di
+	        newDiParent: getDi(newDataStoreParent)
 	      });
 	    }
 	  }
@@ -41827,12 +42462,14 @@
 	  ];
 
 	  this.executed([ 'shape.move', 'shape.create', 'shape.resize' ], function(event) {
-	    var bo = getBusinessObject(event.context.shape);
+	    var shape = event.context.shape,
+	        bo = getBusinessObject(shape),
+	        di = getDi(shape);
 
-	    if (isAny(bo, elementTypesToUpdate) && !bo.di.get('isHorizontal')) {
+	    if (isAny(bo, elementTypesToUpdate) && !di.get('isHorizontal')) {
 
 	      // set attribute directly to avoid modeling#updateProperty side effects
-	      bo.di.set('isHorizontal', true);
+	      di.set('isHorizontal', true);
 	    }
 	  });
 
@@ -42638,27 +43275,27 @@
 
 	    var context = event.context,
 	        element = context.shape,
-	        businessObject,
+	        labelTarget = context.labelTarget,
 	        di;
 
 	    // we want to trigger on real labels only
-	    if (!element.labelTarget) {
+	    if (!labelTarget) {
 	      return;
 	    }
 
 	    // we want to trigger on BPMN elements only
-	    if (!is$1(element.labelTarget || element, 'bpmn:BaseElement')) {
+	    if (!is$1(labelTarget, 'bpmn:BaseElement')) {
 	      return;
 	    }
 
-	    businessObject = element.businessObject,
-	    di = businessObject.di;
-
+	    di = getDi(labelTarget);
 
 	    if (!di.label) {
 	      di.label = bpmnFactory.create('bpmndi:BPMNLabel', {
 	        bounds: bpmnFactory.create('dc:Bounds')
 	      });
+
+	      element.di = di;
 	    }
 
 	    assign(di.label.bounds, {
@@ -43428,6 +44065,49 @@
 	  'selection'
 	];
 
+	var HIGH_PRIORITY$8 = 1500;
+
+	var LANE_MIN_DIMENSIONS = { width: 300, height: 60 };
+
+	var PARTICIPANT_MIN_DIMENSIONS = { width: 300, height: 150 };
+
+	var SUB_PROCESS_MIN_DIMENSIONS = { width: 140, height: 120 };
+
+	var TEXT_ANNOTATION_MIN_DIMENSIONS = { width: 50, height: 30 };
+
+	/**
+	 * Set minimum bounds/resize constraints on resize.
+	 *
+	 * @param {EventBus} eventBus
+	 */
+	function ResizeBehavior(eventBus) {
+	  eventBus.on('resize.start', HIGH_PRIORITY$8, function(event) {
+	    var context = event.context,
+	        shape = context.shape,
+	        direction = context.direction,
+	        balanced = context.balanced;
+
+	    if (is$1(shape, 'bpmn:Lane') || is$1(shape, 'bpmn:Participant')) {
+	      context.resizeConstraints = getParticipantResizeConstraints(shape, direction, balanced);
+	    }
+
+	    if (is$1(shape, 'bpmn:Participant')) {
+	      context.minDimensions = PARTICIPANT_MIN_DIMENSIONS;
+	    }
+
+	    if (is$1(shape, 'bpmn:SubProcess') && isExpanded(shape)) {
+	      context.minDimensions = SUB_PROCESS_MIN_DIMENSIONS;
+	    }
+
+	    if (is$1(shape, 'bpmn:TextAnnotation')) {
+	      context.minDimensions = TEXT_ANNOTATION_MIN_DIMENSIONS;
+	    }
+	  });
+	}
+
+	ResizeBehavior.$inject = [ 'eventBus' ];
+
+
 	var abs$2 = Math.abs,
 	    min = Math.min,
 	    max$2 = Math.max;
@@ -43455,7 +44135,6 @@
 	    LANE_TOP_PADDING = 20,
 	    LANE_BOTTOM_PADDING = 20;
 
-
 	function getParticipantResizeConstraints(laneShape, resizeDirection, balanced) {
 	  var lanesRoot = getLanesRoot(laneShape);
 
@@ -43548,49 +44227,6 @@
 	  };
 	}
 
-	var HIGH_PRIORITY$8 = 1500;
-
-	var LANE_MIN_DIMENSIONS = { width: 300, height: 60 };
-
-	var PARTICIPANT_MIN_DIMENSIONS = { width: 300, height: 150 };
-
-	var SUB_PROCESS_MIN_DIMENSIONS = { width: 140, height: 120 };
-
-	var TEXT_ANNOTATION_MIN_DIMENSIONS = { width: 50, height: 30 };
-
-
-	/**
-	 * Set minimum bounds/resize constraints on resize.
-	 *
-	 * @param {EventBus} eventBus
-	 */
-	function ResizeBehavior(eventBus) {
-	  eventBus.on('resize.start', HIGH_PRIORITY$8, function(event) {
-	    var context = event.context,
-	        shape = context.shape,
-	        direction = context.direction,
-	        balanced = context.balanced;
-
-	    if (is$1(shape, 'bpmn:Lane') || is$1(shape, 'bpmn:Participant')) {
-	      context.resizeConstraints = getParticipantResizeConstraints(shape, direction, balanced);
-	    }
-
-	    if (is$1(shape, 'bpmn:Participant')) {
-	      context.minDimensions = PARTICIPANT_MIN_DIMENSIONS;
-	    }
-
-	    if (is$1(shape, 'bpmn:SubProcess') && isExpanded(shape)) {
-	      context.minDimensions = SUB_PROCESS_MIN_DIMENSIONS;
-	    }
-
-	    if (is$1(shape, 'bpmn:TextAnnotation')) {
-	      context.minDimensions = TEXT_ANNOTATION_MIN_DIMENSIONS;
-	    }
-	  });
-	}
-
-	ResizeBehavior.$inject = [ 'eventBus' ];
-
 	var SLIGHTLY_HIGHER_PRIORITY = 1001;
 
 
@@ -43945,11 +44581,11 @@
 	      hideEmptyLabels(shape.children);
 
 	      // remove collapsed marker
-	      getBusinessObject(shape).di.isExpanded = true;
+	      getDi(shape).isExpanded = true;
 	    } else {
 
 	      // place collapsed marker
-	      getBusinessObject(shape).di.isExpanded = false;
+	      getDi(shape).isExpanded = false;
 	    }
 	  });
 
@@ -43961,16 +44597,16 @@
 
 	    // revert removing/placing collapsed marker
 	    if (!shape.collapsed) {
-	      getBusinessObject(shape).di.isExpanded = true;
+	      getDi(shape).isExpanded = true;
 
 	    } else {
-	      getBusinessObject(shape).di.isExpanded = false;
+	      getDi(shape).isExpanded = false;
 	    }
 	  });
 
 	  this.postExecuted([ 'shape.toggleCollapse' ], LOW_PRIORITY$8, function(e) {
 	    var shape = e.context.shape,
-	        defaultSize = elementFactory._getDefaultSize(shape),
+	        defaultSize = elementFactory.getDefaultSize(shape),
 	        newBounds;
 
 	    if (shape.collapsed) {
@@ -45276,7 +45912,7 @@
 
 	  function orderDi() {
 	    var root = canvas.getRootElement(),
-	        rootDi = getBusinessObject(root).di,
+	        rootDi = getDi(root),
 	        elements,
 	        diElements;
 
@@ -48037,11 +48673,10 @@
 	};
 
 
-	BpmnFactory.prototype.createDiShape = function(semantic, bounds, attrs) {
-
+	BpmnFactory.prototype.createDiShape = function(semantic, attrs) {
 	  return this.create('bpmndi:BPMNShape', assign({
 	    bpmnElement: semantic,
-	    bounds: this.createDiBounds(bounds)
+	    bounds: this.createDiBounds()
 	  }, attrs));
 	};
 
@@ -48064,16 +48699,17 @@
 	};
 
 
-	BpmnFactory.prototype.createDiEdge = function(semantic, waypoints, attrs) {
+	BpmnFactory.prototype.createDiEdge = function(semantic, attrs) {
 	  return this.create('bpmndi:BPMNEdge', assign({
-	    bpmnElement: semantic
+	    bpmnElement: semantic,
+	    waypoints: this.createDiWaypoints([])
 	  }, attrs));
 	};
 
-	BpmnFactory.prototype.createDiPlane = function(semantic) {
-	  return this.create('bpmndi:BPMNPlane', {
+	BpmnFactory.prototype.createDiPlane = function(semantic, attrs) {
+	  return this.create('bpmndi:BPMNPlane', assign({
 	    bpmnElement: semantic
-	  });
+	  }, attrs));
 	};
 
 	/**
@@ -48358,8 +48994,9 @@
 	  var parentShape = element.parent;
 
 	  var businessObject = element.businessObject,
+	      di = getDi(element),
 	      parentBusinessObject = parentShape && parentShape.businessObject,
-	      parentDi = parentBusinessObject && parentBusinessObject.di;
+	      parentDi = getDi(parentShape);
 
 	  if (is$1(element, 'bpmn:FlowNode')) {
 	    this.updateFlowNodeRefs(businessObject, parentBusinessObject, oldParent && oldParent.businessObject);
@@ -48387,13 +49024,13 @@
 	    this.updateSemanticParent(businessObject.dataObjectRef, parentBusinessObject);
 	  }
 
-	  this.updateDiParent(businessObject.di, parentDi);
+	  this.updateDiParent(di, parentDi);
 	};
 
 
 	BpmnUpdater.prototype.updateBounds = function(shape) {
 
-	  var di = shape.businessObject.di;
+	  var di = getDi(shape);
 
 	  var target = (shape instanceof Label) ? this._getLabel(di) : di;
 
@@ -48433,14 +49070,17 @@
 
 
 	// update existing sourceElement and targetElement di information
-	BpmnUpdater.prototype.updateDiConnection = function(di, newSource, newTarget) {
+	BpmnUpdater.prototype.updateDiConnection = function(connection, newSource, newTarget) {
+	  var connectionDi = getDi(connection),
+	      newSourceDi = getDi(newSource),
+	      newTargetDi = getDi(newTarget);
 
-	  if (di.sourceElement && di.sourceElement.bpmnElement !== newSource) {
-	    di.sourceElement = newSource && newSource.di;
+	  if (connectionDi.sourceElement && connectionDi.sourceElement.bpmnElement !== getBusinessObject(newSource)) {
+	    connectionDi.sourceElement = newSource && newSourceDi;
 	  }
 
-	  if (di.targetElement && di.targetElement.bpmnElement !== newTarget) {
-	    di.targetElement = newTarget && newTarget.di;
+	  if (connectionDi.targetElement && connectionDi.targetElement.bpmnElement !== getBusinessObject(newTarget)) {
+	    connectionDi.targetElement = newTarget && newTargetDi;
 	  }
 
 	};
@@ -48665,69 +49305,72 @@
 
 
 	BpmnUpdater.prototype.updateConnectionWaypoints = function(connection) {
-	  connection.businessObject.di.set('waypoint', this._bpmnFactory.createDiWaypoints(connection.waypoints));
+	  var di = getDi(connection);
+
+	  di.set('waypoint', this._bpmnFactory.createDiWaypoints(connection.waypoints));
 	};
 
 
 	BpmnUpdater.prototype.updateConnection = function(context) {
-
 	  var connection = context.connection,
 	      businessObject = getBusinessObject(connection),
-	      newSource = getBusinessObject(connection.source),
-	      newTarget = getBusinessObject(connection.target),
+	      newSource = connection.source,
+	      newSourceBo = getBusinessObject(newSource),
+	      newTarget = connection.target,
+	      newTargetBo = getBusinessObject(connection.target),
 	      visualParent;
 
 	  if (!is$1(businessObject, 'bpmn:DataAssociation')) {
 
 	    var inverseSet = is$1(businessObject, 'bpmn:SequenceFlow');
 
-	    if (businessObject.sourceRef !== newSource) {
+	    if (businessObject.sourceRef !== newSourceBo) {
 	      if (inverseSet) {
 	        remove(businessObject.sourceRef && businessObject.sourceRef.get('outgoing'), businessObject);
 
-	        if (newSource && newSource.get('outgoing')) {
-	          newSource.get('outgoing').push(businessObject);
+	        if (newSourceBo && newSourceBo.get('outgoing')) {
+	          newSourceBo.get('outgoing').push(businessObject);
 	        }
 	      }
 
-	      businessObject.sourceRef = newSource;
+	      businessObject.sourceRef = newSourceBo;
 	    }
 
-	    if (businessObject.targetRef !== newTarget) {
+	    if (businessObject.targetRef !== newTargetBo) {
 	      if (inverseSet) {
 	        remove(businessObject.targetRef && businessObject.targetRef.get('incoming'), businessObject);
 
-	        if (newTarget && newTarget.get('incoming')) {
-	          newTarget.get('incoming').push(businessObject);
+	        if (newTargetBo && newTargetBo.get('incoming')) {
+	          newTargetBo.get('incoming').push(businessObject);
 	        }
 	      }
 
-	      businessObject.targetRef = newTarget;
+	      businessObject.targetRef = newTargetBo;
 	    }
 	  } else
 
 	  if (is$1(businessObject, 'bpmn:DataInputAssociation')) {
 
 	    // handle obnoxious isMsome sourceRef
-	    businessObject.get('sourceRef')[0] = newSource;
+	    businessObject.get('sourceRef')[0] = newSourceBo;
 
-	    visualParent = context.parent || context.newParent || newTarget;
+	    visualParent = context.parent || context.newParent || newTargetBo;
 
-	    this.updateSemanticParent(businessObject, newTarget, visualParent);
+	    this.updateSemanticParent(businessObject, newTargetBo, visualParent);
 	  } else
 
 	  if (is$1(businessObject, 'bpmn:DataOutputAssociation')) {
-	    visualParent = context.parent || context.newParent || newSource;
+	    visualParent = context.parent || context.newParent || newSourceBo;
 
-	    this.updateSemanticParent(businessObject, newSource, visualParent);
+	    this.updateSemanticParent(businessObject, newSourceBo, visualParent);
 
 	    // targetRef = new target
-	    businessObject.targetRef = newTarget;
+	    businessObject.targetRef = newTargetBo;
 	  }
 
 	  this.updateConnectionWaypoints(connection);
 
-	  this.updateDiConnection(businessObject.di, newSource, newTarget);
+	  this.updateDiConnection(connection, newSource, newTarget);
 	};
 
 
@@ -48789,7 +49432,8 @@
 	  // we assume their businessObjects have already been created
 	  // and wired via attrs
 	  if (elementType === 'label') {
-	    return this.baseCreate(elementType, assign({ type: 'label' }, DEFAULT_LABEL_SIZE, attrs));
+	    var di = attrs.di || this._bpmnFactory.createDiLabel();
+	    return this.baseCreate(elementType, assign({ type: 'label', di: di }, DEFAULT_LABEL_SIZE, attrs));
 	  }
 
 	  return this.createBpmnElement(elementType, attrs);
@@ -48801,7 +49445,8 @@
 
 	  attrs = attrs || {};
 
-	  var businessObject = attrs.businessObject;
+	  var businessObject = attrs.businessObject,
+	      di = attrs.di;
 
 	  if (!businessObject) {
 	    if (!attrs.type) {
@@ -48809,22 +49454,23 @@
 	    }
 
 	    businessObject = this._bpmnFactory.create(attrs.type);
+
+	    ensureCompatDiRef(businessObject);
 	  }
 
-	  if (!businessObject.di) {
+	  if (!isModdleDi(di)) {
+	    var diAttrs = assign(
+	      di || {},
+	      { id: businessObject.id + '_di' }
+	    );
+
 	    if (elementType === 'root') {
-	      businessObject.di = this._bpmnFactory.createDiPlane(businessObject, [], {
-	        id: businessObject.id + '_di'
-	      });
+	      di = this._bpmnFactory.createDiPlane(businessObject, diAttrs);
 	    } else
 	    if (elementType === 'connection') {
-	      businessObject.di = this._bpmnFactory.createDiEdge(businessObject, [], {
-	        id: businessObject.id + '_di'
-	      });
+	      di = this._bpmnFactory.createDiEdge(businessObject, diAttrs);
 	    } else {
-	      businessObject.di = this._bpmnFactory.createDiShape(businessObject, {}, {
-	        id: businessObject.id + '_di'
-	      });
+	      di = this._bpmnFactory.createDiShape(businessObject, diAttrs);
 	    }
 	  }
 
@@ -48834,12 +49480,6 @@
 	    }, attrs);
 	  }
 
-	  if (attrs.di) {
-	    assign(businessObject.di, attrs.di);
-
-	    delete attrs.di;
-	  }
-
 	  applyAttributes(businessObject, attrs, [
 	    'processRef',
 	    'isInterrupting',
@@ -48848,11 +49488,11 @@
 	  ]);
 
 	  if (attrs.isExpanded) {
-	    applyAttribute(businessObject.di, attrs, 'isExpanded');
+	    applyAttribute(di, attrs, 'isExpanded');
 	  }
 
 	  if (is$1(businessObject, 'bpmn:ExclusiveGateway')) {
-	    businessObject.di.isMarkerVisible = true;
+	    di.isMarkerVisible = true;
 	  }
 
 	  var eventDefinitions,
@@ -48874,65 +49514,69 @@
 	    delete attrs.eventDefinitionType;
 	  }
 
-	  size = this._getDefaultSize(businessObject);
+	  size = this.getDefaultSize(businessObject, di);
 
 	  attrs = assign({
-	    businessObject: businessObject,
 	    id: businessObject.id
-	  }, size, attrs);
+	  }, size, attrs, {
+	    businessObject: businessObject,
+	    di: di
+	  });
 
 	  return this.baseCreate(elementType, attrs);
 	};
 
 
-	ElementFactory.prototype._getDefaultSize = function(semantic) {
+	ElementFactory.prototype.getDefaultSize = function(element, di) {
 
-	  if (is$1(semantic, 'bpmn:SubProcess')) {
+	  var bo = getBusinessObject(element);
+	  di = di || getDi(element);
 
-	    if (isExpanded(semantic)) {
+	  if (is$1(bo, 'bpmn:SubProcess')) {
+	    if (isExpanded(bo, di)) {
 	      return { width: 350, height: 200 };
 	    } else {
 	      return { width: 100, height: 80 };
 	    }
 	  }
 
-	  if (is$1(semantic, 'bpmn:Task')) {
+	  if (is$1(bo, 'bpmn:Task')) {
 	    return { width: 100, height: 80 };
 	  }
 
-	  if (is$1(semantic, 'bpmn:Gateway')) {
+	  if (is$1(bo, 'bpmn:Gateway')) {
 	    return { width: 50, height: 50 };
 	  }
 
-	  if (is$1(semantic, 'bpmn:Event')) {
+	  if (is$1(bo, 'bpmn:Event')) {
 	    return { width: 36, height: 36 };
 	  }
 
-	  if (is$1(semantic, 'bpmn:Participant')) {
-	    if (isExpanded(semantic)) {
+	  if (is$1(bo, 'bpmn:Participant')) {
+	    if (isExpanded(bo, di)) {
 	      return { width: 600, height: 250 };
 	    } else {
 	      return { width: 400, height: 60 };
 	    }
 	  }
 
-	  if (is$1(semantic, 'bpmn:Lane')) {
+	  if (is$1(bo, 'bpmn:Lane')) {
 	    return { width: 400, height: 100 };
 	  }
 
-	  if (is$1(semantic, 'bpmn:DataObjectReference')) {
+	  if (is$1(bo, 'bpmn:DataObjectReference')) {
 	    return { width: 36, height: 50 };
 	  }
 
-	  if (is$1(semantic, 'bpmn:DataStoreReference')) {
+	  if (is$1(bo, 'bpmn:DataStoreReference')) {
 	    return { width: 50, height: 50 };
 	  }
 
-	  if (is$1(semantic, 'bpmn:TextAnnotation')) {
+	  if (is$1(bo, 'bpmn:TextAnnotation')) {
 	    return { width: 100, height: 30 };
 	  }
 
-	  if (is$1(semantic, 'bpmn:Group')) {
+	  if (is$1(bo, 'bpmn:Group')) {
 	    return { width: 300, height: 300 };
 	  }
 
@@ -48997,6 +49641,16 @@
 	  delete attrs[attributeName];
 	}
 
+
+	function isModdleDi(element) {
+	  return isAny(element, [
+	    'bpmndi:BPMNShape',
+	    'bpmndi:BPMNEdge',
+	    'bpmndi:BPMNDiagram',
+	    'bpmndi:BPMNPlane',
+	  ]);
+	}
+
 	/**
 	 * A handler that align elements in a certain way.
 	 *
@@ -51464,7 +52118,7 @@
 
 	  var businessObject = element.businessObject,
 	      properties = unwrapBusinessObjects(context.properties),
-	      oldProperties = context.oldProperties || getProperties(businessObject, properties);
+	      oldProperties = context.oldProperties || getProperties(element, properties);
 
 	  if (isIdChange(properties, businessObject)) {
 	    ids.unclaim(businessObject[ID]);
@@ -51487,7 +52141,7 @@
 	  }
 
 	  // update properties
-	  setProperties(businessObject, properties);
+	  setProperties(element, properties);
 
 	  // store old values
 	  context.oldProperties = oldProperties;
@@ -51532,7 +52186,7 @@
 	      ids = this._moddle.ids;
 
 	  // update properties
-	  setProperties(businessObject, oldProperties);
+	  setProperties(element, oldProperties);
 
 	  if (isIdChange(properties, businessObject)) {
 	    ids.unclaim(properties[ID]);
@@ -51551,16 +52205,19 @@
 	}
 
 
-	function getProperties(businessObject, properties) {
-	  var propertyNames = keys(properties);
+	function getProperties(element, properties) {
+	  var propertyNames = keys(properties),
+	      businessObject = element.businessObject,
+	      di = getDi(element);
 
 	  return reduce(propertyNames, function(result, key) {
 
 	    // handle DI separately
 	    if (key !== DI) {
 	      result[key] = businessObject.get(key);
+
 	    } else {
-	      result[key] = getDiProperties(businessObject.di, keys(properties.di));
+	      result[key] = getDiProperties(di, keys(properties.di));
 	    }
 
 	    return result;
@@ -51570,23 +52227,26 @@
 
 	function getDiProperties(di, propertyNames) {
 	  return reduce(propertyNames, function(result, key) {
-	    result[key] = di.get(key);
+	    result[key] = di && di.get(key);
 
 	    return result;
 	  }, {});
 	}
 
 
-	function setProperties(businessObject, properties) {
+	function setProperties(element, properties) {
+	  var businessObject = element.businessObject,
+	      di = getDi(element);
+
 	  forEach(properties, function(value, key) {
 
 	    if (key !== DI) {
 	      businessObject.set(key, value);
 	    } else {
 
-	      // only update, if businessObject.di exists
-	      if (businessObject.di) {
-	        setDiProperties(businessObject.di, value);
+	      // only update, if di exists
+	      if (di) {
+	        setDiProperties(di, value);
 	      }
 	    }
 	  });
@@ -51644,7 +52304,7 @@
 	      oldRoot = canvas.getRootElement(),
 	      oldRootBusinessObject = oldRoot.businessObject,
 	      bpmnDefinitions = oldRootBusinessObject.$parent,
-	      diPlane = oldRootBusinessObject.di;
+	      diPlane = getDi(oldRoot);
 
 	  // (1) replace process old <> new root
 	  canvas.setRootElement(newRoot, true);
@@ -51657,10 +52317,10 @@
 	  oldRootBusinessObject.$parent = null;
 
 	  // (3) wire di
-	  oldRootBusinessObject.di = null;
+	  oldRoot.di = null;
 
 	  diPlane.bpmnElement = newRootBusinessObject;
-	  newRootBusinessObject.di = diPlane;
+	  newRoot.di = diPlane;
 
 	  context.oldRoot = oldRoot;
 
@@ -51678,7 +52338,7 @@
 	      oldRoot = context.oldRoot,
 	      oldRootBusinessObject = oldRoot.businessObject,
 	      bpmnDefinitions = newRootBusinessObject.$parent,
-	      diPlane = newRootBusinessObject.di;
+	      diPlane = getDi(newRoot);
 
 	  // (1) replace process old <> new root
 	  canvas.setRootElement(oldRoot, true);
@@ -51691,10 +52351,10 @@
 	  oldRootBusinessObject.$parent = bpmnDefinitions;
 
 	  // (3) wire di
-	  newRootBusinessObject.di = null;
+	  newRoot.di = null;
 
 	  diPlane.bpmnElement = oldRootBusinessObject;
-	  oldRootBusinessObject.di = diPlane;
+	  oldRoot.di = diPlane;
 
 	  // TODO(nikku): return changed elements?
 	  // return [ newRoot, oldRoot ];
@@ -52363,7 +53023,8 @@
 
 	      modeling.createLabel(element, labelCenter, {
 	        id: businessObject.id + '_label',
-	        businessObject: businessObject
+	        businessObject: businessObject,
+	        di: element.di
 	      });
 	    }
 	  }
@@ -55424,7 +56085,8 @@
 	      var shape = elementFactory.createShape(assign({ type: type }, options));
 
 	      if (options) {
-	        shape.businessObject.di.isExpanded = options.isExpanded;
+	        var di = getDi(shape);
+	        di.isExpanded = options.isExpanded;
 	      }
 
 	      create.start(event, shape);