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.

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

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

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Javascript Promise

Handling keyboard shortcuts in Angular

React & useEffect cleanups

Why we use React Native ?

Build a Simple Notepad in Electron.JS

Higher Order Functions In Javascript And Why You Should Use Them More

Rendering A Minecraft World With

ViewModel + LiveData + Retrofit2 + RecyclerVeiw Create an APP

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
JavaScript UI Libraries — DHTMLX

JavaScript UI Libraries — DHTMLX

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

More from Medium

Creating a Bar Chart in D3

Create Interactive HTML Tables Populated With API Data

Visualizing Hierarchical Data with a JavaScript Treemap Chart

PostgreSQL-part1: Install & Start PostgreSQL Server on macOS