bpmn-js 9.0.0-subprocesses.0 → 9.0.0-subprocesses.1

package/lib/draw/BpmnRenderer.js

@@ -383,8 +383,8 @@ export default function BpmnRenderer(
   }
 
   function as(type) {
-    return function(parentGfx, element) {
-      return handlers[type](parentGfx, element);
+    return function(parentGfx, element, attrs) {
+      return handlers[type](parentGfx, element, attrs);
     };
   }
 
@@ -392,58 +392,58 @@ export default function BpmnRenderer(
     return handlers[type];
   }
 
-  function renderEventContent(element, parentGfx) {
+  function renderEventContent(element, parentGfx, attrs) {
 
     var event = getSemantic(element);
     var isThrowing = isThrowEvent(event);
 
     if (event.eventDefinitions && event.eventDefinitions.length>1) {
       if (event.parallelMultiple) {
-        return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, isThrowing);
+        return renderer('bpmn:ParallelMultipleEventDefinition')(parentGfx, element, attrs, isThrowing);
       }
       else {
-        return renderer('bpmn:MultipleEventDefinition')(parentGfx, element, isThrowing);
+        return renderer('bpmn:MultipleEventDefinition')(parentGfx, element, attrs, isThrowing);
       }
     }
 
     if (isTypedEvent(event, 'bpmn:MessageEventDefinition')) {
-      return renderer('bpmn:MessageEventDefinition')(parentGfx, element, isThrowing);
+      return renderer('bpmn:MessageEventDefinition')(parentGfx, element, attrs, isThrowing);
     }
 
     if (isTypedEvent(event, 'bpmn:TimerEventDefinition')) {
-      return renderer('bpmn:TimerEventDefinition')(parentGfx, element, isThrowing);
+      return renderer('bpmn:TimerEventDefinition')(parentGfx, element, attrs, isThrowing);
     }
 
     if (isTypedEvent(event, 'bpmn:ConditionalEventDefinition')) {
-      return renderer('bpmn:ConditionalEventDefinition')(parentGfx, element);
+      return renderer('bpmn:ConditionalEventDefinition')(parentGfx, element, attrs);
     }
 
     if (isTypedEvent(event, 'bpmn:SignalEventDefinition')) {
-      return renderer('bpmn:SignalEventDefinition')(parentGfx, element, isThrowing);
+      return renderer('bpmn:SignalEventDefinition')(parentGfx, element, attrs, isThrowing);
     }
 
     if (isTypedEvent(event, 'bpmn:EscalationEventDefinition')) {
-      return renderer('bpmn:EscalationEventDefinition')(parentGfx, element, isThrowing);
+      return renderer('bpmn:EscalationEventDefinition')(parentGfx, element, attrs, isThrowing);
     }
 
     if (isTypedEvent(event, 'bpmn:LinkEventDefinition')) {
-      return renderer('bpmn:LinkEventDefinition')(parentGfx, element, isThrowing);
+      return renderer('bpmn:LinkEventDefinition')(parentGfx, element, attrs, isThrowing);
     }
 
     if (isTypedEvent(event, 'bpmn:ErrorEventDefinition')) {
-      return renderer('bpmn:ErrorEventDefinition')(parentGfx, element, isThrowing);
+      return renderer('bpmn:ErrorEventDefinition')(parentGfx, element, attrs, isThrowing);
     }
 
     if (isTypedEvent(event, 'bpmn:CancelEventDefinition')) {
-      return renderer('bpmn:CancelEventDefinition')(parentGfx, element, isThrowing);
+      return renderer('bpmn:CancelEventDefinition')(parentGfx, element, attrs, isThrowing);
     }
 
     if (isTypedEvent(event, 'bpmn:CompensateEventDefinition')) {
-      return renderer('bpmn:CompensateEventDefinition')(parentGfx, element, isThrowing);
+      return renderer('bpmn:CompensateEventDefinition')(parentGfx, element, attrs, isThrowing);
     }
 
     if (isTypedEvent(event, 'bpmn:TerminateEventDefinition')) {
-      return renderer('bpmn:TerminateEventDefinition')(parentGfx, element, isThrowing);
+      return renderer('bpmn:TerminateEventDefinition')(parentGfx, element, attrs, isThrowing);
     }
 
     return null;
@@ -466,20 +466,20 @@ export default function BpmnRenderer(
     return text;
   }
 
-  function renderEmbeddedLabel(parentGfx, element, align) {
+  function renderEmbeddedLabel(parentGfx, element, align, attrs) {
     var semantic = getSemantic(element);
 
     return renderLabel(parentGfx, semantic.name, {
       box: element,
       align: align,
       padding: 5,
-      style: {
+      style: assign({
         fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-      }
+      }, attrs)
     });
   }
 
-  function renderExternalLabel(parentGfx, element) {
+  function renderExternalLabel(parentGfx, element, attrs) {
 
     var box = {
       width: 90,
@@ -496,21 +496,22 @@ export default function BpmnRenderer(
         textRenderer.getExternalStyle(),
         {
           fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-        }
+        },
+        attrs
       )
     });
   }
 
-  function renderLaneLabel(parentGfx, text, element) {
+  function renderLaneLabel(parentGfx, text, element, attrs) {
     var textBox = renderLabel(parentGfx, text, {
       box: {
         height: 30,
         width: element.height
       },
       align: 'center-middle',
-      style: {
+      style: assign({
         fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor)
-      }
+      }, attrs)
     });
 
     var top = -1 * element.height;
@@ -537,11 +538,11 @@ export default function BpmnRenderer(
 
       return drawCircle(parentGfx, element.width, element.height, attrs);
     },
-    'bpmn:StartEvent': function(parentGfx, element) {
-      var attrs = {
+    'bpmn:StartEvent': function(parentGfx, element, attrs) {
+      attrs = assign({
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      };
+      }, attrs);
 
       var semantic = getSemantic(element);
 
@@ -560,7 +561,7 @@ export default function BpmnRenderer(
 
       return circle;
     },
-    'bpmn:MessageEventDefinition': function(parentGfx, element, isThrowing) {
+    'bpmn:MessageEventDefinition': function(parentGfx, element, attrs, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_MESSAGE', {
         xScaleFactor: 0.9,
         yScaleFactor: 0.9,
@@ -575,20 +576,24 @@ export default function BpmnRenderer(
       var fill = isThrowing ? getStrokeColor(element, defaultStrokeColor) : getFillColor(element, defaultFillColor);
       var stroke = isThrowing ? getFillColor(element, defaultFillColor) : getStrokeColor(element, defaultStrokeColor);
 
-      var messagePath = drawPath(parentGfx, pathData, {
+      attrs = assign({
         strokeWidth: 1,
         fill: fill,
         stroke: stroke
-      });
+      }, attrs);
+
+      var messagePath = drawPath(parentGfx, pathData, attrs);
 
       return messagePath;
     },
-    'bpmn:TimerEventDefinition': function(parentGfx, element) {
-      var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
+    'bpmn:TimerEventDefinition': function(parentGfx, element, attrs) {
+      var outerAttrs = assign({
         strokeWidth: 2,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+
+      var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, outerAttrs);
 
       var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {
         xScaleFactor: 0.75,
@@ -601,11 +606,13 @@ export default function BpmnRenderer(
         }
       });
 
-      drawPath(parentGfx, pathData, {
+      var innerAttrs = assign({
         strokeWidth: 2,
         strokeLinecap: 'square',
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+
+      drawPath(parentGfx, pathData, innerAttrs);
 
       for (var i = 0;i < 12; i++) {
 
@@ -623,17 +630,25 @@ export default function BpmnRenderer(
         var width = element.width / 2;
         var height = element.height / 2;
 
-        drawPath(parentGfx, linePathData, {
+        var lineAttrs = assign({
           strokeWidth: 1,
           strokeLinecap: 'square',
           transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
           stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+        }, attrs);
+
+        drawPath(parentGfx, linePathData, lineAttrs);
       }
 
       return circle;
     },
-    'bpmn:EscalationEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:EscalationEventDefinition': function(parentGfx, event, attrs, isThrowing) {
+      attrs = assign({
+        strokeWidth: 1,
+        fill: fill,
+        stroke: getStrokeColor(event, defaultStrokeColor)
+      }, attrs);
+
       var pathData = pathMap.getScaledPath('EVENT_ESCALATION', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -647,13 +662,14 @@ export default function BpmnRenderer(
 
       var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-      return drawPath(parentGfx, pathData, {
+      return drawPath(parentGfx, pathData, attrs);
+    },
+    'bpmn:ConditionalEventDefinition': function(parentGfx, event, attrs) {
+      attrs = assign({
         strokeWidth: 1,
-        fill: fill,
         stroke: getStrokeColor(event, defaultStrokeColor)
-      });
-    },
-    'bpmn:ConditionalEventDefinition': function(parentGfx, event) {
+      }, attrs);
+
       var pathData = pathMap.getScaledPath('EVENT_CONDITIONAL', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -665,12 +681,9 @@ export default function BpmnRenderer(
         }
       });
 
-      return drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        stroke: getStrokeColor(event, defaultStrokeColor)
-      });
+      return drawPath(parentGfx, pathData, attrs);
     },
-    'bpmn:LinkEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:LinkEventDefinition': function(parentGfx, event, attrs, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_LINK', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -684,13 +697,15 @@ export default function BpmnRenderer(
 
       var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-      return drawPath(parentGfx, pathData, {
+      attrs = assign({
         strokeWidth: 1,
         fill: fill,
         stroke: getStrokeColor(event, defaultStrokeColor)
-      });
+      }, attrs);
+
+      return drawPath(parentGfx, pathData, attrs);
     },
-    'bpmn:ErrorEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:ErrorEventDefinition': function(parentGfx, event, attrs, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_ERROR', {
         xScaleFactor: 1.1,
         yScaleFactor: 1.1,
@@ -704,13 +719,15 @@ export default function BpmnRenderer(
 
       var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-      return drawPath(parentGfx, pathData, {
+      attrs = assign({
         strokeWidth: 1,
         fill: fill,
         stroke: getStrokeColor(event, defaultStrokeColor)
-      });
+      }, attrs);
+
+      return drawPath(parentGfx, pathData, attrs);
     },
-    'bpmn:CancelEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:CancelEventDefinition': function(parentGfx, event, attrs, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_CANCEL_45', {
         xScaleFactor: 1.0,
         yScaleFactor: 1.0,
@@ -724,17 +741,19 @@ export default function BpmnRenderer(
 
       var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-      var path = drawPath(parentGfx, pathData, {
+      attrs = assign({
         strokeWidth: 1,
         fill: fill,
         stroke: getStrokeColor(event, defaultStrokeColor)
-      });
+      }, attrs);
+
+      var path = drawPath(parentGfx, pathData, attrs);
 
       rotate(path, 45);
 
       return path;
     },
-    'bpmn:CompensateEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:CompensateEventDefinition': function(parentGfx, event, attrs, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_COMPENSATION', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -748,13 +767,15 @@ export default function BpmnRenderer(
 
       var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-      return drawPath(parentGfx, pathData, {
+      attrs = assign({
         strokeWidth: 1,
         fill: fill,
         stroke: getStrokeColor(event, defaultStrokeColor)
-      });
+      }, attrs);
+
+      return drawPath(parentGfx, pathData, attrs);
     },
-    'bpmn:SignalEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:SignalEventDefinition': function(parentGfx, event, attrs, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_SIGNAL', {
         xScaleFactor: 0.9,
         yScaleFactor: 0.9,
@@ -768,13 +789,15 @@ export default function BpmnRenderer(
 
       var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-      return drawPath(parentGfx, pathData, {
+      attrs = assign({
         strokeWidth: 1,
         fill: fill,
         stroke: getStrokeColor(event, defaultStrokeColor)
-      });
+      }, attrs);
+
+      return drawPath(parentGfx, pathData, attrs);
     },
-    'bpmn:MultipleEventDefinition': function(parentGfx, event, isThrowing) {
+    'bpmn:MultipleEventDefinition': function(parentGfx, event, attrs, isThrowing) {
       var pathData = pathMap.getScaledPath('EVENT_MULTIPLE', {
         xScaleFactor: 1.1,
         yScaleFactor: 1.1,
@@ -788,12 +811,14 @@ export default function BpmnRenderer(
 
       var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
-      return drawPath(parentGfx, pathData, {
+      attrs = assign({
         strokeWidth: 1,
         fill: fill
-      });
+      }, attrs);
+
+      return drawPath(parentGfx, pathData, attrs);
     },
-    'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event) {
+    'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event, attrs) {
       var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {
         xScaleFactor: 1.2,
         yScaleFactor: 1.2,
@@ -805,47 +830,54 @@ export default function BpmnRenderer(
         }
       });
 
-      return drawPath(parentGfx, pathData, {
+      attrs = assign({
         strokeWidth: 1,
         fill: getStrokeColor(event, defaultStrokeColor),
         stroke: getStrokeColor(event, defaultStrokeColor)
-      });
+      }, attrs);
+
+
+      return drawPath(parentGfx, pathData, attrs);
     },
-    'bpmn:EndEvent': function(parentGfx, element) {
-      var circle = renderer('bpmn:Event')(parentGfx, element, {
+    'bpmn:EndEvent': function(parentGfx, element, attrs) {
+      var outerAttrs = assign({
         strokeWidth: 4,
         fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+        stroke: getStrokeColor(element, defaultStrokeColor),
+      }, attrs);
 
-      renderEventContent(element, parentGfx, true);
+      var circle = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
+
+      renderEventContent(element, parentGfx, attrs);
 
       return circle;
     },
-    'bpmn:TerminateEventDefinition': function(parentGfx, element) {
-      var circle = drawCircle(parentGfx, element.width, element.height, 8, {
-        strokeWidth: 4,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+    'bpmn:TerminateEventDefinition': function(parentGfx, element, attrs) {
+      attrs = assign({
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor),
+        strokeWidth: 4
+      }, attrs);
+
+      var circle = drawCircle(parentGfx, element.width, element.height, 8, attrs);
 
       return circle;
     },
-    'bpmn:IntermediateEvent': function(parentGfx, element) {
-      var outer = renderer('bpmn:Event')(parentGfx, element, {
+    'bpmn:IntermediateEvent': function(parentGfx, element, attrs) {
+      var outerAttrs = assign({
         strokeWidth: 1,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+
+      var outer = renderer('bpmn:Event')(parentGfx, element, outerAttrs);
 
       /* inner */
-      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
-        strokeWidth: 1,
+      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, assign({}, outerAttrs, {
         fill: getFillColor(element, 'none'),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }));
 
-      renderEventContent(element, parentGfx);
+      renderEventContent(element, parentGfx, attrs);
 
       return outer;
     },
@@ -863,21 +895,21 @@ export default function BpmnRenderer(
       return drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
     },
 
-    'bpmn:Task': function(parentGfx, element) {
-      var attrs = {
+    'bpmn:Task': function(parentGfx, element, attrs) {
+      attrs = assign({
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      };
+      }, attrs);
 
       var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
 
       renderEmbeddedLabel(parentGfx, element, 'center-middle');
-      attachTaskMarkers(parentGfx, element);
+      attachTaskMarkers(parentGfx, element, attrs);
 
       return rect;
     },
-    'bpmn:ServiceTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    'bpmn:ServiceTask': function(parentGfx, element, attrs) {
+      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
       var pathDataBG = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
         abspos: {
@@ -886,11 +918,12 @@ export default function BpmnRenderer(
         }
       });
 
-      /* service bg */ drawPath(parentGfx, pathDataBG, {
+      var serviceAttrs = assign({
         strokeWidth: 1,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      /* service bg */ drawPath(parentGfx, pathDataBG, serviceAttrs);
 
       var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', {
         abspos: {
@@ -899,10 +932,11 @@ export default function BpmnRenderer(
         }
       });
 
-      /* service fill */ drawPath(parentGfx, fillPathData, {
+      var fillAttrs = assign({
         strokeWidth: 0,
         fill: getFillColor(element, defaultFillColor)
-      });
+      }, attrs);
+      /* service fill */ drawPath(parentGfx, fillPathData, fillAttrs);
 
       var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
         abspos: {
@@ -911,16 +945,12 @@ export default function BpmnRenderer(
         }
       });
 
-      /* service */ drawPath(parentGfx, pathData, {
-        strokeWidth: 1,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      /* service */ drawPath(parentGfx, pathData, serviceAttrs);
 
       return task;
     },
-    'bpmn:UserTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    'bpmn:UserTask': function(parentGfx, element, attrs) {
+      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
       var x = 15;
       var y = 12;
@@ -932,11 +962,12 @@ export default function BpmnRenderer(
         }
       });
 
-      /* user path */ drawPath(parentGfx, pathData, {
+      var userAttrs = assign({
         strokeWidth: 0.5,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      /* user path */ drawPath(parentGfx, pathData, userAttrs);
 
       var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
         abspos: {
@@ -945,11 +976,7 @@ export default function BpmnRenderer(
         }
       });
 
-      /* user2 path */ drawPath(parentGfx, pathData2, {
-        strokeWidth: 0.5,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      /* user2 path */ drawPath(parentGfx, pathData2, userAttrs);
 
       var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
         abspos: {
@@ -958,16 +985,12 @@ export default function BpmnRenderer(
         }
       });
 
-      /* user3 path */ drawPath(parentGfx, pathData3, {
-        strokeWidth: 0.5,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      /* user3 path */ drawPath(parentGfx, pathData3, userAttrs);
 
       return task;
     },
-    'bpmn:ManualTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    'bpmn:ManualTask': function(parentGfx, element, attrs) {
+      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
       var pathData = pathMap.getScaledPath('TASK_TYPE_MANUAL', {
         abspos: {
@@ -976,16 +999,17 @@ export default function BpmnRenderer(
         }
       });
 
-      /* manual path */ drawPath(parentGfx, pathData, {
+      var manualAttrs = assign({
         strokeWidth: 0.5, // 0.25,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      /* manual path */ drawPath(parentGfx, pathData, manualAttrs);
 
       return task;
     },
-    'bpmn:SendTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    'bpmn:SendTask': function(parentGfx, element, attrs) {
+      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
       var pathData = pathMap.getScaledPath('TASK_TYPE_SEND', {
         xScaleFactor: 1,
@@ -998,22 +1022,25 @@ export default function BpmnRenderer(
         }
       });
 
-      /* send path */ drawPath(parentGfx, pathData, {
+      /* send path */
+      var pathAttrs = assign({
         strokeWidth: 1,
         fill: getStrokeColor(element, defaultStrokeColor),
         stroke: getFillColor(element, defaultFillColor)
-      });
+      }, attrs);
+
+      drawPath(parentGfx, pathData, pathAttrs);
 
       return task;
     },
-    'bpmn:ReceiveTask' : function(parentGfx, element) {
+    'bpmn:ReceiveTask' : function(parentGfx, element, attrs) {
       var semantic = getSemantic(element);
 
-      var task = renderer('bpmn:Task')(parentGfx, element);
+      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
       var pathData;
 
       if (semantic.instantiate) {
-        drawCircle(parentGfx, 28, 28, 20 * 0.22, { strokeWidth: 1 });
+        drawCircle(parentGfx, 28, 28, 20 * 0.22, assign({ strokeWidth: 1 }, attrs));
 
         pathData = pathMap.getScaledPath('TASK_TYPE_INSTANTIATING_SEND', {
           abspos: {
@@ -1035,16 +1062,18 @@ export default function BpmnRenderer(
         });
       }
 
-      /* receive path */ drawPath(parentGfx, pathData, {
+      var receiveAttrs = assign({
         strokeWidth: 1,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+
+      /* receive path */ drawPath(parentGfx, pathData, receiveAttrs);
 
       return task;
     },
-    'bpmn:ScriptTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    'bpmn:ScriptTask': function(parentGfx, element, attrs) {
+      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
       var pathData = pathMap.getScaledPath('TASK_TYPE_SCRIPT', {
         abspos: {
@@ -1053,15 +1082,16 @@ export default function BpmnRenderer(
         }
       });
 
-      /* script path */ drawPath(parentGfx, pathData, {
+      var scriptAttrs = assign({
         strokeWidth: 1,
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      /* script path */ drawPath(parentGfx, pathData, scriptAttrs);
 
       return task;
     },
-    'bpmn:BusinessRuleTask': function(parentGfx, element) {
-      var task = renderer('bpmn:Task')(parentGfx, element);
+    'bpmn:BusinessRuleTask': function(parentGfx, element, attrs) {
+      var task = renderer('bpmn:Task')(parentGfx, element, attrs);
 
       var headerPathData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_HEADER', {
         abspos: {
@@ -1070,12 +1100,12 @@ export default function BpmnRenderer(
         }
       });
 
-      var businessHeaderPath = drawPath(parentGfx, headerPathData);
-      svgAttr(businessHeaderPath, {
+      var headerAttrs = assign({
         strokeWidth: 1,
         fill: getFillColor(element, '#aaaaaa'),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      drawPath(parentGfx, headerPathData, headerAttrs);
 
       var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
         abspos: {
@@ -1084,11 +1114,11 @@ export default function BpmnRenderer(
         }
       });
 
-      var businessPath = drawPath(parentGfx, headerData);
-      svgAttr(businessPath, {
+      var businessAttrs = assign({
         strokeWidth: 1,
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      drawPath(parentGfx, headerData, businessAttrs);
 
       return task;
     },
@@ -1111,41 +1141,42 @@ export default function BpmnRenderer(
       renderEmbeddedLabel(parentGfx, element, expanded ? 'center-top' : 'center-middle');
 
       if (expanded) {
-        attachTaskMarkers(parentGfx, element);
+        attachTaskMarkers(parentGfx, element, attrs);
       } else {
-        attachTaskMarkers(parentGfx, element, ['SubProcessMarker']);
+        attachTaskMarkers(parentGfx, element, attrs, ['SubProcessMarker']);
       }
 
       return rect;
     },
-    'bpmn:AdHocSubProcess': function(parentGfx, element) {
-      return renderer('bpmn:SubProcess')(parentGfx, element);
+    'bpmn:AdHocSubProcess': function(parentGfx, element, attrs) {
+      return renderer('bpmn:SubProcess')(parentGfx, element, attrs);
     },
-    'bpmn:Transaction': function(parentGfx, element) {
-      var outer = renderer('bpmn:SubProcess')(parentGfx, element);
+    'bpmn:Transaction': function(parentGfx, element, attrs) {
+      var outer = renderer('bpmn:SubProcess')(parentGfx, element, attrs);
 
       var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
         stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
-      /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, innerAttrs);
+      /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, assign(innerAttrs, attrs));
 
       return outer;
     },
-    'bpmn:CallActivity': function(parentGfx, element) {
-      return renderer('bpmn:SubProcess')(parentGfx, element, {
+    'bpmn:CallActivity': function(parentGfx, element, attrs) {
+      attrs = assign({
         strokeWidth: 5
-      });
-    },
-    'bpmn:Participant': function(parentGfx, element) {
+      }, attrs);
 
-      var attrs = {
+      return renderer('bpmn:SubProcess')(parentGfx, element, attrs);
+    },
+    'bpmn:Participant': function(parentGfx, element, attrs) {
+      var outerAttrs = assign({
         fillOpacity: DEFAULT_FILL_OPACITY,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      };
+      }, attrs);
 
-      var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
+      var lane = renderer('bpmn:Lane')(parentGfx, element, outerAttrs);
 
       var expandedPool = isExpanded(element);
 
@@ -1153,9 +1184,9 @@ export default function BpmnRenderer(
         drawLine(parentGfx, [
           { x: 30, y: 0 },
           { x: 30, y: element.height }
-        ], {
+        ], assign({
           stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+        }, attrs));
         var text = getSemantic(element).name;
         renderLaneLabel(parentGfx, text, element);
       } else {
@@ -1173,7 +1204,7 @@ export default function BpmnRenderer(
       var participantMultiplicity = !!(getSemantic(element).participantMultiplicity);
 
       if (participantMultiplicity) {
-        renderer('ParticipantMultiplicityMarker')(parentGfx, element);
+        renderer('ParticipantMultiplicityMarker')(parentGfx, element, attrs);
       }
 
       return lane;
@@ -1194,20 +1225,23 @@ export default function BpmnRenderer(
 
       return rect;
     },
-    'bpmn:InclusiveGateway': function(parentGfx, element) {
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+    'bpmn:InclusiveGateway': function(parentGfx, element, attrs) {
+      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
 
-      /* circle path */
-      drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
+
+      var circleAttrs = assign({
         strokeWidth: 2.5,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+
+      /* circle path */
+      drawCircle(parentGfx, element.width, element.height, element.height * 0.24, circleAttrs);
 
       return diamond;
     },
-    'bpmn:ExclusiveGateway': function(parentGfx, element) {
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+    'bpmn:ExclusiveGateway': function(parentGfx, element, attrs) {
+      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
 
       var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
         xScaleFactor: 0.4,
@@ -1221,17 +1255,17 @@ export default function BpmnRenderer(
       });
 
       if ((getDi(element).isMarkerVisible)) {
-        drawPath(parentGfx, pathData, {
+        drawPath(parentGfx, pathData, assign({
           strokeWidth: 1,
           fill: getStrokeColor(element, defaultStrokeColor),
           stroke: getStrokeColor(element, defaultStrokeColor)
-        });
+        }, attrs));
       }
 
       return diamond;
     },
-    'bpmn:ComplexGateway': function(parentGfx, element) {
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+    'bpmn:ComplexGateway': function(parentGfx, element, attrs) {
+      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
 
       var pathData = pathMap.getScaledPath('GATEWAY_COMPLEX', {
         xScaleFactor: 0.5,
@@ -1244,16 +1278,17 @@ export default function BpmnRenderer(
         }
       });
 
-      /* complex path */ drawPath(parentGfx, pathData, {
+      var innerAttrs = assign({
         strokeWidth: 1,
         fill: getStrokeColor(element, defaultStrokeColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      /* complex path */ drawPath(parentGfx, pathData, innerAttrs);
 
       return diamond;
     },
-    'bpmn:ParallelGateway': function(parentGfx, element) {
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+    'bpmn:ParallelGateway': function(parentGfx, element, attrs) {
+      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
 
       var pathData = pathMap.getScaledPath('GATEWAY_PARALLEL', {
         xScaleFactor: 0.6,
@@ -1266,25 +1301,27 @@ export default function BpmnRenderer(
         }
       });
 
-      /* parallel path */ drawPath(parentGfx, pathData, {
+      var innerAttrs = assign({
         strokeWidth: 1,
         fill: getStrokeColor(element, defaultStrokeColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      /* parallel path */ drawPath(parentGfx, pathData, innerAttrs);
 
       return diamond;
     },
-    'bpmn:EventBasedGateway': function(parentGfx, element) {
+    'bpmn:EventBasedGateway': function(parentGfx, element, attrs) {
 
       var semantic = getSemantic(element);
 
-      var diamond = renderer('bpmn:Gateway')(parentGfx, element);
+      var diamond = renderer('bpmn:Gateway')(parentGfx, element, attrs);
 
-      /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
+      var outerAttrs = assign({
         strokeWidth: 1,
         fill: 'none',
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, outerAttrs);
 
       var type = semantic.eventGatewayType;
       var instantiate = !!semantic.instantiate;
@@ -1302,13 +1339,12 @@ export default function BpmnRenderer(
           }
         });
 
-        var attrs = {
+        var innerAttrs = assign({
           strokeWidth: 2,
           fill: getFillColor(element, 'none'),
           stroke: getStrokeColor(element, defaultStrokeColor)
-        };
-
-        /* event path */ drawPath(parentGfx, pathData, attrs);
+        }, attrs);
+        /* event path */ drawPath(parentGfx, pathData, innerAttrs);
       }
 
       if (type === 'Parallel') {
@@ -1324,7 +1360,7 @@ export default function BpmnRenderer(
           }
         });
 
-        var parallelPath = drawPath(parentGfx, pathData);
+        var parallelPath = drawPath(parentGfx, pathData, attrs);
         svgAttr(parallelPath, {
           strokeWidth: 1,
           fill: 'none'
@@ -1332,12 +1368,12 @@ export default function BpmnRenderer(
       } else if (type === 'Exclusive') {
 
         if (!instantiate) {
-          var innerCircle = drawCircle(parentGfx, element.width, element.height, element.height * 0.26);
-          svgAttr(innerCircle, {
+          var innerCircleAttrs = assign({
             strokeWidth: 1,
             fill: 'none',
             stroke: getStrokeColor(element, defaultStrokeColor)
-          });
+          }, attrs);
+          drawCircle(parentGfx, element.width, element.height, element.height * 0.26, innerCircleAttrs);
         }
 
         drawEvent();
@@ -1346,26 +1382,28 @@ export default function BpmnRenderer(
 
       return diamond;
     },
-    'bpmn:Gateway': function(parentGfx, element) {
-      var attrs = {
+    'bpmn:Gateway': function(parentGfx, element, attrs) {
+      attrs = assign({
         fill: getFillColor(element, defaultFillColor),
         fillOpacity: DEFAULT_FILL_OPACITY,
         stroke: getStrokeColor(element, defaultStrokeColor)
-      };
+      }, attrs);
 
       return drawDiamond(parentGfx, element.width, element.height, attrs);
     },
-    'bpmn:SequenceFlow': function(parentGfx, element) {
+    'bpmn:SequenceFlow': function(parentGfx, element, attrs) {
+      attrs = attrs || {};
+
       var pathData = createPathFromConnection(element);
 
-      var fill = getFillColor(element, defaultFillColor),
-          stroke = getStrokeColor(element, defaultStrokeColor);
+      var fill = attrs.fill || getFillColor(element, defaultFillColor),
+          stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);
 
-      var attrs = {
+      attrs = assign({
         strokeLinejoin: 'round',
         markerEnd: marker('sequenceflow-end', fill, stroke),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      };
+      }, attrs || {});
 
       var path = drawPath(parentGfx, pathData, attrs);
 
@@ -1419,41 +1457,56 @@ export default function BpmnRenderer(
 
       return drawLine(parentGfx, element.waypoints, attrs);
     },
-    'bpmn:DataInputAssociation': function(parentGfx, element) {
-      var fill = getFillColor(element, defaultFillColor),
-          stroke = getStrokeColor(element, defaultStrokeColor);
+    'bpmn:DataInputAssociation': function(parentGfx, element, attrs) {
+      attrs = attrs || {};
+
+      var fill = attrs.fill || getFillColor(element, defaultFillColor),
+          stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);
 
-      return renderer('bpmn:Association')(parentGfx, element, {
+      attrs = assign({
+        fill: fill,
+        stroke: stroke,
         markerEnd: marker('association-end', fill, stroke)
-      });
+      }, attrs);
+
+      return renderer('bpmn:Association')(parentGfx, element, attrs);
     },
-    'bpmn:DataOutputAssociation': function(parentGfx, element) {
-      var fill = getFillColor(element, defaultFillColor),
-          stroke = getStrokeColor(element, defaultStrokeColor);
+    'bpmn:DataOutputAssociation': function(parentGfx, element, attrs) {
+      attrs = attrs || {};
 
-      return renderer('bpmn:Association')(parentGfx, element, {
+      var fill = attrs.fill || getFillColor(element, defaultFillColor),
+          stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);
+
+
+      attrs = assign({
+        fill: fill,
+        stroke: stroke,
         markerEnd: marker('association-end', fill, stroke)
-      });
+      }, attrs);
+
+      return renderer('bpmn:Association')(parentGfx, element, attrs);
     },
-    'bpmn:MessageFlow': function(parentGfx, element) {
+    'bpmn:MessageFlow': function(parentGfx, element, attrs) {
+      attrs = attrs || {};
 
       var semantic = getSemantic(element),
           di = getDi(element);
 
-      var fill = getFillColor(element, defaultFillColor),
-          stroke = getStrokeColor(element, defaultStrokeColor);
+      var fill = attrs.fill || getFillColor(element, defaultFillColor),
+          stroke = attrs.stroke || getStrokeColor(element, defaultStrokeColor);
 
       var pathData = createPathFromConnection(element);
 
-      var attrs = {
+
+      attrs = assign({
         markerEnd: marker('messageflow-end', fill, stroke),
         markerStart: marker('messageflow-start', fill, stroke),
         strokeDasharray: '10, 12',
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         strokeWidth: '1.5px',
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      };
+        stroke: stroke
+      }, attrs);
 
       var path = drawPath(parentGfx, pathData, attrs);
 
@@ -1500,7 +1553,7 @@ export default function BpmnRenderer(
 
       return path;
     },
-    'bpmn:DataObject': function(parentGfx, element) {
+    'bpmn:DataObject': function(parentGfx, element, attrs) {
       var pathData = pathMap.getScaledPath('DATA_OBJECT_PATH', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -1512,46 +1565,56 @@ export default function BpmnRenderer(
         }
       });
 
-      var elementObject = drawPath(parentGfx, pathData, {
+      var outerAttrs = assign({
         fill: getFillColor(element, defaultFillColor),
         fillOpacity: DEFAULT_FILL_OPACITY,
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      var elementObject = drawPath(parentGfx, pathData, outerAttrs);
 
       var semantic = getSemantic(element);
 
       if (isCollection(semantic)) {
-        renderDataItemCollection(parentGfx, element);
+        renderDataItemCollection(parentGfx, element, attrs);
       }
 
       return elementObject;
     },
     'bpmn:DataObjectReference': as('bpmn:DataObject'),
-    'bpmn:DataInput': function(parentGfx, element) {
+    'bpmn:DataInput': function(parentGfx, element, attrs) {
 
       var arrowPathData = pathMap.getRawPath('DATA_ARROW');
 
       // page
-      var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+      var elementObject = renderer('bpmn:DataObject')(parentGfx, element, attrs);
 
-      /* input arrow path */ drawPath(parentGfx, arrowPathData, { strokeWidth: 1 });
+      var innerAttrs = assign({ strokeWidth: 1 }, attrs);
+      /* input arrow path */ drawPath(parentGfx, arrowPathData, innerAttrs);
 
       return elementObject;
     },
-    'bpmn:DataOutput': function(parentGfx, element) {
+    'bpmn:DataOutput': function(parentGfx, element, attrs) {
       var arrowPathData = pathMap.getRawPath('DATA_ARROW');
 
       // page
-      var elementObject = renderer('bpmn:DataObject')(parentGfx, element);
+      var elementObject = renderer('bpmn:DataObject')(parentGfx, element, attrs);
 
-      /* output arrow path */ drawPath(parentGfx, arrowPathData, {
+      var arrowAttrs = assign({
         strokeWidth: 1,
         fill: 'black'
-      });
+      }, attrs);
+      /* output arrow path */ drawPath(parentGfx, arrowPathData, arrowAttrs);
 
       return elementObject;
     },
-    'bpmn:DataStoreReference': function(parentGfx, element) {
+    'bpmn:DataStoreReference': function(parentGfx, element, attrs) {
+      attrs = assign({
+        strokeWidth: 2,
+        fill: getFillColor(element, defaultFillColor),
+        fillOpacity: DEFAULT_FILL_OPACITY,
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      }, attrs);
+
       var DATA_STORE_PATH = pathMap.getScaledPath('DATA_STORE', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -1563,25 +1626,20 @@ export default function BpmnRenderer(
         }
       });
 
-      var elementStore = drawPath(parentGfx, DATA_STORE_PATH, {
-        strokeWidth: 2,
-        fill: getFillColor(element, defaultFillColor),
-        fillOpacity: DEFAULT_FILL_OPACITY,
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      var elementStore = drawPath(parentGfx, DATA_STORE_PATH, attrs);
 
       return elementStore;
     },
-    'bpmn:BoundaryEvent': function(parentGfx, element) {
+    'bpmn:BoundaryEvent': function(parentGfx, element, attrs) {
 
       var semantic = getSemantic(element),
           cancel = semantic.cancelActivity;
 
-      var attrs = {
+      attrs = assign({
         strokeWidth: 1,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      };
+      }, attrs);
 
       if (!cancel) {
         attrs.strokeDasharray = '6';
@@ -1602,30 +1660,32 @@ export default function BpmnRenderer(
 
       /* inner path */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, innerAttrs);
 
-      renderEventContent(element, parentGfx);
+      renderEventContent(element, parentGfx, attrs);
 
       return outer;
     },
-    'bpmn:Group': function(parentGfx, element) {
+    'bpmn:Group': function(parentGfx, element, attrs) {
 
-      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, {
+      attrs = assign({
         stroke: getStrokeColor(element, defaultStrokeColor),
         strokeWidth: 1,
         strokeDasharray: '8,3,1,3',
         fill: 'none',
         pointerEvents: 'none'
-      });
+      }, attrs);
+
+      var group = drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS, attrs);
 
       return group;
     },
     'label': function(parentGfx, element) {
       return renderExternalLabel(parentGfx, element);
     },
-    'bpmn:TextAnnotation': function(parentGfx, element) {
-      var style = {
+    'bpmn:TextAnnotation': function(parentGfx, element, attrs) {
+      var style = assign({}, attrs, {
         'fill': 'none',
         'stroke': 'none'
-      };
+      });
 
       var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, style);
 
@@ -1640,9 +1700,10 @@ export default function BpmnRenderer(
         }
       });
 
-      drawPath(parentGfx, textPathData, {
+      var pathAttrs = assign({
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+      drawPath(parentGfx, textPathData, pathAttrs);
 
       var text = getSemantic(element).text || '';
       renderLabel(parentGfx, text, {
@@ -1656,7 +1717,13 @@ export default function BpmnRenderer(
 
       return textElement;
     },
-    'ParticipantMultiplicityMarker': function(parentGfx, element) {
+    'ParticipantMultiplicityMarker': function(parentGfx, element, attrs) {
+      attrs = assign({
+        strokeWidth: 2,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      }, attrs);
+
       var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -1668,18 +1735,15 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('participant-multiplicity', parentGfx, markerPath, {
-        strokeWidth: 2,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      drawMarker('participant-multiplicity', parentGfx, markerPath, attrs);
     },
-    'SubProcessMarker': function(parentGfx, element) {
-      var markerRect = drawRect(parentGfx, 14, 14, 0, {
-        strokeWidth: 1,
+    'SubProcessMarker': function(parentGfx, element, attrs) {
+      attrs = assign({
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      }, attrs);
+
+      var markerRect = drawRect(parentGfx, 14, 14, 0, assign({ strokeWidth: 1 }, attrs));
 
       // Process marker is placed in the middle of the box
       // therefore fixed values can be used here
@@ -1696,12 +1760,14 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('sub-process', parentGfx, markerPath, {
+      drawMarker('sub-process', parentGfx, markerPath, attrs);
+    },
+    'ParallelMarker': function(parentGfx, element, attrs, position) {
+      attrs = assign({
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
-    },
-    'ParallelMarker': function(parentGfx, element, position) {
+      }, attrs);
+
       var markerPath = pathMap.getScaledPath('MARKER_PARALLEL', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -1713,12 +1779,13 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('parallel', parentGfx, markerPath, {
+      drawMarker('parallel', parentGfx, markerPath, attrs);
+    },
+    'SequentialMarker': function(parentGfx, element, attrs, position) {
+      attrs = assign({
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
-    },
-    'SequentialMarker': function(parentGfx, element, position) {
+      }, attrs);
       var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -1730,12 +1797,15 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('sequential', parentGfx, markerPath, {
+      drawMarker('sequential', parentGfx, markerPath, attrs);
+    },
+    'CompensationMarker': function(parentGfx, element, attrs, position) {
+      attrs = assign({
+        strokeWidth: 1,
         fill: getFillColor(element, defaultFillColor),
         stroke: getStrokeColor(element, defaultStrokeColor)
-      });
-    },
-    'CompensationMarker': function(parentGfx, element, position) {
+      }, attrs);
+
       var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -1747,13 +1817,17 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('compensation', parentGfx, markerMath, {
+      drawMarker('compensation', parentGfx, markerMath, attrs);
+    },
+    'LoopMarker': function(parentGfx, element, attrs, position) {
+      attrs = assign({
         strokeWidth: 1,
         fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
-    },
-    'LoopMarker': function(parentGfx, element, position) {
+        stroke: getStrokeColor(element, defaultStrokeColor),
+        strokeLinecap: 'round',
+        strokeMiterlimit: 0.5
+      }, attrs);
+
       var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -1765,15 +1839,15 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('loop', parentGfx, markerPath, {
-        strokeWidth: 1,
-        fill: getFillColor(element, defaultFillColor),
-        stroke: getStrokeColor(element, defaultStrokeColor),
-        strokeLinecap: 'round',
-        strokeMiterlimit: 0.5
-      });
+      drawMarker('loop', parentGfx, markerPath, attrs);
     },
-    'AdhocMarker': function(parentGfx, element, position) {
+    'AdhocMarker': function(parentGfx, element, attrs, position) {
+      attrs = assign({
+        strokeWidth: 1,
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      }, attrs);
+
       var markerPath = pathMap.getScaledPath('MARKER_ADHOC', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -1785,15 +1859,11 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('adhoc', parentGfx, markerPath, {
-        strokeWidth: 1,
-        fill: getStrokeColor(element, defaultStrokeColor),
-        stroke: getStrokeColor(element, defaultStrokeColor)
-      });
+      drawMarker('adhoc', parentGfx, markerPath, attrs);
     }
   };
 
-  function attachTaskMarkers(parentGfx, element, taskMarkers) {
+  function attachTaskMarkers(parentGfx, element, attrs, taskMarkers) {
     var obj = getSemantic(element);
 
     var subprocess = taskMarkers && taskMarkers.indexOf('SubProcessMarker') !== -1;
@@ -1818,15 +1888,15 @@ export default function BpmnRenderer(
     }
 
     forEach(taskMarkers, function(marker) {
-      renderer(marker)(parentGfx, element, position);
+      renderer(marker)(parentGfx, element, attrs, position);
     });
 
     if (obj.isForCompensation) {
-      renderer('CompensationMarker')(parentGfx, element, position);
+      renderer('CompensationMarker')(parentGfx, element, attrs, position);
     }
 
     if (obj.$type === 'bpmn:AdHocSubProcess') {
-      renderer('AdhocMarker')(parentGfx, element, position);
+      renderer('AdhocMarker')(parentGfx, element, attrs, position);
     }
 
     var loopCharacteristics = obj.loopCharacteristics,
@@ -1835,20 +1905,23 @@ export default function BpmnRenderer(
     if (loopCharacteristics) {
 
       if (isSequential === undefined) {
-        renderer('LoopMarker')(parentGfx, element, position);
+        renderer('LoopMarker')(parentGfx, element, attrs, position);
       }
 
       if (isSequential === false) {
-        renderer('ParallelMarker')(parentGfx, element, position);
+        renderer('ParallelMarker')(parentGfx, element, attrs, position);
       }
 
       if (isSequential === true) {
-        renderer('SequentialMarker')(parentGfx, element, position);
+        renderer('SequentialMarker')(parentGfx, element, attrs, position);
       }
     }
   }
 
-  function renderDataItemCollection(parentGfx, element) {
+  function renderDataItemCollection(parentGfx, element, attrs) {
+    attrs = assign({
+      strokeWidth: 2
+    }, attrs);
 
     var yPosition = (element.height - 18) / element.height;
 
@@ -1863,9 +1936,7 @@ export default function BpmnRenderer(
       }
     });
 
-    /* collection path */ drawPath(parentGfx, pathData, {
-      strokeWidth: 2
-    });
+    /* collection path */ drawPath(parentGfx, pathData, attrs);
   }
 
 
@@ -1891,20 +1962,20 @@ BpmnRenderer.prototype.canRender = function(element) {
   return is(element, 'bpmn:BaseElement');
 };
 
-BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
+BpmnRenderer.prototype.drawShape = function(parentGfx, element, attrs) {
   var type = element.type;
   var h = this.handlers[type];
 
   /* jshint -W040 */
-  return h(parentGfx, element);
+  return h(parentGfx, element, attrs);
 };
 
-BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
+BpmnRenderer.prototype.drawConnection = function(parentGfx, element, attrs) {
   var type = element.type;
   var h = this.handlers[type];
 
   /* jshint -W040 */
-  return h(parentGfx, element);
+  return h(parentGfx, element, attrs);
 };
 
 BpmnRenderer.prototype.getShapePath = function(element) {