Add and remove overlays on BPMN elements

Javascript example to demonstrate how to add default overlays and remove all overlays on BPMN elements.

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

♻️ Usage

First, create a BpmnVisualization instance (named bpmnVisualization) prior being able to add default overlays and remove all overlays to BPMN elements.

Add one default overlay

    const overlay = { position: 'top-left', label: '456' };
    bpmnVisualization.bpmnElementsRegistry.addOverlays('exclusive_gateway_id', overlay);

Add several default overlays

    const overlay1 = { position: 'top-left', label: '456' };
    const overlay2 = { position: 'bottom-center', label: '9' };
    bpmnVisualization.bpmnElementsRegistry.addOverlays('exclusive_gateway_id', [overlay1, overlay2]);

Remove all overlays

    bpmnVisualization.bpmnElementsRegistry.removeAllOverlays('exclusive_gateway_id');