Styling Flow in the bpmn models

Developers General
1

I am embedded the bpmn-js for my website in the react application, however, I a trying to achieve the styling of the flows and user tasks in the BPMN diagram. but I m unable to style the flows using canvas.addMarker. Can someone suggest how to use it?

Example: <bpmn:outgoing>Flow_1ajyshy</bpmn:outgoing>
this is the flow I want to color.

Note: Not all the flow I want to color it’s just a few conditions input it should style.

2

Hi @Sagar_Jain ,

could you please explain in more detail what you exactly want to do when you talk about “styling”?

There are multiple approaches, depending on what you want:

  • For general coloring, you can follow along the options showcased in the coloring example
  • If you want to change the entire apperance of elements, you would need to look into the custom rendering example

Regards
Max

3

Hi @maxtru thanks for the reply, I wanted to style the flow in the diagram like this:

dia

But thanks I figured out the solution by myself with the same approach defined in the docs for the coloring of the user task via marker and modified it for my needs.

.highlight-flow:matches(.djs-connection) .djs-outline {
    stroke: lime !important;
    stroke-width: 4px;
  }