bpmn-js Color Picker


This bpmn-js extension adds a simple color picker to an elements context pad. Colors are serialized to BPMN 2.0 according to the BPMN in Color proposal.

!bpmn-js color picker in action

Features

* Add color picker to the context pad
* Color single and multiple elements
* Serialize colors to BPMN 2.0
* Render colors (built-in bpmn-js@8.7+)

Use Extension

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

``
npm install bpmn-js-color-picker --save
`

Extend your BPMN modeler with colors:

`javascript
import BpmnModeler from 'bpmn-js/lib/Modeler';

import BpmnColorPickerModule from 'bpmn-js-color-picker';

const modeler = new BpmnModeler({
additionalModules: [
BpmnColorPickerModule
]
});
`

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

`html



`

Build Demo

To run the live demo in the ./example directory (as shown in the screenshot above) execute:

`
npm start
``

Useful Resources

* Introduction to bpmn-js
* Colors are here