Camunda Modeler

We’re pleased to announce the release of Camunda Modeler 5.0.0-alpha.0, the business process editor for both Camunda products, Platform and Cloud. Contrary to our usual approach, this post is about the alpha version of our next major release. We want to share the updates, let you explore the redesigned user interface and new features, and learn from your feedback.

Download the Modeler 5.0.0-alpha release and try it out now!

If you’re a developer of a Camunda Modeler plugin, find more information about its exciting new possibilities in the blog post on How to Migrate Your Camunda Modeler Plugins to Work with Camunda Modeler 5.0. This blog post also outlines how you can adapt your plugin to the new user interface (UI) architecture to benefit from the new Modeler and properties panel architectures.

The Vision of a “Visual IDE” for BPMN, DMN, and Forms

We uphold our principle of creating and improving a great business process editor experience for professional developers as our core audience. Our approach is to provide an application that is familiar to developers, but also understandable to other groups of users. 

One of our user test participants said it was “like VSCode for BPMN,” which is indeed our aim. This tool creates and implements processes using the visual languages BPMN and DMN, and a form builder to quickly create forms for user tasks, in an IDE-like kind. We call this vision Visual IDE.

As a tool, we don’t want your attention. We’d prefer you to concentrate on your tasks, not on the application. In the following sections, you’ll learn more about what we’re doing to achieve this goal.

The New Properties Panel

The properties panel is a central UI element for implementing process automation projects. Thanks to our committed users, we’ve learned a lot from their feedback on how to improve it. Therefore, the BPMN properties panel has been completely redesigned.

Properties Panel

With the new properties panel design and structure, improvements include the following and more:

  • A new informative panel header shows the symbol of the selected diagram element, its name, and its label.
  • The tabs were replaced by sections that can be opened and closed individually, so you’re able to create your preferred view on required properties.
  • A granular breakdown of the properties with clear titles helps identify relevant topics at a glance.
  • Data markers (dots and counters) in the section headers make it easy to see where properties have been added or changed.
  • Properties such as input/output variables, listeners, and extensions are displayed as scalable lists, which makes it possible to read them side by side. Moreover, a nested tree view is used to show relationships between the data, for example when Validations have been defined for a Form Field.

This new infrastructure also allows us to provide further improvements quickly, based on your feedback.

The Status Bar

An important part of our goal is to create a familiar and efficient environment for developers by adding the new status bar. We started to introduce it in Modeler 4.11 and continuously extended its purpose of providing key information and fast interactions.

Status Bar

The left side of the status bar is related to the active editor tab. Since the desktop version of Modeler can create and edit diagrams for both Camunda products, Platform and Cloud, a basic setting in this area is the information for which product the diagram has been created. A specific engine version can be set on top. 

Based on the selected automation product and version, we display process debugging results in this area. As a first step, we check the compatibility of the BPMN diagrams and form elements against the select product version. With this debugging feature, you can now validate your diagram or form it even before you deploy it to the engine.

When defining and debugging a process, you may want to quickly try and retry your implementation. Therefore, deployment and start process instance actions are available here too. By replacing the previous modal dialogues with overlays, we ensure a quick and direct interaction.

The right side of the status bar displays global information such as the Modeler version, the log view, and the feedback button.

The New Bottom Panel for Global Process Information

As a user, you continuously interact with the properties panel on the right side of the editor to define implementation properties for selected diagram elements. What was missing in the past was a way to display and interact with global information and data.

Bottom Panel

For this purpose, we are introducing a new panel at the bottom. You will now find global information and data there. The first feature which uses this view is our debugging function. This new and exciting modeling and implementation guidance helps you identify and solve implementation problems, even before a diagram or form is deployed to the engine.

We have lots of ideas about what data this new panel could show, and we‘d love to hear about your needs and ideas for global process information and data.

The Tab Bar

To improve the handling and scalability, we have redesigned the tab bar. 

tab bar

The new tab bar is responsive and keeps all editor tabs within your view, even if many tabs are opened. To improve the work with many open tabs, we added a context menu in which all open editors are displayed and can be selected.

We have also brought back an extended version of the Plus button in the tab bar. While in the past only a Platform BPMN file could be created, now you can create the entity you need, including DMN and Form. For keyboard lovers, it’s accessible via keyboard, too. Simply use the shortcut CMD+N to open it and select an entry via the keyboard.

Last but not least, we have integrated icons for our various file types into the tabs, which help to identify the different editors when working with BPMN, DMN, and Forms.

Toolbar Removal and New Plugin Endpoints

Part of our effort to maintain a lean and focused editor is that we’ve removed the toolbar to clean up the application header and make more room for diagrams and their data. Most of the actions in the toolbar were simply redundant and could also be accessed via familiar shortcuts (CMD+O for open, CMD+S for save, etc.) or the application menu.

If you’ve developed or are maintaining a Modeler plugin that uses the toolbar endpoint, read our blog on How to Migrate your Camunda Modeler Plugins to Work with Modeler 5.0. Spoiler alert: We have new exciting endpoints where you can place your custom UI control – the status bar and the tab bar.

There’s More

process definition deployment notification

This release ships with several additional noteworthy changes. The highlights include:

  • Redesigned notifications with better visibility and additional information.
  • A redesigned welcome page as a starting point to create entities for both product stacks, Camunda Platform and Camunda Cloud.
  • The general style and usability improvements such as a new font with an increased basis font size.
  • Bug fixes and many improvements under the hood.

Read the changelog to learn about all the features, bug fixes, and improvements that made it into this release.

Your Feedback is Welcome

Download the new Modeler, give it a try, and most importantly, share your feedback.

Did we miss anything? Did you spot a bug, or would you like to suggest an improvement? Reach out to us via our Platform or Cloud forums, tweet us, or file issues you found in the Camunda Modeler issue tracker.

Stay tuned for the stable release in April 2022!