News from the project

Create/Append Anything Tools and Reworked BPMN Rendering Ship with bpmn-js

Published by Nico Rehwaldt on Friday, 10 February 2023.

bpmn-js11.3.0 bpmn-js12.0.0

We are happy to announce bpmn-js@11.3. The new release improves BPMN rendering significantly, making it easier to understand and work with larger BPMN diagrams. The release also incorporates new create/append anything tools into the BPMN editor. These give you access to any BPMN element everywhere.

How we render BPMN significantly impacts diagram understanding: When viewing diagrams from different zoom levels, users must still be able to distinguish various BPMN constructs. Even in the most crowded BPMN diagrams, you must be able to follow the flow and make sense of what is happening. Finally, elements of similar importance must have a similar UI presence, or you may overlook one.

This release accounts for these aspects and reworks BPMN rendering significantly:

Old vs. new rendering BPMN rendering

Enjoy reworked BPMN rendering, aka find the 20 differences.

Try it on

Improved Rendering

The release makes significant (albeit not necessarily noticeable) changes to BPMN element rendering:

  • Reworked BPMN elements to be more clearly distinguishable, with an equal visual presence.
  • Smooth rendering makes looking at a BPMN model less exhausting.
  • Round connection corners help trace the BPMN flow with less ambiguity.

Whether or not you notice these changes, these will contribute to a more pleasant and effective way of working with our tool.

BPMN diagram with round connection corners

Follow flows more easily with rounded corners.

Create/Append Anything

Heads up! Following further user feedback bpmn-js@12 extracts these tools into a separate library.

Following our reworked replace menu and to no surprise for users of our demo this release adds create and append anything tools to the core editor. Through palette and context pad, both tools give you access to any BPMN element, no matter where you are on the diagram:

BPMN diagram with round connection corners

Model specific BPMN elements, no upgrade required.

The tools are fully keyboard accessible. Trigger them via the n (create) and a (append) shortcuts.

With create/append available in our core, we are sunsetting the extension that accomplishes the same thing.

Wrapping up

As users of our demo may have noticed, the reworked popup menu is only the first step on our journey to incorporate create/append anything into our core. Stay tuned for future exciting updates in core modeling.

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 any issue you found in the respective issue trackers for bpmn-js or diagram-js.

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