News from the project

Better Modeling Experience and BPMN Group Support

Published by Maciej Barelkowski on Thursday, 04 July 2019.

bpmn-js4.0.0 diagram-js4.0.0

Today, we are happy to announce the latest release of our BPMN modeling toolkit. It ships several improvements that make modeling smoother and more predictable, with connection previews and grid snapping among them, as well as adds long-awaited support for modeling BPMN Group elements.

One of the key factors that influence the modeling experience is the tool's predictability. The feature that aims to improve this is the connection preview. With this release, you will see a laid out connection of the correct type before you even click to confirm the action.

Connection preview is displayed before the actual action

Full connection preview allows to predict the action.

Grid Snapping Everywhere

Another improvement that greatly enhances the modeling experience is grid snapping. It is now much easier to create clean, readable diagrams, as all elements and connections are aligned to a grid.

Task is moved and aligned to a grid

Grid snapping makes it easier to create clean diagrams.

Attachable and Detachable Events

From now on, it is much easier to create a boundary event. Simply drag an existing intermediate event and drop it on activity's bounds to attach it as a boundary event.

Attaching Intermediate Event as boundary event

Simple way to create a boundary event.

You can also detach a boundary event and thus turn it into an intermediate event.

Group Support

Last but not least, in the current release, we also prepared a feature that allows to easily group elements. So far, you could use extensions like colors to mark related flow nodes on the diagram. From now on, you can do this with the group, which is a valid BPMN 2.0 element.

BPMN Group element

BPMN 2.0 way to mark related flow elements.

Looking Forward To Feedback

Read through the full changelog to learn about all issues that were addressed with bpmn-js@4 as well as breaking changes that may require your action during the upgrade.

Did we miss anything? Did you spot a bug or would you like to suggest an improvement? Reach out to us via our forums, toot us on Mastodon or file an issue you found in the bpmn-js issue tracker.

Get the latest BPMN toolkit pre-packaged or as source code via npm or unpkg.

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