README.md

Apply css to BPMN elements

Javascript example to demonstrate how to apply CSS classes to elements of the BPMN Diagram.

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

♻️ Usage

ℹ️ Apply css classes after retrieving the HTMLElement with the bpmn-visualization API.

// add css classes
bpmnVisualization.bpmnElementsRegistry.addCssClasses('prepareBankTransfer', 'bpmn-activity-in-progress');
// remove css classes
bpmnVisualization.bpmnElementsRegistry.removeCssClasses(['reviewSuccessful_gw', 'invoice_approved'], ['bpmn-gateway-warning', 'bpmn-activity-info']);
// toggle css classes
bpmnVisualization.bpmnElementsRegistry.toggleCssClasses('prepareBankTransfer', 'bpmn-activity-in-progress');

⚠️ Highlighting path currently requires to identify all elements by their ids: bpmn-visualization will provide some API to simplify this in the future, see the issue #930 in the repository of bpmn-visualization.