{"id":9224,"date":"2021-09-07T12:28:45","date_gmt":"2021-09-07T09:28:45","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=9224"},"modified":"2026-01-23T13:30:30","modified_gmt":"2026-01-23T10:30:30","slug":"dhtmlx-diagram-4-0-groups-swimlanes-angular-react-vue-demos","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-diagram-4-0-groups-swimlanes-angular-react-vue-demos\/","title":{"rendered":"DHTMLX Diagram 4.0 with Swimlanes, Groups, and Angular, React, and Vue.js Integration Demos"},"content":{"rendered":"

We are delighted to announce the release of the DHTMLX JavaScript diagram library<\/a> 4.0. The major version brings out such sought-after elements as swimlanes and groups of items as well as integration demos with Angular, React, and Vue.js. Diagram editors become more flexible. The API is enriched with new events, methods, and configuration options.<\/p>\n

Download the brand-new version 4.0 of DHTMLX Diagram ><\/a><\/strong><\/p>\n

Let’s uncover all the release features now!<\/p>\n

Groups<\/h5>\n

V4.0 delivers the ability to set up a group of Diagram elements. Groups can comprise shapes as well as other groups. They serve to organize objects and visually separate them from each other according to some criteria. A group also enables users to manipulate elements included in it as one unit.<\/p>\n

Groups are available for end-users in the left panel of the Diagram editor. However, they can also be created manually in the process of preparing a dataset by setting up a group object with the “$group”<\/em> value of the type<\/strong> attribute. There is a wide range of configuration options<\/a> that you can use to specify the appearance and behavior of a group.<\/p>\n

For instance, you can hide a group’s header, make it closable, editable, and position it at the top or bottom, on the left or right side of the group, as shown in the example below.<\/p>\n

\"DHTMLXCheck the code snippet ><\/a><\/p>\n

In the following example, there is a group containing two shapes. It has specific width and height as well as a closable header. Check the code snippet with a live preview ><\/a><\/p>\n

{<\/span>
\ntype:<\/span> "$group"<\/span>,<\/span>
\nid:<\/span> 1<\/span>,<\/span>
\nwidth:<\/span> 400<\/span>,<\/span>
\nheight:<\/span> 200<\/span>,<\/span>
\nx:<\/span> 0<\/span>,<\/span>
\ny:<\/span> 0<\/span>,<\/span>
\nheader:<\/span> {<\/span>
\ntext:<\/span> "User Access"<\/span>,<\/span>
\n}<\/span>,<\/span>
\ngroupChildren:<\/span> [<\/span>"1.1"<\/span>,<\/span> "1.2"<\/span>]<\/span>,<\/span>
\n}<\/span>,<\/span>
\n{<\/span>
\ntype:<\/span> "it"<\/span>,<\/span>
\nid:<\/span> "1.1"<\/span>,<\/span>
\nx:<\/span> 50<\/span>,<\/span>
\ny:<\/span> 75<\/span>,<\/span>
\ntext:<\/span> "Remote Desktop"<\/span>
\n}<\/span>,<\/span>
\n{<\/span>
\ntype:<\/span> "it"<\/span>,<\/span>
\nid:<\/span> "1.2"<\/span>,<\/span>
\nx:<\/span> 200<\/span>,<\/span>
\ny:<\/span> 75<\/span>,<\/span>
\ntext:<\/span> "Login Server"<\/span>
\n}<\/span>,<\/span><\/div><\/div>\n

\"DHTMLXCheck the code snippet ><\/a><\/p>\n

Additionally, you can configure the behavior of group items when a user is dragging them outside of the group via the groupBehavior<\/strong> and padding<\/strong> attributes of the exitArea<\/strong> object. Thus, you can allow an item to be moved in and out of the group, make the group borders expand when a user is dragging an item outside, or disable the drag-and-drop of items out of the group, as well as set the padding between an item and the edge of the group.<\/p>\n

\"DHTMLXCheck the code snippet ><\/a><\/p>\n

Swimlanes<\/h5>\n

The most wanted feature delivered in v4.0 is swimlanes. Swimlanes are rectangles divided into vertical or horizontal lanes or cells similar to a matrix. They can include shapes and groups of shapes. Swimlanes help to distinguish between different parts of a process or system.<\/p>\n

To create a swimlane, you just need to set the “$swimlane”<\/em> type of the swimlane configuration object and define its structure via the layout<\/strong> configuration property.<\/p>\n

By default, DHTMLX Diagram swimlanes have no header and subheader. However, you can choose from a variety of configuration options<\/a> to fine-tune your swimlane.
\n\"DHTMLXCheck the code snippet ><\/a><\/p>\n

For example, the swimlane diagram shown in the picture above has the following configuration:<\/p>\n

{<\/span>
\n"id"<\/span>:<\/span> "main"<\/span>,<\/span>
\n"type"<\/span>:<\/span> "$swimlane"<\/span>,<\/span>
\n"height"<\/span>:<\/span> 680<\/span>,<\/span>
\n"width"<\/span>:<\/span> 1060<\/span>,<\/span>
\n"header"<\/span>:<\/span> {<\/span>
\n"closable"<\/span>:<\/span> true<\/span>,<\/span>
\n"text"<\/span>:<\/span> "Swimlane diagram template"<\/span>
\n}<\/span>,<\/span>
\n"layout"<\/span>:<\/span> [<\/span>
\n[<\/span>1<\/span>,<\/span> 2<\/span>,<\/span> 3<\/span>]<\/span>,<\/span>
\n[<\/span>4<\/span>,<\/span> 5<\/span>,<\/span> 6<\/span>]<\/span>,<\/span>
\n[<\/span>7<\/span>,<\/span> 8<\/span>,<\/span> 9<\/span>]<\/span>
\n]<\/span>,<\/span>
\n"subHeaderRows"<\/span>:<\/span> {<\/span>
\n"headers"<\/span>:<\/span> [<\/span>
\n{<\/span>
\n"text"<\/span>:<\/span> "Sprint 1"<\/span>
\n}<\/span>,<\/span>
\n{<\/span>
\n"text"<\/span>:<\/span> "Sprint 2"<\/span>
\n}<\/span>,<\/span>
\n{<\/span>
\n"text"<\/span>:<\/span> "Sprint 3"<\/span>
\n}<\/span>
\n]<\/span>
\n}<\/span>,<\/span>
\n"subHeaderCols"<\/span>:<\/span> {<\/span>
\n"headers"<\/span>:<\/span> [<\/span>
\n{<\/span>
\n"text"<\/span>:<\/span> "Venus team"<\/span>
\n}<\/span>,<\/span>
\n{<\/span>
\n"text"<\/span>:<\/span> "Saturn team"<\/span>
\n}<\/span>,<\/span>
\n{<\/span>
\n"text"<\/span>:<\/span> "Mars team"<\/span>
\n}<\/span>
\n]<\/span>
\n}<\/span>
\n}<\/span>,<\/span><\/div><\/div>\n

It has three rows and columns with six cells altogether. Its header is closable. Besides, the swimlane is equipped with subheaders for each column and row.<\/p>\n

In addition to these options, it is possible to disable the resizing and moving of a swimlane, make a header not editable, or even implement a new configuration property following your own logic. Learn more in the documentation ><\/a><\/p>\n

Swimlanes are extremely flexible. The layout<\/strong> property allows you to merge cells by removing borders between them. Thus, you can create a swimlane structure with any possible combination of cells.<\/p>\n

The following example shows how to merge cells vertically in the first column in the first and second rows, in the third column in the first, second and third rows, and horizontally in the fourth row:<\/p>\n

{<\/span>
\ntype:<\/span> "$swimlane"<\/span>,<\/span>
\nid:<\/span> "e"<\/span>,<\/span>
\nheight:<\/span> 500<\/span>,<\/span>
\nwidth:<\/span> 850<\/span>,<\/span>
\ny:<\/span> 2400<\/span>,<\/span>
\nlayout:<\/span> [<\/span>
\n[<\/span>"e1"<\/span>,<\/span> "e2"<\/span>,<\/span> "e3"<\/span>]<\/span>,<\/span>
\n[<\/span>"e1"<\/span>,<\/span> "e5"<\/span>,<\/span> "e3"<\/span>]<\/span>,<\/span>
\n[<\/span>"e7"<\/span>,<\/span> "e8"<\/span>,<\/span> "e3"<\/span>]<\/span>,<\/span>
\n[<\/span>"e6"<\/span>,<\/span> "e6"<\/span>,<\/span> "e6"<\/span>]<\/span>,<\/span>
\n]<\/span>,<\/span>
\nsubHeaderRows:<\/span> {<\/span>
\nenable:<\/span> true<\/span>,<\/span>
\n}<\/span>,<\/span>
\nsubHeaderCols:<\/span> {<\/span>
\nenable:<\/span> true<\/span>,<\/span>
\n}<\/span>,<\/span>
\n}<\/span><\/div><\/div>\n

Additionally, you can redefine the configuration of particular swimlane cells. To do so, you need to create an object of the cell with the type:<\/strong> “$group”<\/em> and id<\/strong> attribute and then set the desired configuration options. For example, here we redefine the background color of the cell with the value 3<\/em> of the id<\/strong> attribute:<\/p>\n

const<\/span> data =<\/span> [<\/span>
\n\/\/ configuring a swimlane<\/span>
\n{<\/span>
\ntype:<\/span> "$swimlane"<\/span>,<\/span>
\nid:<\/span> "main"<\/span>
\nheight:<\/span> 500<\/span>,<\/span>
\nwidth:<\/span> 850<\/span>,<\/span>
\nlayout:<\/span> [<\/span>
\n[<\/span>1<\/span>,<\/span> 2<\/span>,<\/span> 3<\/span>]<\/span>
\n]<\/span>,<\/span>
\n}<\/span>,<\/span>
\n\/\/ configuring a swimlane cell<\/span>
\n{<\/span>
\ntype:<\/span> "$sgroup"<\/span>,<\/span>
\nid:<\/span> 3<\/span>,<\/span>
\nstyle:<\/span> {<\/span>
\nfill:<\/span> "grey"<\/span>
\n}<\/span>
\n}<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n
Inline Editing<\/h5>\n

Starting with v4.0, you can benefit from inline editing and edit the text by simply double-clicking on it. Now, this feature is available in DHTMLX Diagram by default, not only in the editor mode.
\n\"DHTMLX<\/p>\n

Identical Elements with Different Settings in the Left Panel of the Editor<\/h5>\n

From now on, it is possible to add the same Diagram elements but with different settings to the left panel of the editor. Thus, for instance, end-users will be able to choose from similar predefined flowchart shapes differing only in color.<\/p>\n

You can also redefine attributes of any shape and create brand new configurations of such elements as groups and swimlanes situated in the left panel. Learn more in the documentation ><\/a>
\n\"Left<\/p>\n

DHTMLX Diagram with Angular, React, and Vue.js<\/h5>\n

In addition to all the novelties, we are glad to release demos of how to integrate the DHTMLX Diagram library with the top JavaScript frameworks: Angular, React, and Vue.js. Follow the links on GitHub, clone or download the repositories, and try out in your projects:<\/p>\n

Manipulating Groups and Swimlanes from the UI<\/h5>\n

Both groups<\/a> and swimlanes<\/a> give you the opportunity to manage Diagram elements included in them as a whole. You can move, copy, and delete groups and swimlanes together with all their elements in the editor mode. You can also collapse a swimlane, add a new lane, move particular lanes to another position and delete any of them via a context menu.
\n\"DHTMLXCheck the code snippet ><\/a><\/p>\n

\"DHTMLXCheck the code snippet ><\/a><\/p>\n

DHTMLX Diagram editor contains sections with built-in groups and swimlanes in the left panel based on which you can build a diagram from scratch.<\/p>\n

\"DHTMLX<\/p>\n

The right panel provides numerous styling options to adjust Diagram elements to your requirements, for example, change the header’s position, hide subheaders, and modify their styles.<\/p>\n

\"DHTMLXCheck the code snippet ><\/a><\/p>\n

\"DHTMLXCheck the code snippet ><\/a><\/p>\n