Resizing a diagram using bpmnViewer

Developers
1

I am using bpmnViewer with the container width set to 100% and the height set to 700px. Is it possible to automatically resize the viewer so that the BPMN diagram can take whatever dimensions it needs to display properly, instead of being constrained by a fixed height?

For example, in React I’m using a component like this:

import React, { useEffect, useRef } from 'react';
import BpmnViewer from 'bpmn-js';

const BpmnDiagram = ({ xml }) => {
  const containerRef = useRef(null);
  const viewerRef = useRef(null);

  useEffect(() => {
    if (!viewerRef.current) {
      viewerRef.current = new BpmnViewer({
        container: containerRef.current,
        width: '100%',
        height: '700px'
      });
    }

    if (xml) {
      viewerRef.current.importXML(xml).catch(err => {
        console.error('Failed to load diagram', err);
      });
    }
  }, [xml]);

  return <div ref={containerRef} style={{ width: '100%', height: '700px' }} />;
};

export default BpmnDiagram;
2

Do you look to resize the BPMN diagram so it fits exactly into the available space?

You can accomplish that by zooming the diagram to fit the available viewport, copied from our starter example:

// zoom to fit full viewport
viewer.get('canvas').zoom('fit-viewport');
3

I also tried using canvas.zoom(‘fit-viewport’), but it doesn’t control the container height. If the viewer container does not have an explicit height, it collapses, and fit-viewport simply scales the diagram into that small area. For example: Without setting a height, the diagram technically fits, but the rendered height is very small. If I give the container a fixed height (e.g. 300px), the diagram is rendered correctly and fit-viewport works as expected. I’ve attached images showing: the diagram without a fixed height the same diagram with a fixed 300px height

Diagram: diagram
Diagram without fixed height: without fixed height

Diagram with fixed 300px height: with fixed 300px height

4

fit-viewport only adjusts the zoom, so it still needs a container with a defined size to work with. If the goal is for the container itself to follow the diagram dimensions, you could get the diagram bounds after importXML() and use those values to calculate and set the container height dynamically, then call fit-viewport.

That would avoid hard-coding something like 300px or 700px, while still giving the viewer a real viewport to render into.