{"id":7630,"date":"2020-09-17T10:00:40","date_gmt":"2020-09-17T07:00:40","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=7630"},"modified":"2025-03-11T13:24:21","modified_gmt":"2025-03-11T10:24:21","slug":"using-layout-algorithms-arrange-diagram-shapes-automatically","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/using-layout-algorithms-arrange-diagram-shapes-automatically\/","title":{"rendered":"Using Layout Algorithms to Arrange Diagram Shapes Automatically"},"content":{"rendered":"

Modern diagramming libraries frequently come with a special tool that helps to speed up the creation of different diagram types \u2013 a layout algorithm. This feature is intended for automatic arrangement of diagram elements. Based on specific rules, the algorithm calculates the positioning of diagram shapes and connectors and places them in such a way that even the most complex diagrams become clear and informative.<\/p>\n

In this post, we will take a closer look at the most popular auto layout algorithm types, see how they are implemented in DHTMLX Diagram, and consider from a more technical standpoint how web developers can apply the auto layout function using our diagramming component.<\/p>\n

Types of Automatic Layout Algorithms<\/h5>\n

Layout algorithms may vary in numerous aspects, but most commonly they differ in approaches to how shapes are interconnected i.e. what kind of connectors are used in the diagram.<\/p>\n

Based on this attribute, layout algorithms are divided into many types, but the most popular of them are hierarchical layout and orthogonal layout.<\/p>\n

Hierarchical Layout Algorithm<\/h6>\n

\"hierarchical<\/p>\n

Hierarchical layout in the org chart by DHTMLX<\/p>\n

<\/em><\/p>\n

A hierarchical layout algorithm uses straight and diagonal connectors for arranging loaded data in a hierarchical order. It helps to clearly show the principal direction (or flow) within a diagram. Here shapes of the diagram are commonly positioned in hierarchically structured layers with most of the connectors oriented in the same direction (left-to-right, top-to-bottom, etc.). Thanks to a small possibility of crossings between connectors, the algorithm brings more clarity to the diagram.<\/p>\n

The hierarchical layout algorithm is popular in the application areas where it is necessary to clearly show dependencies between diagram nodes. For instance, it is widely used for visualizing business activities (workflow diagrams, PERT charts, org charts), software engineering (activity diagrams), database modeling, electrical engineering, and other fields with a strong focus on the direction of data flow.<\/p>\n

Orthogonal Layout Algorithm<\/h6>\n

\"Orthogonal<\/p>\n

Orthogonal layout in the block diagram by DHTMLX<\/p>\n

<\/em><\/p>\n

An orthogonal layout utilizes right-angle connectors for presenting directed or undirected graphs allowing you to quickly understand the relationships between nodes. Like the hierarchical layout, the orthogonal layout algorithm helps to minimize the chances of crossings and also ensures a lack of overlaps and as few as possible bends. Thus, diagrams, especially complex ones, become more compact and readable.<\/p>\n

An orthogonal layout algorithm is an appropriate option for mid-sized sparse graphs. It can be applied in a database schema, system management, or software engineering. This algorithm can be frequently encountered in ER diagrams or circuit diagrams.<\/p>\n

How to Use Layout Algorithms in DHTMLX Diagram<\/h5>\n

When utilizing DHTMLX JavaScript diagram<\/a> library for data visualization, you can arrange diagram shapes automatically either in the direct<\/strong> mode or in the edges<\/strong> mode. The direct<\/strong> mode allows connecting diagram shapes with diagonal lines in a hierarchical structure. The edges<\/strong> mode engages right-angle connectors and helps you create orthogonal graphs.<\/p>\n

In order to configure the automatic layout algorithm, web developers have two possible options:<\/p>\n