How to center the BPMN graph in the viewer?

Hello, there are some problems with my BPMN after using the following methods.


In this way, the BPMN diagram can indeed be rendered entirely in the container.
But the BPMN is too far to the left. How can we make the BPMN diagram in the container center left and right?

I haven’t found a way for a long time. I really need help. Thank you very much.


We created a codesandbox which contains a solution. Check it out at center-and-fitviewport - CodeSandbox

How far is too far? Screenshots would help a lot.

It’s not a matter of how far.What matters is how I can center the BPMN diagram.I mean the left-right one.t’s not like this:
Thank you for your reply。

this.modeler.get(‘canvas’).zoom(‘fit-viewport’, ‘auto’);



1 Like

node_module/diagram-js/lib/core/Canvas.js 860 lines

Thank you very much. I solved it.

How did you solve it? The solution above is not working for me.
In the picture you see that the viewport is “matrix(1 0 0 1 0 0)”, but it should be “matrix(1,0,0,1,51,-51)”.


Please do not necrobump old topics. Instead link to this thread from new topic


as this thread gets multiple visitors and it seems no right answer has been provided, I created a codesandbox with a robust solution to the problem. This uses canvas.viewbox and canvas.zoom APIs:

 * Center and fit viewbox around diagram.
 * @param { import('bpmn-js/lib/Modeler') } modeler
function centerAndFitViewport(modeler) {
  const canvas = modeler.get("canvas");

  const { inner } = canvas.viewbox();

  const center = {
    x: inner.x + inner.width / 2,
    y: inner.y + inner.height / 2

  canvas.zoom("fit-viewport", center);

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