Skip to content

[FEAT] support custom image rendering  #2730

@Andrii-Deiak

Description

@Andrii-Deiak

Is your feature request related to a problem? Please describe.
Render custom images inside of the BPMN models. I have cases where need to show custom images at any position and with possible connections:

image

Describe the solution you'd like

  1. If in the BPMN model xml presented custom image => display image.
  2. Display different type of images svg, png, jpg..

I am keeping the image in textAnnotation as base64 encoded string:

<bpmn:textAnnotation id="TextAnnotation_0gqg2sp">
            <bpmn:extensionElements>
                <x:attribute name="dataObjectType" value="IT-System"/>
                <x:attribute name="image"
                               value="{thumbnail=PD94bWwgdmVyc..."/>
            </bpmn:extensionElements>
        </bpmn:textAnnotation>

image

So I would expect if this attribute is presented in xml code, so bpmn-visualization lib can display the image.

Describe alternatives you've considered

I was inspired how bpmn-js handle rendering custom images:
https://github.com/bpmn-io/bpmn-js-example-custom-rendering

image

Maybe we can apply the same/similar approach in bpmn-visualization lib?

Additional context
Example xml file with image:

FEAT.support.custom.image.rendering-example.txt

### Tasks

Metadata

Metadata

Assignees

No one assigned

    Labels

    BPMN renderingSomething about the way the lib is rendering BPMN elementsBPMN supportSomething about the BPMN specification that the lib is already supporting or will supportenhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions