Introducing DHTMLX Diagram 4.0

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.


Using DHTMLX Diagram, you can generate popular types of diagrams for accomplishing various business goals — from reflecting a company’s workflows to modeling databases or software architectures. But sometimes, such diagrams can become too complex and confusing for end-users. That is why our development team provided a special functionality in v4.0 called swimlanes. These are simple but very useful visual elements in the form of parallel lines which can be arranged vertically or horizontally within a diagram.

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

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.

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

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

As a cherry on top, the DHTMLX development team also delivered a range of helpful demos providing insights on how to implement our diagramming component into apps based on the most popular JS frameworks. All you have to do is just download the demos from our GitHub repository using the following links:

Wrapping up

Summarizing the above, we can conclude that our JavaScript diagramming library has become more robust and convenient for web developers as well as end-users. If you are new to DHTMLX Diagram and want to try its features, including the new ones, make use of a free 30-day evaluation version.

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