News from the project

Colors are Here

Published by Nico Rehwaldt on Wednesday, 21 December 2016.


We are proud to announce the latest release of our BPMN modeler / toolkit. It brings support for colors in BPMN diagrams and adresses a number of small drawing and modeling issues.

Color Your Processes

Colors help you communicate certain aspects on your process models more effectively. With the latest bpmn-js release you can now use them for whatever you'd like to; to communicate ongoing work on the diagram (áka needs discussion) or to mark certain diagram elements as special (whatever that means in your organization).

Things got colorful.

Download an example diagram and play with in on our demo.

Built-in Color Support

Colors work in both modeler and viewer and get read from / persisted to the BPMN 2.0 XML. To set colors in the modeler, do that programatically:

var bpmnModeler = ...;
var modeling = bpmnModeler.get('modeling');

var elementsToColor = [ element1, element2 ];

modeling.setColor(elementsToColor, {
  stroke: 'green',
  fill: 'yellow'

Color Pickers?

We deliberately decided to not include any color picker. This is because the usage of colors (and the variety of colors to offer) is highly domain specific. Adding a color picker will probably not be complicated for you, too. How it could look like in your application? Check the following screenshot taken from the soon to be released Camunda Modeler:

Picking Colors in the Camunda Modeler.

What's Next?

We do not have anything concrete on our roadmap. Anything you are missing? Approach us on our forums and tell us what you think about the latest color additions.

As always, get the latest bpmn-js release via npm or bower.

Are you passionate about JavaScript, modeling and the web?
Join Camunda and build modeling tools people heart.