Making BPMN diagram responsive and centered within the container

Hello bpmn-js community,

I have a use case where I need to make the BPMN diagram displayed in my application responsive to the container size. I would appreciate some guidance on the following aspects:

Making the diagram adapt to the container size:
I’m already able to obtain the real-time size of the container, but I’m unsure about the best approach to make the diagram adjust its size accordingly. I want the diagram to dynamically resize as the container dimensions change.

Centering the diagram within the container:
Another requirement I have is to ensure that the BPMN diagram is always rendered in the center of the container, regardless of its size. I’m looking for recommendations or code examples on how to achieve this, considering scenarios such as the initial rendering, resizing of the container, and zooming operations.

I would appreciate any insights or suggestions on how to tackle these challenges and make the BPMN diagram responsive and centered within the container.

Thank you in advance for your help!

Hi, I created a codesandbox which solves the problem of “center viewport around all of the elements and adjust zoom”. Check out the link in How to center the BPMN graph in the viewer? - #10 by barmac

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.