We are proud to announce the latest version of bpmn-js. This release is packed with features that will make every perfectionist layouter out there burst with joy. These include alignment and distribution helpers, better handling of message flows and a smart layouting of connection labels. Along with these changes, the release brings a more robust import of BPMN 2.0 connection DI as well as minor improvements and bug fixes.
Alignment and Distribution Helpers
One of the bigger features in this milestone is the ability to align and distribute a selection of elements. These help out a lot in creating a clean and organized BPMN model.
The align helpers help you to align elements to the left, right, center, top, bottom and middle, while with the distribution helpers, you can distribute evenly a selection elements according to the horizontal or vertical axis.
Invoke the distribution and alignment programatically from an UI control:
var shapes = [ shape1, shape2 ];
var distributeElements = bpmnModeler.get('distributeElements'),
alignElements = bpmnModeler.get('alignElements');
distributeElements.trigger(shapes, 'horizontal');
alignElements.trigger(shapes, 'middle');Better Message Flow Layouting
With this release we did huge improvements in the way message flows between activities and external participants are handled. Now, docking on tasks will usually layout the message flows straight. You can follow a discussion about it here and provide further feedback on the topic.
Connection Label Layouting
Starting with this release labels adjust their position once the related sequence and message flow changes.
Better Handling of Flow Dockings on Import
Due to the nature of the BPMN 2.0 XML (invisible) flow dockings cannot properly be represented in BPMN DI. For bpmn-js that has lead to a number of quirks when working with reimported, previously saved BPMN 2.0 diagrams.
This bpmn-js release introduces measures that adress these shortcommings. The BPMN modeler now correctly computes a flows source and target docking. As soon as the users changes broken parts of the diagram, flows get repaired visually, too:
Wrap Up
Give us your feedback on this release via our forums. Make sure to follow us on Mastodon to stay up to date, too.
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 
.