More CSS classes

BPMN & Modeling Discussion & Questions
1

Could you please add more CSS classes to the diagram elements?

We have a corporate style guide that defines colors for various BPMN elements (i.e. start events with green background and end events with red background). de gustibus non est disputandum

It would be super easy to write a style plugin as described here: https://github.com/camunda/camunda-modeler-plugins/tree/master/style-plugin-example
However, the diagram elements do not have CSS classes but contain only a style attribute: <circle cx="18" cy="18" r="18" style="stroke: black; stroke-width: 2px; fill: white; fill-opacity: 0.95;"></circle>

1 Like
2

Hi @jze

with the style plugin example it is possible to give each element a specific color.

I made this process in the modeler with the plugin:

exampleCSS
exampleCSS1016Ă—330 4.78 KB

Here is how you do it:

  • download the folder for the style plugin example there → plugins

  • copy the folder “style-plugin-example” into the plugins-folder of your Camunda Modeler

  • in the folder {CamundaModelerHome}/plugins/style-plugin-example/style open the file style.css

  • add the following to this file:

    /* start-event */
    g[data-element-id *= “Start”] > g > circle {
    stroke: #63A717 !important;
    fill: #EBFFB2 !important;
    }

    /* intermediate-event */
    g[data-element-id *= “Intermediate”] > g > circle {
    stroke: #99944E !important;
    fill: #FEFCF4 !important;
    }

    /* end-event */
    g[data-element-id *= “End”] > g > circle {
    stroke: #990000 !important;
    fill: #F3C6C6 !important;
    }

    /* activity */
    g[data-element-id *= “Task”] > g > rect {
    stroke: #2379A3 !important;
    fill: #EDF0FF !important;
    }

    /* gateway */
    .djs-visual > polygon {
    stroke: #A8A821 !important;
    fill: #FFFFDD !important;
    }

This will set the colors of your elements like in the example picture.

Note that there is one downside of this approach: the color is applied only if the id of the elements starts with a specific prefix. So make sure, that every id of every Start-Event starts with “Start” (e.g.: StartEvent117) and so on…

Hope that helps.

Regards
Michael

3 Likes
3

Thank you very much. I would not have gotten the idea with the data-element-id attributes.

For a permanent and stable solution CSS classes would still be a good idea.

4

Coloring elements using CSS and coloring them using the API (Modeling#setColor) are two different approaches. The latter makes sure that the colors are preserved and exported.

Do you want to have the colors applied by default without being able to change them or is it only about being able to choose the exact color you need?

5

We want to apply the colors by default. All BPMN diagrams should automatically follow the same corporate design. Therefore, the CSS solution seems sufficient for me. When I export the diagram from Camunda Modeler the diagram elements have the correct color.

1 Like
6

What do you mean by correct color? When you export a diagram all elements are black?

7

hello every one, please can you help me cause it doens’t work for me.
i added the folder correctly add modify style.css