BPMN diagram color

[fnadezhda]

Hello, people !
I’m trying to include the BpmnJS in my Angular application and I want to color the flow in green like this (which is .gif) :

I generate the xml file by using flowable java library and autolayout. Is there any way to do this without touch the xml ?
Thank you.

[philippfromme]

You can achieve this using a custom renderer: GitHub - bpmn-io/bpmn-js-example-custom-rendering: An example of creating custom rendering for bpmn-js

[fnadezhda]

Yes, but how to color the sequential flow, how to make ‘yes’-path green, how to fill the square and how to do all of this dinamiclly ?
Thanks in advance

[philippfromme]

So you want to render the sequence flow in a different color depending on one of its properties?

[fnadezhda]

yes, i want this things to happen dinamiclly

[philippfromme]

In your custom renderer you can look into the sequence flow’s name property to figure out what color to use:

const isGreen = sequenceFlow.businessObject.get('name') === 'yes';

[fnadezhda]

Thank you, but in which function (where) I can do that in bpmn-js-example-custom-rendering/CustomRenderer.js at master · bpmn-io/bpmn-js-example-custom-rendering · GitHub

[philippfromme]

I guess this is difficult to explain without an example so here’s one. Through canRender our custom renderer tells bpmn-js that is will render sequence flows. We then render the sequence flows using the original BPMN renderer and only change the color of the sequence flow based on its name. There are two approaches that I have sketched in the example:

1. Render the sequence flow using the original BPMN renderer and set the given color afterward. As you can see the arrowheads aren’t affected. The utility for rendering colored arrowheads (cf. https://github.com/bpmn-io/bpmn-js/blob/develop/lib/draw/BpmnRenderer.js#L141) isn’t exposed by bpmn-js so you’d have to copy the entire utility.

drawConnection(parentNode, element) {
  const { businessObject } = element;

  const connection = this.bpmnRenderer.drawConnection(parentNode, element);

  if (businessObject.get("name") === "yes") {
    svgAttr(connection, { stroke: "green" });
  } else if (businessObject.get("name") === "no") {
    svgAttr(connection, { stroke: "red" });
  }

  return connection;
}

2. Monkey-patch the DI to make the renderer render the sequence flow with a given color. This is an anti-pattern, but for the sake of showing that it can be done, I sketched it anyway. As you can see this will also render the arrowheads in the with the given color.

drawConnection(parentNode, element) {
    const { businessObject, di } = element;

    const stroke = di.get("color:border-color");

    if (businessObject.get("name") === "yes") {
      di.set("color:border-color", "green");
    } else if (businessObject.get("name") === "no") {
      di.set("color:border-color", "red");
    }

    const connection = this.bpmnRenderer.drawConnection(parentNode, element);

    // restore original color and hope no one noticed :clown_face:
    di.set("color:border-color", stroke);

    return connection;
  }
}

CodeSandbox: Custom Connection Color - CodeSandbox