Problems with custom connection

Hi to all,

I am trying to extend the base model of bpmn io with custom elements, but I have problems to define a custom connection. Specifically I am trying to add a connection whose shape is a line with a red cross, like this:


I have tried to add the red cross in my custom renderer with two different approaches. The first one as a marker with static coordinates in svg format in the attributes of createLine (function from diagram-js) in my custom render:

The code of my connection from my custom render is:

‘custom:negatedAssignment’: (p, element) => {

  var attrs = {

    strokeLinejoin: 'round',

    markerEnd: marker('negated', 'white', element.color),

    stroke: element.color || BLACK,

    strokeWidth: 1.5,


  return svgAppend(p, createLine(element.waypoints, attrs));


Where marker function is:

function marker(type, fill, stroke) {

var id = type + '-' + colorEscape(fill) + '-' + colorEscape(stroke) + '-' + rendererId;

if (!markers[id]) {

  createMarker(id, type, fill, stroke);


return 'url(#' + id + ')';


and createMarker function is:

function createMarker(id, type, fill, stroke) {

  if(type === "negated"){

  var dobleFlecha=svgCreate('path');

  var zero=parseInt('0');

  var ten=parseInt('10');

  var dpath='M '+zero+' '+zero+' L '+ten+' '+ten+' M '+ten+' '+zero+' L '+zero+' '+ ten


  addMarker(id, {

    element: dobleFlecha,

    attrs: {

      stroke: 'red'


    ref: {x:90 , y:5},

    scale: 1.0



With this code I can generate partly that connection, because if I move part of the line, the red cross will be out of the line, since his position is static:

I have tried to update the coordinates in the variable ‘dpath’ from createMarker but it does not work. Is this a good approach?, How could I update the marker position?.

Secondly I have tried to draw my connection replacing createLine with a custom function which bases on createLine. With this function I tried to create another line to cross out a line but it generated them together:

function drawCrossedLine(points,attrs){

var line = svgCreate('polyline');

var result=toSVGPoints(points)

result +=(parseInt(points[0].x)).toString()+ ',' + (parseInt(points[0].y)-30).toString()+ ','+(parseInt(points[0].x+50)).toString()+ ',' + (parseInt(points[0].y+30)).toString();

svgAttr(line, {points: result });

if (attrs) {

  svgAttr(line, attrs);


return line


Is this approach better?,How could I draw three lines separately with some relationship between them to create my negated connection?.

Thanks in advance for your work and your attention.

Let’s take a step back and think about what you’re trying to achieve through customization. Can you explain that? What’s the person supposed to represent and why does it need to be an element of the actual diagram?

I am doing this customization to add the possibility of connecting bpmn to human resources (roles,persons…etc). This notation is the result of a research work ( Could you please give any hint to solve this problem?.

What does your extension look like?