Styling BPMN elements (background color)?

Users
1

I used Camunda Modeler to generate a diagram, which I then display in a webpage via bpmn-js-seed, which seems to work fine.

My question is - how can I, if it is possible, style BPMN elements with a custom background color? For instance, say I have this in my code:

<bpmn:subProcess id="SubProcess_0zj28wh" name="hello">
  <bpmn:incoming>SequenceFlow_104iphm</bpmn:incoming>
</bpmn:subProcess>

How could I make the subProcess rectangle to be, say, orange?

I’ve noticed that the bpmn-js converts this code to SVG inline in the webpage:

<g class="djs-visual">
  <rect fill="#ffffff" stroke="#000000" style="stroke-width: 2;" ry="10" rx="10" height="120" width="239" y="0" x="0"></rect>
  <text class=" djs-label" style="font-family: Arial,sans-serif; font-size: 12px;">
    <tspan y="19" x="106">hello</tspan>
  </text>
</g>

… so the rect has a fill, but then the rect has no id or class, so I could target it via CSS (and nowhere else in this code is there a mention of bpmn:subProcess or SubProcess_0zj28wh)

I looked a bit at yaoqiang-bpmn-editor, which does support background colors of BPMN elements, and it uses something like this:

<startEvent id="_2" isInterrupting="true" name="Start Event" parallelMultiple="false">
  <extensionElements>
    <yaoqiang:style fillColor="#3333FF"/>
  </extensionElements>
  <outputSet/>
</startEvent>

… so it uses an extension to specify the background color, which is then ignored by both Camunda Modeler and bpmn-js.

So can I - and how - style background colors, so they are visible in both Camunda Modeler and bpmn-js?

2

I am also looking for how to color certain elements. I want to color the execution path of the flow in green while rendering, didn’t found anything in the examples. Wanted to know if it can be done and supported in bpmn-js.

Edit – Found this on searching (https://github.com/bpmn-io/bpmn-js-examples/commit/e437b40d76d9cda00211a8373331e8297b5ee3ee) and this issue
https://github.com/bpmn-io/bpmn-js-examples/issues/7

1 Like
3

Hi,

you can find an example how to add colors to BPMN diagrams here:

1 Like
4

Thanks all, the answers were very helpful; so in brief - there is no “direct” coloring via CSS, one has to use either overlays or markers with JS… Cheers!

5

as i see example is for BPMN Viewer. Would this example work for BPMN Modeler also?