How to render custom connections as background

[Mateusz_Dudek]

Hello,

I would like to enhance the standard BPMN diagrams with additional graphical elements and recently I was was inspired with Signavio Process Execution path visualization (Attached as a screenshot). I would like to generate it based on a additional JSON/XML (Would like to avoid changing standard BPMN diagram atrivutes/structure). If I understood correctly I would need to create/modify custom render and model extension (), and that’s it, or did I missed something?
The thickness of the line should represent a ration of cases going through specific activities.

I’ve checked:

Custom connection rendering

Hello, I need to render a custom connection . I need three types of connection, a regular connection, a dashed connection and a connection with markers at both sydes of the connection. I am trying to figure out how to do this. Looking in the examples I found the globalConnect.toggle method but It doesn’t seems to work (With that I am not sure how to custimize the connection) I already implemented a custom renderer. I have also try to create the custom connections using elementFactory.createCo…

Render custom connections

Hi, referring to the custom-elements example, I have Extended the CustomContextPadProvider with a second Option to connect elements to each other. The first connection option should render a solid red connection and the second option should render a dashed blue connection line. However, in the CustomElementFactory.create function, the elementType-parameter is always ‘custom:connection’. But either there, I want to decide between ‘solid red’ and ‘dashed blue’, or in the CustomRenderer.drawCus…

Best Regards,
Mateusz Dudek

[philippfromme]

To render visuals like this you don’t need a custom renderer (since you don’t want to change how the shapes and connections are rendered) or a custom model (since you don’t want to add any custom data). In fact, it’s pretty simple.

You can create a custom SVG layer through canvas.getLayer("myLayer"); and add your custom visuals.

Here’s a very simple example: CodeSandbox