camunda-bpmn-js 3.6.1 → 3.8.0

package/dist/camunda-cloud-navigated-viewer.development.js

@@ -1795,6 +1795,7 @@
   }
 
   var black = 'hsl(225, 10%, 15%)';
+  var white = 'white';
 
   // element utils //////////////////////
 
@@ -1842,39 +1843,42 @@
   /**
    * @param {Element} element
    * @param {string} [defaultColor]
+   * @param {string} [overrideColor]
    *
    * @return {string}
    */
-  function getFillColor(element, defaultColor) {
+  function getFillColor(element, defaultColor, overrideColor) {
     var di = getDi(element);
 
-    return di.get('color:background-color') || di.get('bioc:fill') || defaultColor || 'white';
+    return overrideColor || di.get('color:background-color') || di.get('bioc:fill') || defaultColor || white;
   }
 
   /**
    * @param {Element} element
    * @param {string} [defaultColor]
+   * @param {string} [overrideColor]
    *
    * @return {string}
    */
-  function getStrokeColor(element, defaultColor) {
+  function getStrokeColor(element, defaultColor, overrideColor) {
     var di = getDi(element);
 
-    return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
+    return overrideColor || di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
   }
 
   /**
    * @param {Element} element
    * @param {string} [defaultColor]
    * @param {string} [defaultStrokeColor]
+   * @param {string} [overrideColor]
    *
    * @return {string}
    */
-  function getLabelColor(element, defaultColor, defaultStrokeColor) {
+  function getLabelColor(element, defaultColor, defaultStrokeColor, overrideColor) {
     var di = getDi(element),
         label = di.get('label');
 
-    return label && label.get('color:color') || defaultColor ||
+    return overrideColor || (label && label.get('color:color')) || defaultColor ||
       getStrokeColor(element, defaultStrokeColor);
   }
 
@@ -1978,6 +1982,45 @@
     return componentsToPath(rectPath);
   }
 
+  /**
+   * Get width and height from element or overrides.
+   *
+   * @param {Dimensions|Rect|Shape} bounds
+   * @param {Object} overrides
+   *
+   * @returns {Dimensions}
+   */
+  function getBounds(bounds, overrides = {}) {
+    return {
+      width: getWidth(bounds, overrides),
+      height: getHeight(bounds, overrides)
+    };
+  }
+
+  /**
+   * Get width from element or overrides.
+   *
+   * @param {Dimensions|Rect|Shape} bounds
+   * @param {Object} overrides
+   *
+   * @returns {number}
+   */
+  function getWidth(bounds, overrides = {}) {
+    return has$1(overrides, 'width') ? overrides.width : bounds.width;
+  }
+
+  /**
+   * Get height from element or overrides.
+   *
+   * @param {Dimensions|Rect|Shape} bounds
+   * @param {Object} overrides
+   *
+   * @returns {number}
+   */
+  function getHeight(bounds, overrides = {}) {
+    return has$1(overrides, 'height') ? overrides.height : bounds.height;
+  }
+
   function _mergeNamespaces$1(n, m) {
     m.forEach(function (e) {
       e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -2741,15 +2784,16 @@
     }
   };
 
-  var RENDERER_IDS = new Ids();
+  var rendererIds = new Ids();
 
-  var TASK_BORDER_RADIUS = 10;
-  var INNER_OUTER_DIST = 3;
+  var ELEMENT_LABEL_DISTANCE = 10,
+      INNER_OUTER_DIST = 3,
+      PARTICIPANT_STROKE_WIDTH = 1.5,
+      TASK_BORDER_RADIUS = 10;
 
-  var DEFAULT_FILL_OPACITY = .95,
-      HIGH_FILL_OPACITY = .35;
-
-  var ELEMENT_LABEL_DISTANCE = 10;
+  var DEFAULT_OPACITY = 0.95,
+      FULL_OPACITY = 1,
+      LOW_OPACITY = 0.25;
 
   /**
    * @typedef { Partial<{
@@ -2757,6 +2801,13 @@
    *   defaultStrokeColor: string,
    *   defaultLabelColor: string
    * }> } BpmnRendererConfig
+   *
+   * @typedef { Partial<{
+   *   fill: string,
+   *   stroke: string,
+   *   width: string,
+   *   height: string
+   * }> } Attrs
    */
 
   /**
@@ -2784,7 +2835,7 @@
         defaultStrokeColor = config && config.defaultStrokeColor,
         defaultLabelColor = config && config.defaultLabelColor;
 
-    var rendererId = RENDERER_IDS.next();
+    var rendererId = rendererIds.next();
 
     var markers = {};
 
@@ -2880,7 +2931,7 @@
           cy: 6,
           r: 3.5,
           ...shapeStyle({
-            fill: fill,
+            fill,
             stroke: stroke,
             strokeWidth: 1,
 
@@ -2900,7 +2951,7 @@
         var messageflowEnd = create$1('path', {
           d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z',
           ...shapeStyle({
-            fill: fill,
+            fill,
             stroke: stroke,
             strokeWidth: 1,
 
@@ -2921,7 +2972,7 @@
           d: 'M 11 5 L 1 10 L 11 15',
           ...lineStyle({
             fill: 'none',
-            stroke: stroke,
+            stroke,
             strokeWidth: 1.5,
 
             // fix for safari / chrome / firefox bug not correctly
@@ -2942,7 +2993,7 @@
           d: 'M 1 5 L 11 10 L 1 15',
           ...lineStyle({
             fill: 'none',
-            stroke: stroke,
+            stroke,
             strokeWidth: 1.5,
 
             // fix for safari / chrome / firefox bug not correctly
@@ -2962,7 +3013,7 @@
         var conditionalFlowMarker = create$1('path', {
           d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z',
           ...shapeStyle({
-            fill: fill,
+            fill,
             stroke: stroke
           })
         });
@@ -2990,7 +3041,7 @@
       }
     }
 
-    function drawCircle(parentGfx, width, height, offset, attrs) {
+    function drawCircle(parentGfx, width, height, offset, attrs = {}) {
 
       if (isObject(offset)) {
         attrs = offset;
@@ -3001,10 +3052,6 @@
 
       attrs = shapeStyle(attrs);
 
-      if (attrs.fill === 'none') {
-        delete attrs.fillOpacity;
-      }
-
       var cx = width / 2,
           cy = height / 2;
 
@@ -3104,7 +3151,6 @@
     }
 
     function drawPath(parentGfx, d, attrs) {
-
       attrs = lineStyle(attrs);
 
       var path = create$1('path', {
@@ -3126,171 +3172,13 @@
     }
 
     function as(type) {
-      return function(parentGfx, element, options) {
-        return renderer(type)(parentGfx, element, options);
-      };
-    }
-
-    function renderEventContent(element, parentGfx) {
-
-      var event = getBusinessObject(element);
-      var isThrowing = isThrowEvent(event);
-
-      if (event.eventDefinitions && event.eventDefinitions.length > 1) {
-        if (event.parallelMultiple) {
-          return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, isThrowing);
-        }
-        else {
-          return renderer('bpmn:MultipleEventDefinition')(parentGfx, element, isThrowing);
-        }
-      }
-
-      if (isTypedEvent(event, 'bpmn:MessageEventDefinition')) {
-        return renderer('bpmn:MessageEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:TimerEventDefinition')) {
-        return renderer('bpmn:TimerEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:ConditionalEventDefinition')) {
-        return renderer('bpmn:ConditionalEventDefinition')(parentGfx, element);
-      }
-
-      if (isTypedEvent(event, 'bpmn:SignalEventDefinition')) {
-        return renderer('bpmn:SignalEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:EscalationEventDefinition')) {
-        return renderer('bpmn:EscalationEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:LinkEventDefinition')) {
-        return renderer('bpmn:LinkEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:ErrorEventDefinition')) {
-        return renderer('bpmn:ErrorEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:CancelEventDefinition')) {
-        return renderer('bpmn:CancelEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:CompensateEventDefinition')) {
-        return renderer('bpmn:CompensateEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      if (isTypedEvent(event, 'bpmn:TerminateEventDefinition')) {
-        return renderer('bpmn:TerminateEventDefinition')(parentGfx, element, isThrowing);
-      }
-
-      return null;
-    }
-
-    function renderLabel(parentGfx, label, options) {
-
-      options = assign$1({
-        size: {
-          width: 100
-        }
-      }, options);
-
-      var text = textRenderer.createText(label || '', options);
-
-      classes$1(text).add('djs-label');
-
-      append(parentGfx, text);
-
-      return text;
-    }
-
-    function renderEmbeddedLabel(parentGfx, element, align) {
-      var semantic = getBusinessObject(element);
-
-      return renderLabel(parentGfx, semantic.name, {
-        box: element,
-        align: align,
-        padding: 7,
-        style: {
-          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-        }
-      });
-    }
-
-    function renderExternalLabel(parentGfx, element) {
-
-      var box = {
-        width: 90,
-        height: 30,
-        x: element.width / 2 + element.x,
-        y: element.height / 2 + element.y
+      return function(parentGfx, element, attrs) {
+        return renderer(type)(parentGfx, element, attrs);
       };
-
-      return renderLabel(parentGfx, getLabel(element), {
-        box: box,
-        fitBox: true,
-        style: assign$1(
-          {},
-          textRenderer.getExternalStyle(),
-          {
-            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-          }
-        )
-      });
-    }
-
-    function renderLaneLabel(parentGfx, text, element) {
-      var textBox = renderLabel(parentGfx, text, {
-        box: {
-          height: 30,
-          width: element.height
-        },
-        align: 'center-middle',
-        style: {
-          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-        }
-      });
-
-      var top = -1 * element.height;
-
-      transform(textBox, 0, -top, 270);
     }
 
-    var handlers = this.handlers = {
-      'bpmn:Event': function(parentGfx, element, attrs) {
-
-        if (!('fillOpacity' in attrs)) {
-          attrs.fillOpacity = DEFAULT_FILL_OPACITY;
-        }
-
-        return drawCircle(parentGfx, element.width, element.height, attrs);
-      },
-      'bpmn:StartEvent': function(parentGfx, element, options) {
-        var attrs = {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        };
-
-        var semantic = getBusinessObject(element);
-
-        if (!semantic.isInterrupting) {
-          attrs = {
-            strokeDasharray: '6',
-            fill: getFillColor(element, defaultFillColor),
-            stroke: getStrokeColor(element, defaultStrokeColor)
-          };
-        }
-
-        var circle = renderer('bpmn:Event')(parentGfx, element, attrs);
-
-        if (!options || options.renderIcon !== false) {
-          renderEventContent(element, parentGfx);
-        }
-
-        return circle;
-      },
-      'bpmn:MessageEventDefinition': function(parentGfx, element, isThrowing) {
+    var eventIconRenderers = {
+      'bpmn:MessageEventDefinition': function(parentGfx, element, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_MESSAGE', {
           xScaleFactor: 0.9,
           yScaleFactor: 0.9,
@@ -3302,22 +3190,27 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(element, defaultStrokeColor) : getFillColor(element, defaultFillColor);
-        var stroke = isThrowing ? getFillColor(element, defaultFillColor) : getStrokeColor(element, defaultStrokeColor);
+        var fill = isThrowing
+          ? getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+          : getFillColor(element, defaultFillColor, attrs.fill);
+
+        var stroke = isThrowing
+          ? getFillColor(element, defaultFillColor, attrs.fill)
+          : getStrokeColor(element, defaultStrokeColor, attrs.stroke);
 
         var messagePath = drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: stroke
+          fill,
+          stroke,
+          strokeWidth: 1
         });
 
         return messagePath;
       },
-      'bpmn:TimerEventDefinition': function(parentGfx, element) {
+      'bpmn:TimerEventDefinition': function(parentGfx, element, attrs = {}) {
         var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
-          strokeWidth: 2,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 2
         });
 
         var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {
@@ -3332,12 +3225,11 @@
         });
 
         drawPath(parentGfx, pathData, {
-          strokeWidth: 2,
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 2
         });
 
-        for (var i = 0;i < 12; i++) {
-
+        for (var i = 0; i < 12; i++) {
           var linePathData = pathMap.getScaledPath('EVENT_TIMER_LINE', {
             xScaleFactor: 0.75,
             yScaleFactor: 0.75,
@@ -3349,19 +3241,19 @@
             }
           });
 
-          var width = element.width / 2;
-          var height = element.height / 2;
+          var width = element.width / 2,
+              height = element.height / 2;
 
           drawPath(parentGfx, linePathData, {
             strokeWidth: 1,
-            transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
-            stroke: getStrokeColor(element, defaultStrokeColor)
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')'
           });
         }
 
         return circle;
       },
-      'bpmn:EscalationEventDefinition': function(parentGfx, event, isThrowing) {
+      'bpmn:EscalationEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_ESCALATION', {
           xScaleFactor: 1,
           yScaleFactor: 1,
@@ -3373,15 +3265,17 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      'bpmn:ConditionalEventDefinition': function(parentGfx, event) {
+      'bpmn:ConditionalEventDefinition': function(parentGfx, event, attrs = {}) {
         var pathData = pathMap.getScaledPath('EVENT_CONDITIONAL', {
           xScaleFactor: 1,
           yScaleFactor: 1,
@@ -3394,11 +3288,12 @@
         });
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill: getFillColor(event, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      'bpmn:LinkEventDefinition': function(parentGfx, event, isThrowing) {
+      'bpmn:LinkEventDefinition': function(parentGfx, event, attrs = {}, isThrowing) {
         var pathData = pathMap.getScaledPath('EVENT_LINK', {
           xScaleFactor: 1,
           yScaleFactor: 1,
@@ -3410,15 +3305,17 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      '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,
@@ -3430,15 +3327,17 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      '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,
@@ -3450,19 +3349,19 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor, attrs.stroke) : 'none';
 
         var path = drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
         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,
@@ -3474,15 +3373,17 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      '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,
@@ -3494,15 +3395,17 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
           strokeWidth: 1,
-          fill: fill,
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill,
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke)
         });
       },
-      '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,
@@ -3514,14 +3417,16 @@
           }
         });
 
-        var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
+        var fill = isThrowing
+          ? getStrokeColor(event, defaultStrokeColor, attrs.stroke)
+          : getFillColor(event, defaultFillColor, attrs.fill);
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: fill
+          fill,
+          strokeWidth: 1
         });
       },
-      'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event) {
+      'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event, attrs = {}) {
         var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {
           xScaleFactor: 1.2,
           yScaleFactor: 1.2,
@@ -3534,445 +3439,640 @@
         });
 
         return drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getStrokeColor(event, defaultStrokeColor),
-          stroke: getStrokeColor(event, defaultStrokeColor)
+          fill: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
       },
-      'bpmn:EndEvent': function(parentGfx, element, options) {
-        var circle = renderer('bpmn:Event')(parentGfx, element, {
-          strokeWidth: 4,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
-
-        if (!options || options.renderIcon !== false) {
-          renderEventContent(element, parentGfx);
-        }
-
-        return circle;
-      },
-      'bpmn:TerminateEventDefinition': function(parentGfx, element) {
+      'bpmn:TerminateEventDefinition': function(parentGfx, element, attrs = {}) {
         var circle = drawCircle(parentGfx, element.width, element.height, 8, {
-          strokeWidth: 4,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 4
         });
 
         return circle;
-      },
-      'bpmn:IntermediateEvent': function(parentGfx, element, options) {
-        var outer = renderer('bpmn:Event')(parentGfx, element, {
-          strokeWidth: 1.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+      }
+    };
 
-        /* inner */
-        drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
-          strokeWidth: 1.5,
-          fill: getFillColor(element, 'none'),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+    function renderEventIcon(element, parentGfx, attrs = {}) {
+      var semantic = getBusinessObject(element),
+          isThrowing = isThrowEvent(semantic);
 
-        if (!options || options.renderIcon !== false) {
-          renderEventContent(element, parentGfx);
+      if (semantic.get('eventDefinitions') && semantic.get('eventDefinitions').length > 1) {
+        if (semantic.get('parallelMultiple')) {
+          return eventIconRenderers[ 'bpmn:ParallelMultipleEventDefinition' ](parentGfx, element, attrs, isThrowing);
         }
+        else {
+          return eventIconRenderers[ 'bpmn:MultipleEventDefinition' ](parentGfx, element, attrs, isThrowing);
+        }
+      }
 
-        return outer;
-      },
-      'bpmn:IntermediateCatchEvent': as('bpmn:IntermediateEvent'),
-      'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),
-
-      'bpmn:Activity': function(parentGfx, element, attrs) {
+      if (isTypedEvent(semantic, 'bpmn:MessageEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:MessageEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        attrs = attrs || {};
+      if (isTypedEvent(semantic, 'bpmn:TimerEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:TimerEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        if (!('fillOpacity' in attrs)) {
-          attrs.fillOpacity = DEFAULT_FILL_OPACITY;
-        }
+      if (isTypedEvent(semantic, 'bpmn:ConditionalEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:ConditionalEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
-      },
+      if (isTypedEvent(semantic, 'bpmn:SignalEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:SignalEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-      'bpmn:Task': function(parentGfx, element) {
-        var attrs = {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        };
+      if (isTypedEvent(semantic, 'bpmn:EscalationEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:EscalationEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
+      if (isTypedEvent(semantic, 'bpmn:LinkEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:LinkEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        renderEmbeddedLabel(parentGfx, element, 'center-middle');
-        attachTaskMarkers(parentGfx, element);
+      if (isTypedEvent(semantic, 'bpmn:ErrorEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:ErrorEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        return rect;
-      },
-      'bpmn:ServiceTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
+      if (isTypedEvent(semantic, 'bpmn:CancelEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:CancelEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        var pathDataBG = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
-          abspos: {
-            x: 12,
-            y: 18
-          }
-        });
+      if (isTypedEvent(semantic, 'bpmn:CompensateEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:CompensateEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        /* service bg */ drawPath(parentGfx, pathDataBG, {
-          strokeWidth: 1,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+      if (isTypedEvent(semantic, 'bpmn:TerminateEventDefinition')) {
+        return eventIconRenderers[ 'bpmn:TerminateEventDefinition' ](parentGfx, element, attrs, isThrowing);
+      }
 
-        var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', {
-          abspos: {
-            x: 17.2,
-            y: 18
-          }
-        });
+      return null;
+    }
 
-        /* service fill */ drawPath(parentGfx, fillPathData, {
-          strokeWidth: 0,
-          fill: getFillColor(element, defaultFillColor)
-        });
+    var taskMarkerRenderers = {
+      'ParticipantMultiplicityMarker': function(parentGfx, element, attrs = {}) {
+        var width = getWidth(element, attrs),
+            height = getHeight(element, attrs);
 
-        var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
-          abspos: {
-            x: 17,
-            y: 22
+        var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: width,
+          containerHeight: height,
+          position: {
+            mx: ((width / 2 - 6) / width),
+            my: (height - 15) / height
           }
         });
 
-        /* service */ drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawMarker('participant-multiplicity', parentGfx, markerPath, {
+          strokeWidth: 2,
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
-
-        return task;
       },
-      'bpmn:UserTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
-
-        var x = 15;
-        var y = 12;
-
-        var pathData = pathMap.getScaledPath('TASK_TYPE_USER_1', {
-          abspos: {
-            x: x,
-            y: y
-          }
+      'SubProcessMarker': function(parentGfx, element, attrs = {}) {
+        var markerRect = drawRect(parentGfx, 14, 14, 0, {
+          strokeWidth: 1,
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
 
-        /* user path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 0.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+        translate$1(markerRect, element.width / 2 - 7.5, element.height - 20);
 
-        var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
-          abspos: {
-            x: x,
-            y: y
+        var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
+          xScaleFactor: 1.5,
+          yScaleFactor: 1.5,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: (element.width / 2 - 7.5) / element.width,
+            my: (element.height - 20) / element.height
           }
         });
 
-        /* user2 path */ drawPath(parentGfx, pathData2, {
-          strokeWidth: 0.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawMarker('sub-process', parentGfx, markerPath, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
+      },
+      'ParallelMarker': function(parentGfx, element, attrs) {
+        var width = getWidth(element, attrs),
+            height = getHeight(element, attrs);
 
-        var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
-          abspos: {
-            x: x,
-            y: y
+        var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: width,
+          containerHeight: height,
+          position: {
+            mx: ((width / 2 + attrs.parallel) / width),
+            my: (height - 20) / height
           }
         });
 
-        /* user3 path */ drawPath(parentGfx, pathData3, {
-          strokeWidth: 0.5,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawMarker('parallel', parentGfx, markerPath, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
-
-        return task;
       },
-      'bpmn:ManualTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
-
-        var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
-          abspos: {
-            x: 17,
-            y: 15
+      'SequentialMarker': function(parentGfx, element, attrs) {
+        var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: ((element.width / 2 + attrs.seq) / element.width),
+            my: (element.height - 19) / element.height
           }
         });
 
-        /* manual path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 0.5, // 0.25,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawMarker('sequential', parentGfx, markerPath, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
-
-        return task;
       },
-      'bpmn:SendTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
-
-        var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
+      'CompensationMarker': function(parentGfx, element, attrs) {
+        var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: 21,
-          containerHeight: 14,
+          containerWidth: element.width,
+          containerHeight: element.height,
           position: {
-            mx: 0.285,
-            my: 0.357
+            mx: ((element.width / 2 + attrs.compensation) / element.width),
+            my: (element.height - 13) / element.height
           }
         });
 
-        /* send path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getFillColor(element, defaultFillColor)
-        });
-
-        return task;
-      },
-      'bpmn:ReceiveTask' : function(parentGfx, element) {
-        var semantic = getBusinessObject(element);
-
-        var task = renderer('bpmn:Task')(parentGfx, element);
-        var pathData;
-
-        if (semantic.instantiate) {
-          drawCircle(parentGfx, 28, 28, 20 * 0.22, { strokeWidth: 1 });
-
-          pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
-            abspos: {
-              x: 7.77,
-              y: 9.52
-            }
-          });
-        } else {
-
-          pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
-            xScaleFactor: 0.9,
-            yScaleFactor: 0.9,
-            containerWidth: 21,
-            containerHeight: 14,
-            position: {
-              mx: 0.3,
-              my: 0.4
-            }
-          });
-        }
-
-        /* receive path */ drawPath(parentGfx, pathData, {
+        drawMarker('compensation', parentGfx, markerMath, {
           strokeWidth: 1,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
-
-        return task;
       },
-      'bpmn:ScriptTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
+      'LoopMarker': function(parentGfx, element, attrs) {
+        var width = getWidth(element, attrs),
+            height = getHeight(element, attrs);
 
-        var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
-          abspos: {
-            x: 15,
-            y: 20
+        var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: width,
+          containerHeight: height,
+          position: {
+            mx: ((width / 2 + attrs.loop) / width),
+            my: (height - 7) / height
           }
         });
 
-        /* script path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawMarker('loop', parentGfx, markerPath, {
+          strokeWidth: 1.5,
+          fill: 'none',
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeMiterlimit: 0.5
         });
-
-        return task;
       },
-      'bpmn:BusinessRuleTask': function(parentGfx, element) {
-        var task = renderer('bpmn:Task')(parentGfx, element);
+      'AdhocMarker': function(parentGfx, element, attrs) {
+        var width = getWidth(element, attrs),
+            height = getHeight(element, attrs);
 
-        var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
-          abspos: {
-            x: 8,
-            y: 8
+        var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: width,
+          containerHeight: height,
+          position: {
+            mx: ((width / 2 + attrs.adhoc) / width),
+            my: (height - 15) / height
           }
         });
 
-        var businessHeaderPath = drawPath(parentGfx, headerPathData);
-        attr$1(businessHeaderPath, {
+        drawMarker('adhoc', parentGfx, markerPath, {
           strokeWidth: 1,
-          fill: getFillColor(element, '#aaaaaa'),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
+      }
+    };
 
-        var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
-          abspos: {
-            x: 8,
-            y: 8
-          }
-        });
+    function renderTaskMarker(type, parentGfx, element, attrs) {
+      taskMarkerRenderers[ type ](parentGfx, element, attrs);
+    }
 
-        var businessPath = drawPath(parentGfx, headerData);
-        attr$1(businessPath, {
-          strokeWidth: 1,
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+    function renderTaskMarkers(parentGfx, element, taskMarkers, attrs = {}) {
+      attrs = {
+        fill: attrs.fill,
+        stroke: attrs.stroke,
+        width: getWidth(element, attrs),
+        height: getHeight(element, attrs)
+      };
 
-        return task;
-      },
-      'bpmn:SubProcess': function(parentGfx, element, attrs) {
+      var semantic = getBusinessObject(element);
+
+      var subprocess = taskMarkers && taskMarkers.includes('SubProcessMarker');
+
+      if (subprocess) {
         attrs = {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          ...attrs
+          ...attrs,
+          seq: -21,
+          parallel: -22,
+          compensation: -42,
+          loop: -18,
+          adhoc: 10
         };
+      } else {
+        attrs = {
+          ...attrs,
+          seq: -5,
+          parallel: -6,
+          compensation: -27,
+          loop: 0,
+          adhoc: 10
+        };
+      }
 
-        var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
+      forEach$1(taskMarkers, function(marker) {
+        renderTaskMarker(marker, parentGfx, element, attrs);
+      });
 
-        var expanded = isExpanded(element);
+      if (semantic.get('isForCompensation')) {
+        renderTaskMarker('CompensationMarker', parentGfx, element, attrs);
+      }
 
-        if (isEventSubProcess(element)) {
-          attr$1(rect, {
-            strokeDasharray: '0, 5.5',
-            strokeWidth: 2.5
-          });
+      if (is$1(semantic, 'bpmn:AdHocSubProcess')) {
+        renderTaskMarker('AdhocMarker', parentGfx, element, attrs);
+      }
+
+      var loopCharacteristics = semantic.get('loopCharacteristics'),
+          isSequential = loopCharacteristics && loopCharacteristics.get('isSequential');
+
+      if (loopCharacteristics) {
+
+        if (isSequential === undefined) {
+          renderTaskMarker('LoopMarker', parentGfx, element, attrs);
         }
 
-        renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle');
+        if (isSequential === false) {
+          renderTaskMarker('ParallelMarker', parentGfx, element, attrs);
+        }
 
-        if (expanded) {
-          attachTaskMarkers(parentGfx, element);
-        } else {
-          attachTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ]);
+        if (isSequential === true) {
+          renderTaskMarker('SequentialMarker', parentGfx, element, attrs);
         }
+      }
+    }
 
-        return rect;
-      },
-      'bpmn:AdHocSubProcess': function(parentGfx, element) {
-        return renderer('bpmn:SubProcess')(parentGfx, element);
-      },
-      'bpmn:Transaction': function(parentGfx, element) {
-        var outer = renderer('bpmn:SubProcess')(parentGfx, element, { strokeWidth: 1.5 });
+    function renderLabel(parentGfx, label, attrs = {}) {
+      attrs = assign$1({
+        size: {
+          width: 100
+        }
+      }, attrs);
 
-        var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeWidth: 1.5
+      var text = textRenderer.createText(label || '', attrs);
+
+      classes$1(text).add('djs-label');
+
+      append(parentGfx, text);
+
+      return text;
+    }
+
+    function renderEmbeddedLabel(parentGfx, element, align, attrs = {}) {
+      var semantic = getBusinessObject(element);
+
+      var box = getBounds({
+        x: element.x,
+        y: element.y,
+        width: element.width,
+        height: element.height
+      }, attrs);
+
+      return renderLabel(parentGfx, semantic.name, {
+        align,
+        box,
+        padding: 7,
+        style: {
+          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+        }
+      });
+    }
+
+    function renderExternalLabel(parentGfx, element, attrs = {}) {
+      var box = {
+        width: 90,
+        height: 30,
+        x: element.width / 2 + element.x,
+        y: element.height / 2 + element.y
+      };
+
+      return renderLabel(parentGfx, getLabel(element), {
+        box: box,
+        fitBox: true,
+        style: assign$1(
+          {},
+          textRenderer.getExternalStyle(),
+          {
+            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+          }
+        )
+      });
+    }
+
+    function renderLaneLabel(parentGfx, text, element, attrs = {}) {
+      var textBox = renderLabel(parentGfx, text, {
+        box: {
+          height: 30,
+          width: getHeight(element, attrs),
+        },
+        align: 'center-middle',
+        style: {
+          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+        }
+      });
+
+      var top = -1 * getHeight(element, attrs);
+
+      transform(textBox, 0, -top, 270);
+    }
+
+    function renderActivity(parentGfx, element, attrs = {}) {
+      var {
+        width,
+        height
+      } = getBounds(element, attrs);
+
+      return drawRect(parentGfx, width, height, TASK_BORDER_RADIUS, {
+        ...attrs,
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        fillOpacity: DEFAULT_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+      });
+    }
+
+    function renderAssociation(parentGfx, element, attrs = {}) {
+      var semantic = getBusinessObject(element);
+
+      var fill = getFillColor(element, defaultFillColor, attrs.fill),
+          stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
+
+      if (semantic.get('associationDirection') === 'One' ||
+          semantic.get('associationDirection') === 'Both') {
+        attrs.markerEnd = marker('association-end', fill, stroke);
+      }
+
+      if (semantic.get('associationDirection') === 'Both') {
+        attrs.markerStart = marker('association-start', fill, stroke);
+      }
+
+      attrs = pickAttrs(attrs, [
+        'markerStart',
+        'markerEnd'
+      ]);
+
+      return drawConnectionSegments(parentGfx, element.waypoints, {
+        ...attrs,
+        stroke,
+        strokeDasharray: '0, 5'
+      });
+    }
+
+    function renderDataObject(parentGfx, element, attrs = {}) {
+      var fill = getFillColor(element, defaultFillColor, attrs.fill),
+          stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
+
+      var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.474,
+          my: 0.296
+        }
+      });
+
+      var dataObject = drawPath(parentGfx, pathData, {
+        fill,
+        fillOpacity: DEFAULT_OPACITY,
+        stroke
+      });
+
+      var semantic = getBusinessObject(element);
+
+      if (isCollection(semantic)) {
+        var collectionPathData = pathMap.getScaledPath('DATA_OBJECT_COLLECTION_PATH', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: 0.33,
+            my: (element.height - 18) / element.height
+          }
         });
 
-        /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 3, INNER_OUTER_DIST, innerAttrs);
+        drawPath(parentGfx, collectionPathData, {
+          strokeWidth: 2,
+          fill,
+          stroke
+        });
+      }
 
-        return outer;
-      },
-      'bpmn:CallActivity': function(parentGfx, element) {
-        return renderer('bpmn:SubProcess')(parentGfx, element, {
-          strokeWidth: 5
+      return dataObject;
+    }
+
+    function renderEvent(parentGfx, element, attrs = {}) {
+      return drawCircle(parentGfx, element.width, element.height, {
+        fillOpacity: DEFAULT_OPACITY,
+        ...attrs,
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+      });
+    }
+
+    function renderGateway(parentGfx, element, attrs = {}) {
+      return drawDiamond(parentGfx, element.width, element.height, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        fillOpacity: DEFAULT_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+      });
+    }
+
+    function renderLane(parentGfx, element, attrs = {}) {
+      var lane = drawRect(parentGfx, getWidth(element, attrs), getHeight(element, attrs), 0, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        fillOpacity: attrs.fillOpacity || DEFAULT_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1.5
+      });
+
+      var semantic = getBusinessObject(element);
+
+      if (is$1(semantic, 'bpmn:Lane')) {
+        var text = semantic.get('name');
+
+        renderLaneLabel(parentGfx, text, element, attrs);
+      }
+
+      return lane;
+    }
+
+    function renderSubProcess(parentGfx, element, attrs = {}) {
+      var activity = renderActivity(parentGfx, element, attrs);
+
+      if (isEventSubProcess(element)) {
+        attr$1(activity, {
+          strokeDasharray: '0, 5.5',
+          strokeWidth: 2.5
         });
-      },
-      'bpmn:Participant': function(parentGfx, element) {
+      }
 
-        var strokeWidth = 1.5;
+      var expanded = isExpanded(element);
 
-        var attrs = {
-          fillOpacity: DEFAULT_FILL_OPACITY,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeWidth
-        };
+      renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle', attrs);
+
+      if (expanded) {
+        renderTaskMarkers(parentGfx, element, undefined, attrs);
+      } else {
+        renderTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ], attrs);
+      }
 
-        var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
+      return activity;
+    }
 
-        var expandedPool = isExpanded(element);
+    function renderTask(parentGfx, element, attrs = {}) {
+      var activity = renderActivity(parentGfx, element, attrs);
 
-        if (expandedPool) {
-          drawLine(parentGfx, [
-            { x: 30, y: 0 },
-            { x: 30, y: element.height }
-          ], {
-            stroke: getStrokeColor(element, defaultStrokeColor),
-            strokeWidth
-          });
-          var text = getBusinessObject(element).name;
-          renderLaneLabel(parentGfx, text, element);
-        } else {
+      renderEmbeddedLabel(parentGfx, element, 'center-middle', attrs);
 
-          // collapsed pool draw text inline
-          var text2 = getBusinessObject(element).name;
-          renderLabel(parentGfx, text2, {
-            box: element, align: 'center-middle',
-            style: {
-              fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-            }
-          });
-        }
+      renderTaskMarkers(parentGfx, element, undefined, attrs);
 
-        var participantMultiplicity = !!(getBusinessObject(element).participantMultiplicity);
+      return activity;
+    }
 
-        if (participantMultiplicity) {
-          renderer('ParticipantMultiplicityMarker')(parentGfx, element);
+    var handlers = this.handlers = {
+      'bpmn:AdHocSubProcess': function(parentGfx, element, attrs = {}) {
+        if (isExpanded(element)) {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke',
+            'width',
+            'height'
+          ]);
+        } else {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke'
+          ]);
         }
 
-        return lane;
+        return renderSubProcess(parentGfx, element, attrs);
       },
-      'bpmn:Lane': function(parentGfx, element, attrs) {
-        var rect = drawRect(parentGfx, element.width, element.height, 0, {
-          fill: getFillColor(element, defaultFillColor),
-          fillOpacity: HIGH_FILL_OPACITY,
-          stroke: getStrokeColor(element, defaultStrokeColor),
+      'bpmn:Association': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        return renderAssociation(parentGfx, element, attrs);
+      },
+      'bpmn:BoundaryEvent': function(parentGfx, element, attrs = {}) {
+        var { renderIcon = true } = attrs;
+
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var semantic = getBusinessObject(element),
+            cancelActivity = semantic.get('cancelActivity');
+
+        attrs = {
           strokeWidth: 1.5,
-          ...attrs
-        });
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          fillOpacity: FULL_OPACITY,
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+        };
 
-        var semantic = getBusinessObject(element);
+        if (!cancelActivity) {
+          attrs.strokeDasharray = '6';
+        }
 
-        if (semantic.$type === 'bpmn:Lane') {
-          var text = semantic.name;
-          renderLaneLabel(parentGfx, text, element);
+        var event = renderEvent(parentGfx, element, attrs);
+
+        drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
+          ...attrs,
+          fill: 'none'
+        });
+
+        if (renderIcon) {
+          renderEventIcon(element, parentGfx, attrs);
         }
 
-        return rect;
+        return event;
       },
-      'bpmn:InclusiveGateway': function(parentGfx, element) {
-        var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+      'bpmn:BusinessRuleTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        /* circle path */
-        drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
-          strokeWidth: 2.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        var task = renderTask(parentGfx, element, attrs);
+
+        var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
+          abspos: {
+            x: 8,
+            y: 8
+          }
         });
 
-        return diamond;
-      },
-      'bpmn:ExclusiveGateway': function(parentGfx, element) {
-        var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+        var businessPath = drawPath(parentGfx, headerData);
 
-        var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
-          xScaleFactor: 0.4,
-          yScaleFactor: 0.4,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: 0.32,
-            my: 0.3
+        attr$1(businessPath, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
+
+        var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
+          abspos: {
+            x: 8,
+            y: 8
           }
         });
 
-        if ((getDi(element).isMarkerVisible)) {
-          drawPath(parentGfx, pathData, {
-            strokeWidth: 1,
-            fill: getStrokeColor(element, defaultStrokeColor),
-            stroke: getStrokeColor(element, defaultStrokeColor)
-          });
-        }
+        var businessHeaderPath = drawPath(parentGfx, headerPathData);
 
-        return diamond;
+        attr$1(businessHeaderPath, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
+
+        return task;
+      },
+      'bpmn:CallActivity': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        return renderSubProcess(parentGfx, element, {
+          strokeWidth: 5,
+          ...attrs
+        });
       },
-      'bpmn:ComplexGateway': function(parentGfx, element) {
-        var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+      'bpmn:ComplexGateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var gateway = renderGateway(parentGfx, element, attrs);
 
         var pathData = pathMap.getScaledPath('GATEWAY_COMPLEX', {
           xScaleFactor: 0.5,
@@ -3985,50 +4085,142 @@
           }
         });
 
-        /* complex path */ drawPath(parentGfx, pathData, {
+        drawPath(parentGfx, pathData, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
+
+        return gateway;
+      },
+      'bpmn:DataInput': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+
+        var dataObject = renderDataObject(parentGfx, element, attrs);
+
+        drawPath(parentGfx, arrowPathData, {
+          fill: 'none',
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
+
+        return dataObject;
+      },
+      'bpmn:DataInputAssociation': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        return renderAssociation(parentGfx, element, {
+          ...attrs,
+          markerEnd: marker('association-end', getFillColor(element, defaultFillColor, attrs.fill), getStrokeColor(element, defaultStrokeColor, attrs.stroke))
+        });
+      },
+      'bpmn:DataObject': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        return renderDataObject(parentGfx, element, attrs);
+      },
+      'bpmn:DataObjectReference': as('bpmn:DataObject'),
+      'bpmn:DataOutput': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+
+        var dataObject = renderDataObject(parentGfx, element, attrs);
+
+        drawPath(parentGfx, arrowPathData, {
           strokeWidth: 1,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
 
-        return diamond;
+        return dataObject;
       },
-      'bpmn:ParallelGateway': function(parentGfx, element) {
-        var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+      'bpmn:DataOutputAssociation': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
-          xScaleFactor: 0.6,
-          yScaleFactor:0.6,
+        return renderAssociation(parentGfx, element, {
+          ...attrs,
+          markerEnd: marker('association-end', getFillColor(element, defaultFillColor, attrs.fill), getStrokeColor(element, defaultStrokeColor, attrs.stroke))
+        });
+      },
+      'bpmn:DataStoreReference': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var dataStorePath = pathMap.getScaledPath('DATA_STORE', {
+          xScaleFactor: 1,
+          yScaleFactor: 1,
           containerWidth: element.width,
           containerHeight: element.height,
           position: {
-            mx: 0.46,
-            my: 0.2
+            mx: 0,
+            my: 0.133
           }
         });
 
-        /* parallel path */ drawPath(parentGfx, pathData, {
-          strokeWidth: 1,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        return drawPath(parentGfx, dataStorePath, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          fillOpacity: DEFAULT_OPACITY,
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 2
         });
+      },
+      'bpmn:EndEvent': function(parentGfx, element, attrs = {}) {
+        var { renderIcon = true } = attrs;
 
-        return diamond;
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var event = renderEvent(parentGfx, element, {
+          ...attrs,
+          strokeWidth: 4
+        });
+
+        if (renderIcon) {
+          renderEventIcon(element, parentGfx, attrs);
+        }
+
+        return event;
       },
-      'bpmn:EventBasedGateway': function(parentGfx, element) {
+      'bpmn:EventBasedGateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
         var semantic = getBusinessObject(element);
 
-        var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+        var diamond = renderGateway(parentGfx, element, attrs);
 
-        /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
-          strokeWidth: 1,
-          fill: 'none',
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
+          fill: getFillColor(element, 'none', attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
-        var type = semantic.eventGatewayType;
-        var instantiate = !!semantic.instantiate;
+        var type = semantic.get('eventGatewayType'),
+            instantiate = !!semantic.get('instantiate');
 
         function drawEvent() {
 
@@ -4043,18 +4235,17 @@
             }
           });
 
-          /* event path */ drawPath(parentGfx, pathData, {
-            strokeWidth: 2,
-            fill: getFillColor(element, 'none'),
-            stroke: getStrokeColor(element, defaultStrokeColor)
+          drawPath(parentGfx, pathData, {
+            fill: 'none',
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: 2
           });
         }
 
         if (type === 'Parallel') {
-
           var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
             xScaleFactor: 0.4,
-            yScaleFactor:0.4,
+            yScaleFactor: 0.4,
             containerWidth: element.width,
             containerHeight: element.height,
             position: {
@@ -4064,16 +4255,16 @@
           });
 
           drawPath(parentGfx, pathData, {
-            strokeWidth: 1,
-            fill: 'none'
+            fill: 'none',
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: 1
           });
         } else if (type === 'Exclusive') {
-
           if (!instantiate) {
             drawCircle(parentGfx, element.width, element.height, element.height * 0.26, {
-              strokeWidth: 1,
               fill: 'none',
-              stroke: getStrokeColor(element, defaultStrokeColor)
+              stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+              strokeWidth: 1
             });
           }
 
@@ -4083,104 +4274,163 @@
 
         return diamond;
       },
-      'bpmn:Gateway': function(parentGfx, element) {
-        return drawDiamond(parentGfx, element.width, element.height, {
-          fill: getFillColor(element, defaultFillColor),
-          fillOpacity: DEFAULT_FILL_OPACITY,
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
-      },
-      'bpmn:SequenceFlow': function(parentGfx, element) {
-        var fill = getFillColor(element, defaultFillColor),
-            stroke = getStrokeColor(element, defaultStrokeColor);
+      'bpmn:ExclusiveGateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var path = drawConnectionSegments(parentGfx, element.waypoints, {
-          markerEnd: marker('sequenceflow-end', fill, stroke),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+        var gateway = renderGateway(parentGfx, element, attrs);
 
-        var sequenceFlow = getBusinessObject(element);
+        var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
+          xScaleFactor: 0.4,
+          yScaleFactor: 0.4,
+          containerWidth: element.width,
+          containerHeight: element.height,
+          position: {
+            mx: 0.32,
+            my: 0.3
+          }
+        });
 
-        var source;
+        var di = getDi(element);
 
-        if (element.source) {
-          source = element.source.businessObject;
+        if (di.get('isMarkerVisible')) {
+          drawPath(parentGfx, pathData, {
+            fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: 1
+          });
+        }
 
-          // conditional flow marker
-          if (sequenceFlow.conditionExpression && source.$instanceOf('bpmn:Activity')) {
-            attr$1(path, {
-              markerStart: marker('conditional-flow-marker', fill, stroke)
-            });
-          }
+        return gateway;
+      },
+      'bpmn:Gateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-          // default marker
-          if (source.default && (source.$instanceOf('bpmn:Gateway') || source.$instanceOf('bpmn:Activity')) &&
-              source.default === sequenceFlow) {
-            attr$1(path, {
-              markerStart: marker('conditional-default-flow-marker', fill, stroke)
-            });
-          }
-        }
+        return renderGateway(parentGfx, element, attrs);
+      },
+      'bpmn:Group': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
 
-        return path;
+        return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1.5,
+          strokeDasharray: '10, 6, 0, 6',
+          fill: 'none',
+          pointerEvents: 'none',
+          width: getWidth(element, attrs),
+          height: getHeight(element, attrs)
+        });
       },
-      'bpmn:Association': function(parentGfx, element, attrs) {
+      'bpmn:InclusiveGateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var semantic = getBusinessObject(element);
+        var gateway = renderGateway(parentGfx, element, attrs);
 
-        var fill = getFillColor(element, defaultFillColor),
-            stroke = getStrokeColor(element, defaultStrokeColor);
+        drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 2.5
+        });
 
-        attrs = {
-          strokeDasharray: '0, 5',
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          ...attrs
-        };
+        return gateway;
+      },
+      'bpmn:IntermediateEvent': function(parentGfx, element, attrs = {}) {
+        var { renderIcon = true } = attrs;
 
-        if (semantic.associationDirection === 'One' ||
-            semantic.associationDirection === 'Both') {
-          attrs.markerEnd = marker('association-end', fill, stroke);
-        }
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        if (semantic.associationDirection === 'Both') {
-          attrs.markerStart = marker('association-start', fill, stroke);
+        var outer = renderEvent(parentGfx, element, {
+          ...attrs,
+          strokeWidth: 1.5
+        });
+
+        drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
+          fill: 'none',
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1.5
+        });
+
+        if (renderIcon) {
+          renderEventIcon(element, parentGfx, attrs);
         }
 
-        return drawConnectionSegments(parentGfx, element.waypoints, attrs);
+        return outer;
       },
-      'bpmn:DataInputAssociation': function(parentGfx, element) {
-        var fill = getFillColor(element, defaultFillColor),
-            stroke = getStrokeColor(element, defaultStrokeColor);
-
-        return renderer('bpmn:Association')(parentGfx, element, {
-          markerEnd: marker('association-end', fill, stroke)
+      'bpmn:IntermediateCatchEvent': as('bpmn:IntermediateEvent'),
+      'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),
+      'bpmn:Lane': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
+
+        return renderLane(parentGfx, element, {
+          ...attrs,
+          fillOpacity: LOW_OPACITY
         });
       },
-      'bpmn:DataOutputAssociation': function(parentGfx, element) {
-        var fill = getFillColor(element, defaultFillColor),
-            stroke = getStrokeColor(element, defaultStrokeColor);
+      'bpmn:ManualTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var task = renderTask(parentGfx, element, attrs);
+
+        var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
+          abspos: {
+            x: 17,
+            y: 15
+          }
+        });
 
-        return renderer('bpmn:Association')(parentGfx, element, {
-          markerEnd: marker('association-end', fill, stroke)
+        drawPath(parentGfx, pathData, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 0.5
         });
+
+        return task;
       },
-      'bpmn:MessageFlow': function(parentGfx, element) {
+      'bpmn:MessageFlow': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
         var semantic = getBusinessObject(element),
             di = getDi(element);
 
-        var fill = getFillColor(element, defaultFillColor),
-            stroke = getStrokeColor(element, defaultStrokeColor);
+        var fill = getFillColor(element, defaultFillColor, attrs.fill),
+            stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
 
         var path = drawConnectionSegments(parentGfx, element.waypoints, {
           markerEnd: marker('messageflow-end', fill, stroke),
           markerStart: marker('messageflow-start', fill, stroke),
+          stroke,
           strokeDasharray: '10, 11',
-          strokeWidth: 1.5,
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          strokeWidth: 1.5
         });
 
-        if (semantic.messageRef) {
+        if (semantic.get('messageRef')) {
           var midPoint = path.getPointAtLength(path.getTotalLength() / 2);
 
           var markerPathData = pathMap.getScaledPath('MESSAGE_FLOW_MARKER', {
@@ -4190,24 +4440,28 @@
             }
           });
 
-          var messageAttrs = { strokeWidth: 1 };
+          var messageAttrs = {
+            strokeWidth: 1
+          };
 
-          if (di.messageVisibleKind === 'initiating') {
-            messageAttrs.fill = 'white';
-            messageAttrs.stroke = black;
+          if (di.get('messageVisibleKind') === 'initiating') {
+            messageAttrs.fill = fill;
+            messageAttrs.stroke = stroke;
           } else {
-            messageAttrs.fill = '#888';
-            messageAttrs.stroke = 'white';
+            messageAttrs.fill = stroke;
+            messageAttrs.stroke = fill;
           }
 
           var message = drawPath(parentGfx, markerPathData, messageAttrs);
 
-          var labelText = semantic.messageRef.name;
-          var label = renderLabel(parentGfx, labelText, {
+          var messageRef = semantic.get('messageRef'),
+              name = messageRef.get('name');
+
+          var label = renderLabel(parentGfx, name, {
             align: 'center-top',
             fitBox: true,
             style: {
-              fill: getStrokeColor(element, defaultLabelColor)
+              fill: stroke
             }
           });
 
@@ -4218,143 +4472,340 @@
               translateY = midPoint.y + messageBounds.height / 2 + ELEMENT_LABEL_DISTANCE;
 
           transform(label, translateX, translateY, 0);
-
         }
 
         return path;
       },
-      'bpmn:DataObject': function(parentGfx, element) {
-        var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
+      'bpmn:ParallelGateway': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var diamond = renderGateway(parentGfx, element, attrs);
+
+        var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
+          xScaleFactor: 0.6,
+          yScaleFactor: 0.6,
           containerWidth: element.width,
           containerHeight: element.height,
           position: {
-            mx: 0.474,
-            my: 0.296
+            mx: 0.46,
+            my: 0.2
           }
         });
 
-        var elementObject = drawPath(parentGfx, pathData, {
-          fill: getFillColor(element, defaultFillColor),
-          fillOpacity: DEFAULT_FILL_OPACITY,
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawPath(parentGfx, pathData, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
-        var semantic = getBusinessObject(element);
+        return diamond;
+      },
+      'bpmn:Participant': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
+
+        var participant = renderLane(parentGfx, element, attrs);
+
+        var expandedParticipant = isExpanded(element);
+
+        var semantic = getBusinessObject(element),
+            name = semantic.get('name');
+
+        if (expandedParticipant) {
+          drawLine(parentGfx, [
+            {
+              x: 30,
+              y: 0
+            },
+            {
+              x: 30,
+              y: getHeight(element, attrs)
+            }
+          ], {
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: PARTICIPANT_STROKE_WIDTH
+          });
+
+          renderLaneLabel(parentGfx, name, element, attrs);
+        } else {
+          renderLabel(parentGfx, name, {
+            box: getBounds(element, attrs),
+            align: 'center-middle',
+            style: {
+              fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+            }
+          });
+        }
 
-        if (isCollection(semantic)) {
-          renderDataItemCollection(parentGfx, element);
+        if (semantic.get('participantMultiplicity')) {
+          renderTaskMarker('ParticipantMultiplicityMarker', parentGfx, element, attrs);
         }
 
-        return elementObject;
+        return participant;
       },
-      'bpmn:DataObjectReference': as('bpmn:DataObject'),
-      'bpmn:DataInput': function(parentGfx, element) {
+      'bpmn:ReceiveTask' : function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+        var semantic = getBusinessObject(element);
+
+        var task = renderTask(parentGfx, element, attrs);
 
-        // page
-        var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+        var pathData;
+
+        if (semantic.get('instantiate')) {
+          drawCircle(parentGfx, 28, 28, 20 * 0.22, {
+            fill: getFillColor(element, defaultFillColor, attrs.fill),
+            stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+            strokeWidth: 1
+          });
+
+          pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
+            abspos: {
+              x: 7.77,
+              y: 9.52
+            }
+          });
+        } else {
+          pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
+            xScaleFactor: 0.9,
+            yScaleFactor: 0.9,
+            containerWidth: 21,
+            containerHeight: 14,
+            position: {
+              mx: 0.3,
+              my: 0.4
+            }
+          });
+        }
 
-        /* input arrow path */ drawPath(parentGfx, arrowPathData, { strokeWidth: 1 });
+        drawPath(parentGfx, pathData, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
 
-        return elementObject;
+        return task;
       },
-      'bpmn:DataOutput': function(parentGfx, element) {
-        var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+      'bpmn:ScriptTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        // page
-        var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+        var task = renderTask(parentGfx, element, attrs);
 
-        /* output arrow path */ drawPath(parentGfx, arrowPathData, {
-          strokeWidth: 1,
-          fill: black
+        var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
+          abspos: {
+            x: 15,
+            y: 20
+          }
+        });
+
+        drawPath(parentGfx, pathData, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
-        return elementObject;
+        return task;
       },
-      'bpmn:DataStoreReference': function(parentGfx, element) {
-        var DATA_STORE_PATH = pathMap.getScaledPath('DATA_STORE', {
+      'bpmn:SendTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var task = renderTask(parentGfx, element, attrs);
+
+        var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
+          containerWidth: 21,
+          containerHeight: 14,
           position: {
-            mx: 0,
-            my: 0.133
+            mx: 0.285,
+            my: 0.357
+          }
+        });
+
+        drawPath(parentGfx, pathData, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getFillColor(element, defaultFillColor, attrs.fill),
+          strokeWidth: 1
+        });
+
+        return task;
+      },
+      'bpmn:SequenceFlow': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var fill = getFillColor(element, defaultFillColor, attrs.fill),
+            stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
+
+        var connection = drawConnectionSegments(parentGfx, element.waypoints, {
+          markerEnd: marker('sequenceflow-end', fill, stroke),
+          stroke
+        });
+
+        var semantic = getBusinessObject(element);
+
+        var { source } = element;
+
+        if (source) {
+          var sourceSemantic = getBusinessObject(source);
+
+          // conditional flow marker
+          if (semantic.get('conditionExpression') && is$1(sourceSemantic, 'bpmn:Activity')) {
+            attr$1(connection, {
+              markerStart: marker('conditional-flow-marker', fill, stroke)
+            });
+          }
+
+          // default marker
+          if (sourceSemantic.get('default') && (is$1(sourceSemantic, 'bpmn:Gateway') || is$1(sourceSemantic, 'bpmn:Activity')) &&
+              sourceSemantic.get('default') === semantic) {
+            attr$1(connection, {
+              markerStart: marker('conditional-default-flow-marker', fill, stroke)
+            });
+          }
+        }
+
+        return connection;
+      },
+      'bpmn:ServiceTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        var task = renderTask(parentGfx, element, attrs);
+
+        drawCircle(parentGfx, 10, 10, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: 'none',
+          transform: 'translate(6, 6)'
+        });
+
+        var pathDataService1 = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
+          abspos: {
+            x: 12,
+            y: 18
           }
         });
 
-        var elementStore = drawPath(parentGfx, DATA_STORE_PATH, {
-          strokeWidth: 2,
-          fill: getFillColor(element, defaultFillColor),
-          fillOpacity: DEFAULT_FILL_OPACITY,
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawPath(parentGfx, pathDataService1, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
         });
 
-        return elementStore;
-      },
-      'bpmn:BoundaryEvent': function(parentGfx, element, options) {
+        drawCircle(parentGfx, 10, 10, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: 'none',
+          transform: 'translate(11, 10)'
+        });
 
-        var semantic = getBusinessObject(element),
-            cancel = semantic.cancelActivity;
+        var pathDataService2 = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
+          abspos: {
+            x: 17,
+            y: 22
+          }
+        });
 
-        var attrs = {
-          strokeWidth: 1.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        };
+        drawPath(parentGfx, pathDataService2, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1
+        });
 
-        if (!cancel) {
-          attrs.strokeDasharray = '6';
-        }
+        return task;
+      },
+      'bpmn:StartEvent': function(parentGfx, element, attrs = {}) {
+        var { renderIcon = true } = attrs;
 
-        // apply fillOpacity
-        var outerAttrs = {
-          ...attrs,
-          fillOpacity: 1
-        };
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        // apply no-fill
-        var innerAttrs = {
-          ...attrs,
-          fill: 'none'
-        };
+        var semantic = getBusinessObject(element);
 
-        var outer = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
+        if (!semantic.get('isInterrupting')) {
+          attrs = {
+            ...attrs,
+            strokeDasharray: '6'
+          };
+        }
 
-        /* inner path */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, innerAttrs);
+        var event = renderEvent(parentGfx, element, attrs);
 
-        if (!options || options.renderIcon !== false) {
-          renderEventContent(element, parentGfx);
+        if (renderIcon) {
+          renderEventIcon(element, parentGfx, attrs);
         }
 
-        return outer;
+        return event;
       },
-      'bpmn:Group': function(parentGfx, element) {
-        return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeWidth: 1.5,
-          strokeDasharray: '10,6,0,6',
-          fill: 'none',
-          pointerEvents: 'none'
-        });
+      'bpmn:SubProcess': function(parentGfx, element, attrs = {}) {
+        if (isExpanded(element)) {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke',
+            'width',
+            'height'
+          ]);
+        } else {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke'
+          ]);
+        }
+
+        return renderSubProcess(parentGfx, element, attrs);
       },
-      'label': function(parentGfx, element) {
-        return renderExternalLabel(parentGfx, element);
+      'bpmn:Task': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
+
+        return renderTask(parentGfx, element, attrs);
       },
-      'bpmn:TextAnnotation': function(parentGfx, element) {
-        var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, {
-          'fill': 'none',
-          'stroke': 'none'
+      'bpmn:TextAnnotation': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke',
+          'width',
+          'height'
+        ]);
+
+        var {
+          width,
+          height
+        } = getBounds(element, attrs);
+
+        var textElement = drawRect(parentGfx, width, height, 0, 0, {
+          fill: 'none',
+          stroke: 'none'
         });
 
         var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
           xScaleFactor: 1,
           yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
+          containerWidth: width,
+          containerHeight: height,
           position: {
             mx: 0.0,
             my: 0.0
@@ -4362,232 +4813,121 @@
         });
 
         drawPath(parentGfx, textPathData, {
-          stroke: getStrokeColor(element, defaultStrokeColor)
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
         });
 
-        var text = getBusinessObject(element).text || '';
+        var semantic = getBusinessObject(element),
+            text = semantic.get('text') || '';
+
         renderLabel(parentGfx, text, {
-          box: element,
           align: 'left-top',
+          box: getBounds(element, attrs),
           padding: 7,
           style: {
-            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
+            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
           }
         });
 
         return textElement;
       },
-      'ParticipantMultiplicityMarker': function(parentGfx, element) {
-        var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2) / element.width),
-            my: (element.height - 15) / element.height
-          }
-        });
+      'bpmn:Transaction': function(parentGfx, element, attrs = {}) {
+        if (isExpanded(element)) {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke',
+            'width',
+            'height'
+          ]);
+        } else {
+          attrs = pickAttrs(attrs, [
+            'fill',
+            'stroke'
+          ]);
+        }
 
-        drawMarker('participant-multiplicity', parentGfx, markerPath, {
-          strokeWidth: 2,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        var outer = renderSubProcess(parentGfx, element, {
+          strokeWidth: 1.5,
+          ...attrs
         });
-      },
-      'SubProcessMarker': function(parentGfx, element) {
-        var markerRect = drawRect(parentGfx, 14, 14, 0, {
-          strokeWidth: 1,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+
+        var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 1.5
         });
 
-        // Process marker is placed in the middle of the box
-        // therefore fixed values can be used here
-        translate$1(markerRect, element.width / 2 - 7.5, element.height - 20);
+        var expanded = isExpanded(element);
 
-        var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
-          xScaleFactor: 1.5,
-          yScaleFactor: 1.5,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: (element.width / 2 - 7.5) / element.width,
-            my: (element.height - 20) / element.height
-          }
-        });
+        if (!expanded) {
+          attrs = {};
+        }
 
-        drawMarker('sub-process', parentGfx, markerPath, {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
-      },
-      'ParallelMarker': function(parentGfx, element, position) {
-        var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2 + position.parallel) / element.width),
-            my: (element.height - 20) / element.height
-          }
-        });
+        drawRect(
+          parentGfx,
+          getWidth(element, attrs),
+          getHeight(element, attrs),
+          TASK_BORDER_RADIUS - INNER_OUTER_DIST,
+          INNER_OUTER_DIST,
+          innerAttrs
+        );
 
-        drawMarker('parallel', parentGfx, markerPath, {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+        return outer;
       },
-      'SequentialMarker': function(parentGfx, element, position) {
-        var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2 + position.seq) / element.width),
-            my: (element.height - 19) / element.height
-          }
-        });
+      'bpmn:UserTask': function(parentGfx, element, attrs = {}) {
+        attrs = pickAttrs(attrs, [
+          'fill',
+          'stroke'
+        ]);
 
-        drawMarker('sequential', parentGfx, markerPath, {
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
-        });
-      },
-      'CompensationMarker': function(parentGfx, element, position) {
-        var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2 + position.compensation) / element.width),
-            my: (element.height - 13) / element.height
+        var task = renderTask(parentGfx, element, attrs);
+
+        var x = 15;
+        var y = 12;
+
+        var pathDataUser1 = pathMap.getScaledPath('TASK_TYPE_USER_1', {
+          abspos: {
+            x: x,
+            y: y
           }
         });
 
-        drawMarker('compensation', parentGfx, markerMath, {
-          strokeWidth: 1,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawPath(parentGfx, pathDataUser1, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 0.5
         });
-      },
-      'LoopMarker': function(parentGfx, element, position) {
-        var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2 + position.loop) / element.width),
-            my: (element.height - 7) / element.height
+
+        var pathDataUser2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
+          abspos: {
+            x: x,
+            y: y
           }
         });
 
-        drawMarker('loop', parentGfx, markerPath, {
-          strokeWidth: 1.5,
-          fill: getFillColor(element, defaultFillColor),
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeMiterlimit: 0.5
+        drawPath(parentGfx, pathDataUser2, {
+          fill: getFillColor(element, defaultFillColor, attrs.fill),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 0.5
         });
-      },
-      'AdhocMarker': function(parentGfx, element, position) {
-        var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
-          xScaleFactor: 1,
-          yScaleFactor: 1,
-          containerWidth: element.width,
-          containerHeight: element.height,
-          position: {
-            mx: ((element.width / 2 + position.adhoc) / element.width),
-            my: (element.height - 15) / element.height
+
+        var pathDataUser3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
+          abspos: {
+            x: x,
+            y: y
           }
         });
 
-        drawMarker('adhoc', parentGfx, markerPath, {
-          strokeWidth: 1,
-          fill: getStrokeColor(element, defaultStrokeColor),
-          stroke: getStrokeColor(element, defaultStrokeColor)
+        drawPath(parentGfx, pathDataUser3, {
+          fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+          strokeWidth: 0.5
         });
-      }
-    };
-
-    function attachTaskMarkers(parentGfx, element, taskMarkers) {
-      var obj = getBusinessObject(element);
-
-      var subprocess = taskMarkers && taskMarkers.indexOf('SubProcessMarker') !== -1;
-      var position;
-
-      if (subprocess) {
-        position = {
-          seq: -21,
-          parallel: -22,
-          compensation: -42,
-          loop: -18,
-          adhoc: 10
-        };
-      } else {
-        position = {
-          seq: -3,
-          parallel: -6,
-          compensation: -27,
-          loop: 0,
-          adhoc: 10
-        };
-      }
-
-      forEach$1(taskMarkers, function(marker) {
-        renderer(marker)(parentGfx, element, position);
-      });
-
-      if (obj.isForCompensation) {
-        renderer('CompensationMarker')(parentGfx, element, position);
-      }
-
-      if (obj.$type === 'bpmn:AdHocSubProcess') {
-        renderer('AdhocMarker')(parentGfx, element, position);
-      }
-
-      var loopCharacteristics = obj.loopCharacteristics,
-          isSequential = loopCharacteristics && loopCharacteristics.isSequential;
-
-      if (loopCharacteristics) {
-
-        if (isSequential === undefined) {
-          renderer('LoopMarker')(parentGfx, element, position);
-        }
-
-        if (isSequential === false) {
-          renderer('ParallelMarker')(parentGfx, element, position);
-        }
 
-        if (isSequential === true) {
-          renderer('SequentialMarker')(parentGfx, element, position);
-        }
+        return task;
+      },
+      'label': function(parentGfx, element, attrs = {}) {
+        return renderExternalLabel(parentGfx, element, attrs);
       }
-    }
-
-    function renderDataItemCollection(parentGfx, element) {
-
-      var yPosition = (element.height - 18) / element.height;
-
-      var pathData = pathMap.getScaledPath('DATA_OBJECT_COLLECTION_PATH', {
-        xScaleFactor: 1,
-        yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: 0.33,
-          my: yPosition
-        }
-      });
-
-      /* collection path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 2
-      });
-    }
-
+    };
 
     // extension API, use at your own risk
     this._drawPath = drawPath;
@@ -4622,15 +4962,16 @@
    *
    * @param {SVGElement} parentGfx
    * @param {Element} element
+   * @param {Attrs} [attrs]
    *
    * @return {SVGElement} mainGfx
    */
-  BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
-    var type = element.type;
-    var h = this._renderer(type);
+  BpmnRenderer.prototype.drawShape = function(parentGfx, element, attrs = {}) {
+    var { type } = element;
+
+    var handler = this._renderer(type);
 
-    /* jshint -W040 */
-    return h(parentGfx, element);
+    return handler(parentGfx, element, attrs);
   };
 
   /**
@@ -4638,15 +4979,16 @@
    *
    * @param {SVGElement} parentGfx
    * @param {Element} element
+   * @param {Attrs} [attrs]
    *
    * @return {SVGElement} mainGfx
    */
-  BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
-    var type = element.type;
-    var h = this._renderer(type);
+  BpmnRenderer.prototype.drawConnection = function(parentGfx, element, attrs = {}) {
+    var { type } = element;
 
-    /* jshint -W040 */
-    return h(parentGfx, element);
+    var handler = this._renderer(type);
+
+    return handler(parentGfx, element, attrs);
   };
 
   /**
@@ -4657,7 +4999,6 @@
    * @return {string} path
    */
   BpmnRenderer.prototype.getShapePath = function(element) {
-
     if (is$1(element, 'bpmn:Event')) {
       return getCirclePath(element);
     }
@@ -4673,6 +5014,24 @@
     return getRectPath(element);
   };
 
+  /**
+   * Pick attributes if they exist.
+   *
+   * @param {Object} attrs
+   * @param {string[]} keys
+   *
+   * @returns {Object}
+   */
+  function pickAttrs(attrs, keys = []) {
+    return keys.reduce((pickedAttrs, key) => {
+      if (attrs[ key ]) {
+        pickedAttrs[ key ] = attrs[ key ];
+      }
+
+      return pickedAttrs;
+    }, {});
+  }
+
   /**
    * @typedef {import('../util/Types').Dimensions} Dimensions
    *
@@ -6981,6 +7340,8 @@
 
   var LOW_PRIORITY$3 = 500;
 
+  var DEFAULT_PRIORITY$3 = 1000;
+
   /**
    * @typedef {import('../../model/Types').Element} Element
    *
@@ -6999,25 +7360,25 @@
    */
   function Outline(eventBus, styles) {
 
-    this.offset = 6;
+    this._eventBus = eventBus;
+
+    this.offset = 5;
 
     var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
 
     var self = this;
 
-    function createOutline(gfx, bounds) {
+    function createOutline(gfx, element) {
       var outline = create$1('rect');
 
       attr$1(outline, assign$1({
-        x: 10,
-        y: 10,
+        x: - self.offset,
+        y: - self.offset,
         rx: 4,
-        width: 100,
-        height: 100
+        width: element.width + self.offset * 2,
+        height: element.height + self.offset * 2
       }, OUTLINE_STYLE));
 
-      append(gfx, outline);
-
       return outline;
     }
 
@@ -7030,10 +7391,12 @@
       var outline = query('.djs-outline', gfx);
 
       if (!outline) {
-        outline = createOutline(gfx);
-      }
+        outline = self.getOutline(element) || createOutline(gfx, element);
+        append(gfx, outline);
 
-      self.updateShapeOutline(outline, element);
+      } else {
+        self.updateShapeOutline(outline, element);
+      }
     });
 
     eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
@@ -7043,7 +7406,8 @@
       var outline = query('.djs-outline', gfx);
 
       if (!outline) {
-        outline = createOutline(gfx);
+        outline = createOutline(gfx, element);
+        append(gfx, outline);
       }
 
       self.updateConnectionOutline(outline, element);
@@ -7060,25 +7424,34 @@
    */
   Outline.prototype.updateShapeOutline = function(outline, element) {
 
-    attr$1(outline, {
-      x: -this.offset,
-      y: -this.offset,
-      width: element.width + this.offset * 2,
-      height: element.height + this.offset * 2
-    });
+    var updated = false;
+    var providers = this._getProviders();
 
-  };
+    if (providers.length) {
+      forEach$1(providers, function(provider) {
+        updated = updated || provider.updateOutline(element, outline);
+      });
+    }
 
+    if (!updated) {
+      attr$1(outline, {
+        x: -this.offset,
+        y: -this.offset,
+        width: element.width + this.offset * 2,
+        height: element.height + this.offset * 2
+      });
+    }
+  };
 
   /**
    * Updates the outline of a connection respecting the bounding box of
    * the connection and an outline offset.
+   * Register an outline provider with the given priority.
    *
    * @param {SVGElement} outline
    * @param {Element} connection
-   */
+   **/
   Outline.prototype.updateConnectionOutline = function(outline, connection) {
-
     var bbox = getBBox(connection);
 
     attr$1(outline, {
@@ -7087,9 +7460,61 @@
       width: bbox.width + this.offset * 2,
       height: bbox.height + this.offset * 2
     });
+  };
+
+  /**
+   * Register an outline provider with the given priority.
+   *
+   * @param {number} priority
+   * @param {OutlineProvider} provider
+   */
+  Outline.prototype.registerProvider = function(priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$3;
+    }
+
+    this._eventBus.on('outline.getProviders', priority, function(event) {
+      event.providers.push(provider);
+    });
+  };
+
+  /**
+   * Returns the registered outline providers.
+   *
+   * @returns {OutlineProvider[]}
+   */
+  Outline.prototype._getProviders = function() {
+    var event = this._eventBus.createEvent({
+      type: 'outline.getProviders',
+      providers: []
+    });
 
+    this._eventBus.fire(event);
+
+    return event.providers;
   };
 
+  /**
+   * Returns the outline for an element.
+   *
+   * @param {Element} element
+   **/
+  Outline.prototype.getOutline = function(element) {
+    var outline;
+    var providers = this._getProviders();
+
+    forEach$1(providers, function(provider) {
+
+      if (!isFunction(provider.getOutline)) {
+        return;
+      }
+
+      outline = outline || provider.getOutline(element);
+    });
+
+    return outline;
+  };
 
   Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];