[FEAT] Add fill and stroke attributes in xml to draw colors per bpmn element

[Andrii-Deiak]

Is your feature request related to a problem? Please describe.

XML file is parsed without consideration of stroke/fill attributes for elements.
The goal to have for example two circles with different colors defined in the xml file to be rendered with different colors.

Describe the solution you'd like

Allow in xml attributes:
bioc:stroke="#000000" bioc:fill="#ffd726"
So they can be parsed and drawn on UI.

[tbouffard]

Hi @Andrii-Deiak

The bioc:stroke="#000000" bioc:fill="#ffd726" attributes seem to use the bpmn.io specific BPMN extensions for handling colors.
Can you confirm this please, by providing an example of BPMN diagram? We mainly need to have the namespace declarations at the top of the file, and a file to reproduce what you describe. Fill free to provide an anonymized file and attach it to a comment in this issue.

We have no plan to support the bpmn.io color extension. We may support the BPMN in Color Specification in the future, but we do not plan to do so in the short term.

However, bpmn-visualization already provides several ways to add colors to a BPMN diagram. You can use CSS classes and/or use the new "Update Style" API starting from v0.33.0. They let you customize the colors at runtime, and change the colors depending on the use case, without having to hard code them at modeling time.

If you need some pointers to get some examples about how to add colors, please let us know.

[Andrii-Deiak]

HI @tbouffard , thank you for the response! The goal is to have some predefined colors in the xml file per each bpmn element and then render it with colors. It that possible to achieve?

Attaching the example of bpmn with colors:

bpmn-with-colors.txt

If I upload this bpmn example to https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/misc/compare-with-kie-editors-standalone/index.html the result is without colors:

Note: in the bpmn example we use bioc:fill="#da1217" bioc:stroke="#8abff7", but it does not render these colors.

This is what we expect to be rendered (predefined colors in xml and render with those colors):

Thanks!

[tbouffard]

Hi @Andrii-Deiak and thanks for providing the BPMN file.

Reproduction

I have been able to reproduce what you mentioned with https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.33.0/examples/misc/compare-with-bpmn-js/index.html. This is the example that let us compare the BPMN rendering of bpmn-visualization and bpmn-js.

Here is the comparison between bpmn-visualization@0.33.0 and bpmn-js@11.1.1 👇🏿

Diagram analysis

The BPMN diagram content confirms what I suggested in #2588 (comment). It uses both

• bpmn.io specific BPMN extensions for handling colors: xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0"
• BPMN in Color Specification: xmlns:color="http://www.omg.org/spec/BPMN/non-normative/color/1.0"

The diagram uses a mixture of the two types of color definitions. For example:

• Line 470: bioc attributes only

<bpmndi:BPMNShape bioc:fill="#25AF65" bioc:stroke="#000000" bpmnElement="StartEvent_1"
                                    id="_BPMNShape_StartEvent_2">

• Line 494: bioc attributes and color:border-color

<bpmndi:BPMNShape bioc:fill="#ffffff" bioc:stroke="#25af65" bpmnElement="Activity_1xbvij8"
                                     color:border-color="#25af65" id="Activity_06ciygt_di">

• Line 582: bioc attributes and color:background-color

<bpmndi:BPMNShape bioc:fill="#a8e1e1" bioc:stroke="#000000" bpmnElement="Event_1wb4fqt"
                                    color:background-color="#a8e1e1" id="Event_1wb4fqt_di">

Questions

Like I said in #2588 (comment), we don't support the colors defined in the BPMN diagram, and don't plan to support that in the short term.
However, we may change our plan based on user feedback.

So, could you help us by answering these questions:

• the XML content of your BPMN diagram declares targetNamespace="http://bpmn.io/schema/bpmn". Did you edit/model the diagram with bpmn-js, demo.bpmn.io or a tool using bpmn-js like the Camunda Modeler?
  • This would explain why it contains a mixture of the two types of color definitions
  • This is pretty uncommon (except in bpmn-js related tools) to have the same color information provided twice. In such case, we would need to give priority to one of the 2 colors attributes. We will probably prioritize "BPMN in Color Specification" over "bpmn.io custom color" if we decide to support both color flavors because the first is intended to be the norm in the future, whereas the later is an initiative only sponsored by bpmn.io. What do you think?
  • I need to understand the use case you want to cover with the color defined in the BPMN diagram. This will help us to decide how we prioritize your request.
• We may provide support for colors in an experimental lib, plugin or extension. Will you be ready to test it as an early adopter?

Thanks

[tbouffard]

@Andrii-Deiak I have recently opened a Pull Request to support what is described in this issue: #2614.

You can open your diagram with (this environment will be available as far as the PR is opened) https://process-analytics-bpmn-visualization-js-demo_preview-pr-2614.surge.sh/dev/public/.

Here is what I get when I display a diagram based on the one you provided.

[Andrii-Deiak]

@tbouffard thank you for quick response. I imported xml with colors to this environment https://process-analytics-bpmn-visualization-js-demo_preview-pr-2614.surge.sh/dev/public/. Works fine! Looking forward to see these changes in main branch ❤️

[tbouffard]

@Andrii-Deiak thanks for the feedback.
We will try to make it available in the next version (or the next one). There are some remaining tasks, in particular to make the support configurable (it will be disable by default).