Adds bpmn-in-color support to bpmn-js
JavaScript CSS HTML
Pull request Compare This branch is 5 commits ahead of vkatushenok:master.
Latest commit 66dfe08 Sep 16, 2016 @nikku nikku docs(project): document usage
Failed to load latest commit information.
app chore(project): separate app and library Sep 16, 2016
colors chore(project): separate app and library Sep 16, 2016
resources chore(project): add screenshot Sep 16, 2016
.eslintrc chore(app): basic modeler setup Aug 12, 2016
.gitignore feat(app): base implementation Sep 13, 2016
Gruntfile.js docs(project): document usage Sep 16, 2016

bpmn-js in color

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

bpmn-js in color


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

Use Extension

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: [

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" />

Build Demo

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

npm run dev

Useful Resources