Skip to content

A simple color picker for your BPMN elements.

License

Notifications You must be signed in to change notification settings

bpmn-io/bpmn-js-color-picker

Repository files navigation

bpmn-js Color Picker

CI

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:

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:

<link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css" />
<link rel="stylesheet" href="https://unpkg.com/bpmn-js-color-picker/colors/color-picker.css" />

Build Demo

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

npm start

Useful Resources