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