We have used BPMN in our Javascript (MERN) based project, and applied certain customizations in components and design. Now, when I opened the diagram page, I want that it should zoom in a little bit, and the position of the canvas should be at the start of the flow by default i.e. the portion of the start of the flow should be zoomed in for better visibility.

I tried using CSS, and canvas.viewBox() for this, but then my diagram vanished from the canvas. Can someone please assist?

static async renderDiagramCanvas(diagramXML) {
    const modeler = ModelerService.getModeler();
    await modeler.importXML(diagramXML);

    const canvas = modeler.get("canvas");
    canvas.zoom("fit-viewport", "auto");
    canvas.zoom(0.6);
  }

Current Scenario:

For example: We have a diagram similar to below image:

Sometimes due to complexity of the flow, much zoomed out image gives issue, so we want that following part of the flow should be zoomed in on canvas by default:

(Intended)

So the area with start event should be zoomed in by default.

But currently a central part of flow is zoomed in:

(Not intended)