Note: This example exists for educational purposes only.

Consider using our built-in color support to display colors saved in your BPMN 2.0 diagrams.

This example show cases how to extend bpmn-js with colors based on the BPMN in Color proposal.

• Recognize and display BPMN in Color meta-data
• Change color of elements via context pad

Fetch bpmn-js-in-color as a dependency:

npm install bpmn-io/bpmn-js-in-color --save

Extend your BPMN modeler with colors:

var BpmnModeler = require('bpmn-js/lib/Modeler');

var modeler = new BpmnModeler({
  additionalModules: [
    require('bpmn-js-in-color')
  ]
});

Add diagram-js, bpmn-font and color picker stylesheets:

<link rel="stylesheet" href="vendor/diagram-js.css" />
<link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
<link rel="stylesheet" href="vendor/colors/color-picker.css" />

To run the live demo (as shown in the screenshot above) execute:

npm run dev

• Introduction to bpmn-js
• BPMN in Color proposal