README.md

Fit BPMN Diagram on load

Javascript example to demonstrate how can fit the BPMN diagram on load.

• ⏩ live environment
• to run locally, open the index.html directly in a Web Browser

♻️ Usage

⚠️ In order to avoid having to many content in the README, we simplify it. You can find all the content of the example in index.js.

1. Declare the BPMN container with a fixed width & a fixed height.

.bpmn-container {
    /* use absolute values for height to ensure that the vertical diagram is not fully displayed when the page is opened. */
    width: 100%;
    height: 600px;
    border-style: solid;
    border-color: #B0B0B0;
    border-width: 1px;
    /* This ensures that the parts of the diagram outside of the container are not displayed. */
    overflow: hidden;
}

2. Load BPMN content.

const bpmnContainerElt = window.document.getElementById('bpmn-container');
const bpmnVisualization = new bpmnvisu.BpmnVisualization({ container: bpmnContainerElt });

const bpmnContent = ``; // your BPMN 2.0 XML content
bpmnVisualization.load(bpmnContent, { fit: {type: bpmnvisu.FitType.Center, margin: 10} });

ℹ️ type and margin are optional. Moreover, margin is only considered when FitType is not None.