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 using a vendor extension. 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'
});Starting with bpmn-js@8.7 the toolkit persists colors according to the BPMN in color specification.
Color Pickers?
We deliberately decided to not include any color picker in the core. 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 Camunda Modeler:
Picking Colors in the Camunda Modeler.
Check out the bpmn-js-color-picker extension for a simple color picker integrated into an element's context pad.
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 
.