How to center the BPMN graph in the viewer？

Users
10

Hi,

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);
}
2 Likes