Ben Shneiderman, a distinguished American computer scientist, once rightly noted that the purpose of visualization is insight, not pictures. But in web development, it can be challenging to achieve this purpose without using a special tool like our JavaScript diagramming library. This versatile tool enables you to easily integrate any kind of JavaScript diagram in your web application and conveniently modify it on the fly via live editors.

Recently, DHTMLX Diagram has made a significant big step forward in usability and functional diversity. Our development team updated it to version 4.0. This major release includes some highly anticipated features such as swimlanes, grouping diagram elements, inline editing, and many other improvements. In this article, we are going to delve deeper into the most interesting details of this major update.

Swimlanes

Check the sample

The concept of swimlanes is utilized to break down intricate tasks or processes into separate stages, thereby making it much easier to understand and analyze data. DHTMLX swimlanes are highly customizable, so you can create swimlane structures that comply with any requirements.

Grouping of diagram elements

Check the sample

Starting from version 4.0, it is possible to arrange various diagram elements in groups. This feature helps to generate elaborate charts comprising groups of shapes based on specific criteria. All the elements included in such groups can be managed as a single block. Multiple configuration options allow you to define the appearance and behavior of the whole group or any of its parts.

New possibilities in the Diagram editor

We also have to mention some goodies introduced in the Diagram editor. Now you can complement the left panel of the editor with multiple identical diagram shapes containing different settings.

Check the sample

It is also worth mentioning that swimlanes and groups can be utilized in the Diagram editor. You can also specify unique configurations for them without any trouble. Moreover, end-users have an opportunity not only to perform some basic operations (move, copy, delete, etc.) on groups and swimlanes but also to expand them with the help of a context menu.

Inline editing

Check the sample

One more novelty that is expected to improve your experience with DHTMLX Diagram is the capability of inline editing. Once you need to change any text in your diagram, just double-click on it. You don’t need to go into the editor mode, as this function is now enabled by default.

DHTMLX Diagram demos with JS frameworks

Wrapping up

Source: release article published on September 7, 2021, on the DHTMLX blog

Here we post news about our JavaScript UI libraries. In addition to this, we also share useful tips, news and articles about JavaScript.