bpmn-js 14.2.0 → 15.0.0

package/lib/draw/BpmnRenderer.js

@@ -1,9 +1,9 @@
 import inherits from 'inherits-browser';
 
 import {
-  isObject,
   assign,
-  forEach
+  forEach,
+  isObject
 } from 'min-dash';
 
 import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
@@ -17,7 +17,9 @@ import {
   getLabel
 } from '../util/LabelUtil';
 
-import { is } from '../util/ModelUtil';
+import {
+  is
+} from '../util/ModelUtil';
 
 import {
   createLine
@@ -27,6 +29,7 @@ import {
   isTypedEvent,
   isThrowEvent,
   isCollection,
+  getBounds,
   getDi,
   getSemantic,
   getCirclePath,
@@ -35,7 +38,9 @@ import {
   getRectPath,
   getFillColor,
   getStrokeColor,
-  getLabelColor
+  getLabelColor,
+  getHeight,
+  getWidth
 } from './BpmnRenderUtil';
 
 import {
@@ -59,15 +64,16 @@ import Ids from 'ids';
 
 import { black } from './BpmnRenderUtil';
 
-var RENDERER_IDS = new Ids();
-
-var TASK_BORDER_RADIUS = 10;
-var INNER_OUTER_DIST = 3;
+var rendererIds = new Ids();
 
-var DEFAULT_FILL_OPACITY = .95,
-    HIGH_FILL_OPACITY = .35;
+var ELEMENT_LABEL_DISTANCE = 10,
+    INNER_OUTER_DIST = 3,
+    PARTICIPANT_STROKE_WIDTH = 1.5,
+    TASK_BORDER_RADIUS = 10;
 
-var ELEMENT_LABEL_DISTANCE = 10;
+var DEFAULT_OPACITY = 0.95,
+    FULL_OPACITY = 1,
+    LOW_OPACITY = 0.25;
 
 /**
  * @typedef { Partial<{
@@ -75,6 +81,13 @@ var ELEMENT_LABEL_DISTANCE = 10;
  *   defaultStrokeColor: string,
  *   defaultLabelColor: string
  * }> } BpmnRendererConfig
+ *
+ * @typedef { Partial<{
+ *   fill: string,
+ *   stroke: string,
+ *   width: string,
+ *   height: string
+ * }> } Attrs
  */
 
 /**
@@ -102,7 +115,7 @@ export default function BpmnRenderer(
       defaultStrokeColor = config && config.defaultStrokeColor,
       defaultLabelColor = config && config.defaultLabelColor;
 
-  var rendererId = RENDERER_IDS.next();
+  var rendererId = rendererIds.next();
 
   var markers = {};
 
@@ -198,7 +211,7 @@ export default function BpmnRenderer(
         cy: 6,
         r: 3.5,
         ...shapeStyle({
-          fill: fill,
+          fill,
           stroke: stroke,
           strokeWidth: 1,
 
@@ -218,7 +231,7 @@ export default function BpmnRenderer(
       var messageflowEnd = svgCreate('path', {
         d: 'm 1 5 l 0 -3 l 7 3 l -7 3 z',
         ...shapeStyle({
-          fill: fill,
+          fill,
           stroke: stroke,
           strokeWidth: 1,
 
@@ -239,7 +252,7 @@ export default function BpmnRenderer(
         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
@@ -260,7 +273,7 @@ export default function BpmnRenderer(
         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
@@ -280,7 +293,7 @@ export default function BpmnRenderer(
       var conditionalFlowMarker = svgCreate('path', {
         d: 'M 0 10 L 8 6 L 16 10 L 8 14 Z',
         ...shapeStyle({
-          fill: fill,
+          fill,
           stroke: stroke
         })
       });
@@ -308,7 +321,7 @@ export default function BpmnRenderer(
     }
   }
 
-  function drawCircle(parentGfx, width, height, offset, attrs) {
+  function drawCircle(parentGfx, width, height, offset, attrs = {}) {
 
     if (isObject(offset)) {
       attrs = offset;
@@ -319,10 +332,6 @@ export default function BpmnRenderer(
 
     attrs = shapeStyle(attrs);
 
-    if (attrs.fill === 'none') {
-      delete attrs.fillOpacity;
-    }
-
     var cx = width / 2,
         cy = height / 2;
 
@@ -422,7 +431,6 @@ export default function BpmnRenderer(
   }
 
   function drawPath(parentGfx, d, attrs) {
-
     attrs = lineStyle(attrs);
 
     var path = svgCreate('path', {
@@ -444,171 +452,13 @@ export default function BpmnRenderer(
   }
 
   function as(type) {
-    return function(parentGfx, element, options) {
-      return renderer(type)(parentGfx, element, options);
-    };
-  }
-
-  function renderEventContent(element, parentGfx) {
-
-    var event = getSemantic(element);
-    var isThrowing = isThrowEvent(event);
-
-    if (event.eventDefinitions && event.eventDefinitions.length > 1) {
-      if (event.parallelMultiple) {
-        return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, isThrowing);
-      }
-      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({
-      size: {
-        width: 100
-      }
-    }, options);
-
-    var text = textRenderer.createText(label || '', options);
-
-    svgClasses(text).add('djs-label');
-
-    svgAppend(parentGfx, text);
-
-    return text;
-  }
-
-  function renderEmbeddedLabel(parentGfx, element, align) {
-    var semantic = getSemantic(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(
-        {},
-        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 = getSemantic(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,
@@ -620,22 +470,27 @@ export default function BpmnRenderer(
         }
       });
 
-      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', {
@@ -650,12 +505,11 @@ export default function BpmnRenderer(
       });
 
       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,
@@ -667,19 +521,19 @@ export default function BpmnRenderer(
           }
         });
 
-        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,
@@ -691,15 +545,17 @@ export default function BpmnRenderer(
         }
       });
 
-      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,
@@ -712,11 +568,12 @@ export default function BpmnRenderer(
       });
 
       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,
@@ -728,15 +585,17 @@ export default function BpmnRenderer(
         }
       });
 
-      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,
@@ -748,15 +607,17 @@ export default function BpmnRenderer(
         }
       });
 
-      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,
@@ -768,19 +629,19 @@ export default function BpmnRenderer(
         }
       });
 
-      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,
@@ -792,15 +653,17 @@ export default function BpmnRenderer(
         }
       });
 
-      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,
@@ -812,15 +675,17 @@ export default function BpmnRenderer(
         }
       });
 
-      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,
@@ -832,14 +697,16 @@ export default function BpmnRenderer(
         }
       });
 
-      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,
@@ -852,445 +719,640 @@ export default function BpmnRenderer(
       });
 
       return drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: getStrokeColor(event, defaultStrokeColor),
-        stroke: getStrokeColor(event, defaultStrokeColor)
-      });
-    },
-    'bpmn:EndEvent': function(parentGfx, element, options) {
-      var circle = renderer('bpmn:Event')(parentGfx, element, {
-        strokeWidth: 4,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+        fill: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(event, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
       });
-
-      if (!options || options.renderIcon !== false) {
-        renderEventContent(element, parentGfx, true);
-      }
-
-      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 = getSemantic(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);
+    '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)
+      });
 
-      var x = 15;
-      var y = 12;
+      translate(markerRect, element.width / 2 - 7.5, element.height - 20);
 
-      var pathData = pathMap.getScaledPath('TASK_TYPE_USER_1', {
-        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
         }
       });
 
-      /* user path */ drawPath(parentGfx, pathData, {
-        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 pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
-        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
         }
       });
 
-      /* user2 path */ drawPath(parentGfx, pathData2, {
-        strokeWidth: 0.5,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawMarker('parallel', parentGfx, markerPath, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
-
-      var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
-        abspos: {
-          x: x,
-          y: y
+    },
+    '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
         }
       });
 
-      /* user3 path */ drawPath(parentGfx, pathData3, {
-        strokeWidth: 0.5,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawMarker('sequential', 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
+    'CompensationMarker': function(parentGfx, element, attrs) {
+      var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: ((element.width / 2 + attrs.compensation) / element.width),
+          my: (element.height - 13) / element.height
         }
       });
 
-      /* manual path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 0.5, // 0.25,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawMarker('compensation', parentGfx, markerMath, {
+        strokeWidth: 1,
+        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);
+    'LoopMarker': function(parentGfx, element, attrs) {
+      var width = getWidth(element, attrs),
+          height = getHeight(element, attrs);
 
-      var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
+      var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
         xScaleFactor: 1,
         yScaleFactor: 1,
-        containerWidth: 21,
-        containerHeight: 14,
+        containerWidth: width,
+        containerHeight: height,
         position: {
-          mx: 0.285,
-          my: 0.357
+          mx: ((width / 2 + attrs.loop) / width),
+          my: (height - 7) / height
         }
       });
 
-      /* send path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getFillColor(element, defaultFillColor)
+      drawMarker('loop', parentGfx, markerPath, {
+        strokeWidth: 1.5,
+        fill: 'none',
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeMiterlimit: 0.5
       });
-
-      return task;
     },
-    'bpmn:ReceiveTask' : function(parentGfx, element) {
-      var semantic = getSemantic(element);
+    'AdhocMarker': function(parentGfx, element, attrs) {
+      var width = getWidth(element, attrs),
+          height = getHeight(element, attrs);
 
-      var task = renderer('bpmn:Task')(parentGfx, element);
-      var pathData;
+      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
+        }
+      });
 
-      if (semantic.instantiate) {
-        drawCircle(parentGfx, 28, 28, 20 * 0.22, { strokeWidth: 1 });
+      drawMarker('adhoc', parentGfx, markerPath, {
+        strokeWidth: 1,
+        fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
+      });
+    }
+  };
 
-        pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
-          abspos: {
-            x: 7.77,
-            y: 9.52
-          }
-        });
-      } else {
+  function renderTaskMarker(type, parentGfx, element, attrs) {
+    taskMarkerRenderers[ type ](parentGfx, element, attrs);
+  }
 
-        pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
-          xScaleFactor: 0.9,
-          yScaleFactor: 0.9,
-          containerWidth: 21,
-          containerHeight: 14,
-          position: {
-            mx: 0.3,
-            my: 0.4
-          }
-        });
+  function renderTaskMarkers(parentGfx, element, taskMarkers, attrs = {}) {
+    attrs = {
+      fill: attrs.fill,
+      stroke: attrs.stroke,
+      width: getWidth(element, attrs),
+      height: getHeight(element, attrs)
+    };
+
+    var semantic = getSemantic(element);
+
+    var subprocess = taskMarkers && taskMarkers.includes('SubProcessMarker');
+
+    if (subprocess) {
+      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
+      };
+    }
+
+    forEach(taskMarkers, function(marker) {
+      renderTaskMarker(marker, parentGfx, element, attrs);
+    });
+
+    if (semantic.get('isForCompensation')) {
+      renderTaskMarker('CompensationMarker', parentGfx, element, attrs);
+    }
+
+    if (is(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);
       }
 
-      /* receive path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      if (isSequential === false) {
+        renderTaskMarker('ParallelMarker', parentGfx, element, attrs);
+      }
 
-      return task;
-    },
-    'bpmn:ScriptTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+      if (isSequential === true) {
+        renderTaskMarker('SequentialMarker', parentGfx, element, attrs);
+      }
+    }
+  }
 
-      var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
-        abspos: {
-          x: 15,
-          y: 20
-        }
-      });
+  function renderLabel(parentGfx, label, attrs = {}) {
+    attrs = assign({
+      size: {
+        width: 100
+      }
+    }, attrs);
 
-      /* script path */ drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+    var text = textRenderer.createText(label || '', attrs);
 
-      return task;
-    },
-    'bpmn:BusinessRuleTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    svgClasses(text).add('djs-label');
 
-      var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
-        abspos: {
-          x: 8,
-          y: 8
+    svgAppend(parentGfx, text);
+
+    return text;
+  }
+
+  function renderEmbeddedLabel(parentGfx, element, align, attrs = {}) {
+    var semantic = getSemantic(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(
+        {},
+        textRenderer.getExternalStyle(),
+        {
+          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
         }
-      });
+      )
+    });
+  }
 
-      var businessHeaderPath = drawPath(parentGfx, headerPathData);
-      svgAttr(businessHeaderPath, {
-        strokeWidth: 1,
-        fill: getFillColor(element, '#aaaaaa'),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+  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 headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
-        abspos: {
-          x: 8,
-          y: 8
+    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 = getSemantic(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 = getSemantic(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
         }
       });
 
-      var businessPath = drawPath(parentGfx, headerData);
-      svgAttr(businessPath, {
-        strokeWidth: 1,
-        stroke: getStrokeColor(element, defaultStrokeColor)
+      drawPath(parentGfx, collectionPathData, {
+        strokeWidth: 2,
+        fill,
+        stroke
       });
+    }
 
-      return task;
-    },
-    'bpmn:SubProcess': function(parentGfx, element, attrs) {
-      attrs = {
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor),
-        ...attrs
-      };
+    return dataObject;
+  }
 
-      var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
+  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)
+    });
+  }
 
-      var expanded = isExpanded(element);
+  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)
+    });
+  }
 
-      if (isEventSubProcess(element)) {
-        svgAttr(rect, {
-          strokeDasharray: '0, 5.5',
-          strokeWidth: 2.5
-        });
-      }
+  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
+    });
 
-      renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle');
+    var semantic = getSemantic(element);
 
-      if (expanded) {
-        attachTaskMarkers(parentGfx, element);
-      } else {
-        attachTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ]);
-      }
+    if (is(semantic, 'bpmn:Lane')) {
+      var text = semantic.get('name');
 
-      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 });
+      renderLaneLabel(parentGfx, text, element, attrs);
+    }
 
-      var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
-        stroke: getStrokeColor(element, defaultStrokeColor),
-        strokeWidth: 1.5
-      });
+    return lane;
+  }
 
-      /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 3, INNER_OUTER_DIST, innerAttrs);
+  function renderSubProcess(parentGfx, element, attrs = {}) {
+    var activity = renderActivity(parentGfx, element, attrs);
 
-      return outer;
-    },
-    'bpmn:CallActivity': function(parentGfx, element) {
-      return renderer('bpmn:SubProcess')(parentGfx, element, {
-        strokeWidth: 5
+    if (isEventSubProcess(element)) {
+      svgAttr(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);
 
-      var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
+    if (expanded) {
+      renderTaskMarkers(parentGfx, element, undefined, attrs);
+    } else {
+      renderTaskMarkers(parentGfx, element, [ 'SubProcessMarker' ], attrs);
+    }
 
-      var expandedPool = isExpanded(element);
+    return activity;
+  }
 
-      if (expandedPool) {
-        drawLine(parentGfx, [
-          { x: 30, y: 0 },
-          { x: 30, y: element.height }
-        ], {
-          stroke: getStrokeColor(element, defaultStrokeColor),
-          strokeWidth
-        });
-        var text = getSemantic(element).name;
-        renderLaneLabel(parentGfx, text, element);
-      } else {
+  function renderTask(parentGfx, element, attrs = {}) {
+    var activity = renderActivity(parentGfx, element, attrs);
 
-        // collapsed pool draw text inline
-        var text2 = getSemantic(element).name;
-        renderLabel(parentGfx, text2, {
-          box: element, align: 'center-middle',
-          style: {
-            fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-          }
-        });
-      }
+    renderEmbeddedLabel(parentGfx, element, 'center-middle', attrs);
+
+    renderTaskMarkers(parentGfx, element, undefined, attrs);
 
-      var participantMultiplicity = !!(getSemantic(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:Association': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      return renderAssociation(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:BoundaryEvent': function(parentGfx, element, attrs = {}) {
+      var { renderIcon = true } = attrs;
+
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var semantic = getSemantic(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 = getSemantic(element);
+      if (!cancelActivity) {
+        attrs.strokeDasharray = '6';
+      }
+
+      var event = renderEvent(parentGfx, element, attrs);
+
+      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
+        ...attrs,
+        fill: 'none'
+      });
 
-      if (semantic.$type === 'bpmn:Lane') {
-        var text = semantic.name;
-        renderLaneLabel(parentGfx, text, element);
+      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
+      svgAttr(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;
+      svgAttr(businessHeaderPath, {
+        fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      return task;
     },
-    'bpmn:ComplexGateway': function(parentGfx, element) {
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+    'bpmn:CallActivity': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      return renderSubProcess(parentGfx, element, {
+        strokeWidth: 5,
+        ...attrs
+      });
+    },
+    '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,
@@ -1303,50 +1365,142 @@ export default function BpmnRenderer(
         }
       });
 
-      /* 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 = getSemantic(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() {
 
@@ -1361,18 +1515,17 @@ export default function BpmnRenderer(
           }
         });
 
-        /* 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: {
@@ -1382,16 +1535,16 @@ export default function BpmnRenderer(
         });
 
         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
           });
         }
 
@@ -1401,104 +1554,163 @@ export default function BpmnRenderer(
 
       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 = getSemantic(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')) {
-          svgAttr(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) {
-          svgAttr(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 = getSemantic(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'
+      ]);
+
+      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 (semantic.associationDirection === 'Both') {
-        attrs.markerStart = marker('association-start', fill, stroke);
+      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'
+      ]);
 
-      return renderer('bpmn:Association')(parentGfx, element, {
-        markerEnd: marker('association-end', fill, stroke)
+      var task = renderTask(parentGfx, element, attrs);
+
+      var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
+        abspos: {
+          x: 17,
+          y: 15
+        }
       });
+
+      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 = getSemantic(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', {
@@ -1508,24 +1720,28 @@ export default function BpmnRenderer(
           }
         });
 
-        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, defaultStrokeColor)
+            fill: stroke
           }
         });
 
@@ -1535,144 +1751,341 @@ export default function BpmnRenderer(
         var translateX = midPoint.x - labelBounds.width / 2,
             translateY = midPoint.y + messageBounds.height / 2 + ELEMENT_LABEL_DISTANCE;
 
-        transform(label, translateX, translateY, 0);
+        transform(label, translateX, translateY, 0);
+      }
+
+      return path;
+    },
+    '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.46,
+          my: 0.2
+        }
+      });
+
+      drawPath(parentGfx, pathData, {
+        fill: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      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 = getSemantic(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 (semantic.get('participantMultiplicity')) {
+        renderTaskMarker('ParticipantMultiplicityMarker', parentGfx, element, attrs);
+      }
+
+      return participant;
+    },
+    'bpmn:ReceiveTask' : function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var semantic = getSemantic(element);
+
+      var task = renderTask(parentGfx, element, attrs);
+
+      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
+          }
+        });
+      }
+
+      drawPath(parentGfx, pathData, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke),
+        strokeWidth: 1
+      });
+
+      return task;
+    },
+    'bpmn:ScriptTask': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
+
+      var task = renderTask(parentGfx, element, attrs);
+
+      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 task;
+    },
+    'bpmn:SendTask': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      }
+      var task = renderTask(parentGfx, element, attrs);
 
-      return path;
-    },
-    'bpmn:DataObject': function(parentGfx, element) {
-      var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
+      var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
         xScaleFactor: 1,
         yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
+        containerWidth: 21,
+        containerHeight: 14,
         position: {
-          mx: 0.474,
-          my: 0.296
+          mx: 0.285,
+          my: 0.357
         }
       });
 
-      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: getFillColor(element, defaultFillColor, attrs.fill),
+        strokeWidth: 1
       });
 
-      var semantic = getSemantic(element);
+      return task;
+    },
+    'bpmn:SequenceFlow': function(parentGfx, element, attrs = {}) {
+      attrs = pickAttrs(attrs, [
+        'fill',
+        'stroke'
+      ]);
 
-      if (isCollection(semantic)) {
-        renderDataItemCollection(parentGfx, element);
-      }
+      var fill = getFillColor(element, defaultFillColor, attrs.fill),
+          stroke = getStrokeColor(element, defaultStrokeColor, attrs.stroke);
 
-      return elementObject;
-    },
-    'bpmn:DataObjectReference': as('bpmn:DataObject'),
-    'bpmn:DataInput': function(parentGfx, element) {
+      var connection = drawConnectionSegments(parentGfx, element.waypoints, {
+        markerEnd: marker('sequenceflow-end', fill, stroke),
+        stroke
+      });
 
-      var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+      var semantic = getSemantic(element);
 
-      // page
-      var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+      var { source } = element;
 
-      /* input arrow path */ drawPath(parentGfx, arrowPathData, { strokeWidth: 1 });
+      if (source) {
+        var sourceSemantic = getSemantic(source);
+
+        // conditional flow marker
+        if (semantic.get('conditionExpression') && is(sourceSemantic, 'bpmn:Activity')) {
+          svgAttr(connection, {
+            markerStart: marker('conditional-flow-marker', fill, stroke)
+          });
+        }
+
+        // default marker
+        if (sourceSemantic.get('default') && (is(sourceSemantic, 'bpmn:Gateway') || is(sourceSemantic, 'bpmn:Activity')) &&
+            sourceSemantic.get('default') === semantic) {
+          svgAttr(connection, {
+            markerStart: marker('conditional-default-flow-marker', fill, stroke)
+          });
+        }
+      }
 
-      return elementObject;
+      return connection;
     },
-    'bpmn:DataOutput': function(parentGfx, element) {
-      var arrowPathData = pathMap.getRawPath('DATA_ARROW');
+    'bpmn:ServiceTask': 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
+      drawCircle(parentGfx, 10, 10, {
+        fill: getFillColor(element, defaultFillColor, attrs.fill),
+        stroke: 'none',
+        transform: 'translate(6, 6)'
       });
 
-      return elementObject;
-    },
-    'bpmn:DataStoreReference': function(parentGfx, element) {
-      var DATA_STORE_PATH = pathMap.getScaledPath('DATA_STORE', {
-        xScaleFactor: 1,
-        yScaleFactor: 1,
-        containerWidth: element.width,
-        containerHeight: element.height,
-        position: {
-          mx: 0,
-          my: 0.133
+      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 = getSemantic(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 = getSemantic(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
@@ -1680,232 +2093,121 @@ export default function BpmnRenderer(
       });
 
       drawPath(parentGfx, textPathData, {
-        stroke: getStrokeColor(element, defaultStrokeColor)
+        stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
 
-      var text = getSemantic(element).text || '';
+      var semantic = getSemantic(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(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 = getSemantic(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(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;
@@ -1940,15 +2242,16 @@ BpmnRenderer.prototype.canRender = function(element) {
  *
  * @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;
 
-  /* jshint -W040 */
-  return h(parentGfx, element);
+  var handler = this._renderer(type);
+
+  return handler(parentGfx, element, attrs);
 };
 
 /**
@@ -1956,15 +2259,16 @@ BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
  *
  * @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;
+
+  var handler = this._renderer(type);
 
-  /* jshint -W040 */
-  return h(parentGfx, element);
+  return handler(parentGfx, element, attrs);
 };
 
 /**
@@ -1975,7 +2279,6 @@ BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
  * @return {string} path
  */
 BpmnRenderer.prototype.getShapePath = function(element) {
-
   if (is(element, 'bpmn:Event')) {
     return getCirclePath(element);
   }
@@ -1990,3 +2293,21 @@ BpmnRenderer.prototype.getShapePath = function(element) {
 
   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;
+  }, {});
+}