{"id":10431,"date":"2022-09-07T13:05:47","date_gmt":"2022-09-07T10:05:47","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=10431"},"modified":"2026-01-23T13:42:45","modified_gmt":"2026-01-23T10:42:45","slug":"dhtmlx-diagram-5-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-diagram-5-0\/","title":{"rendered":"DHTMLX Diagram 5.0: New Radial Auto Layout Algorithm, Rapid Styling and Positioning Tools, and More"},"content":{"rendered":"<p>The DHTMLX development team continues contributing to your coding productivity with new releases of our JavaScript libraries. This time, we are excited to present DHTMLX Diagram v5.0. The major update brings in a range of features mainly focused on optimizing your data visualization experience with the DHTMLX Diagram editor. It is an auxiliary tool for our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/\" rel=\"noopener\" target=\"_blank\">JavaScript diagram library<\/a> that frequently turns out to be a decisive factor in favor of our product. <\/p>\n<p>In v5.0, you will find a new radial auto layout algorithm, keyboard shortcuts for time-efficient stylizing of shapes, multiple options for distributing and aligning shapes, snap lines for arranging diagram items, and improved usability of the grid area. Apart from that, there is a new live sample that vividly demonstrates the possibility of building an Eisenhower Matrix with the DHTMLX Diagram editor.<\/p>\n<p><strong><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/download.shtml\" rel=\"noopener\" target=\"_blank\">Try the new version of DHTMLX Diagram ><\/a><\/strong><\/p>\n<p>Let\u2019s delve into the details of this release.<\/p>\n<h5>Radial Auto Layout Algorithm<\/h5>\n<p>The auto layout algorithm was introduced in the default mode of our JavaScript diagramming library as well as in the editor back in 2020. This feature was received with great enthusiasm since it allowed quickly transforming any number of randomly linked shapes into good-looking hierarchical structures. In the new version, we\u2019ve expanded this functionality with a new auto-placement option. If earlier you could automatically place shapes only orthogonally (i.e. along vertical and horizontal lines), now it is also possible to <a href=\"https:\/\/docs.dhtmlx.com\/diagram\/guides\/diagram\/configuration\/#configuring-autoplacement-for-shapes\" rel=\"noopener\" target=\"_blank\">organize data in a radial (tree-like) order<\/a>.<\/p>\n<p>With the radial auto layout algorithm in action, all shapes will be depicted evenly spaced from one another on imaginary concentric circles around the root shape. This shape is determined by the highest number of connections. The radial layout style looks more compact and practical for displaying and analyzing large hierarchies. <\/p>\n<p>Programmatically, you can specify the radial arrangement of shapes via the new <strong>placeMode<\/strong> parameter. This parameter takes either of two values for setting the required arrangement of shapes:<\/p>\n<ul>\n<li>orthogonal (default),<\/li>\n<li>radial.<\/li>\n<\/ul>\n<p>Given that our diagram component enables you to configure the auto layout algorithm using the <strong><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/api\/diagram\/autoplace_method\/\" rel=\"noopener\" target=\"_blank\">autoPlace()<\/a><\/strong> method or the <strong><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/api\/diagram\/autoplacement_property\/\" rel=\"noopener\" target=\"_blank\">autoplacement<\/a><\/strong> property, we have added the new parameter to both of them.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> diagram <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Diagram<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;diagram_container&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\ndiagram.<span class=\"me1\">data<\/span>.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>data<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\ndiagram.<span class=\"me1\">autoPlace<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp;mode<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;edges&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp;placeMode<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;radial&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>In the diagram editor, you can arrange shapes in the radial order using the <strong>placeMode<\/strong> parameter of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/api\/diagram\/autoplacement_property\/\" rel=\"noopener\" target=\"_blank\">autoplacement<\/a><\/strong> property. When dealing with a large number of shapes, the algorithm will also automatically change the scale within the range from 50% to 100% to make the whole structure visible.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2022\/07\/Auto_lauout1.gif\" alt=\"DHTMLX Diagram v5.0 - Radial Auto-layout\" width=\"876\" height=\"680\" class=\"aligncenter size-full wp-image-10482\" \/><\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> editor <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">DiagramEditor<\/span><span class=\"br0\">&#40;<\/span>document.<span class=\"me1\">body<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;default&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; scale<span class=\"sy0\">:<\/span> <span class=\"nu0\">0.8<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; autoplacement<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; mode<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;direct&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; placeMode<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;radial&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/f0cespbk?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Bear in mind that the radial arrangement of shapes can look different depending on the specified mode for connector lines (&#8220;direct&#8221; or &#8220;edges&#8221;).<\/p>\n<h5>Faster Shape Styling<\/h5>\n<p>It is often the case that many, if not all, shapes should be adjusted to the same styling pattern. Previously, when using our Diagram editor for building various charts and diagrams, end-users frequently had to devote considerable time to modifying the look and feel of shapes one by one. But fortunately, it is no longer an issue.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2022\/07\/image1.gif\" alt=\"DHTMLX Diagram v5.0 - keyboard shortcuts for faster styling\" width=\"902\" height=\"491\" class=\"aligncenter size-full wp-image-10434\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/klgvu3jq?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Starting from v5.0, the Diagram editor gives end-users the possibility to apply styling settings of one shape to the other one or a group of shapes using hotkey combinations. All you have to do is to select a shape with the desired appearance, copy its settings (Alt(Option)+Ctrl(Cmd)+\u0421), and paste (Alt (Option) + Ctrl (Cmd) + V) into the target shapes. This feature is available in all three modes of the diagram editor (default, org chart, mind map).<\/p>\n<h5>Group Distribution and Alignment of Shapes<\/h5>\n<p>The auto layout algorithm is a nice addition to the diagram editor aimed to speed up the formation of the diagram structure. But we also want to make sure that end-users can do the job themselves with maximum convenience. <\/p>\n<p>Therefore, in this major release, we offer several new instruments for performing different manipulations with shapes. Firstly, we would like to mention the opportunity to simultaneously align a group of shapes and equally distribute them in the default mode of the diagram editor. When selecting more than one shape, all <a href=\"https:\/\/docs.dhtmlx.com\/diagram\/guides\/diagram_editor\/grid_area\/#aligning-multiple-items\" rel=\"noopener\" target=\"_blank\">alignment and distribution controls<\/a> will be displayed in the pop-up toolbar. <\/p>\n<p>The group of selected shapes can be aligned in six different ways:<\/p>\n<ul>\n<li>align left,<\/li>\n<li>align horizontal centers,<\/li>\n<li>align right,<\/li>\n<li>align top,<\/li>\n<li>align vertical centers,<\/li>\n<li>align bottom.<\/li>\n<\/ul>\n<p>And as for the distribution function, it allows evenly spacing shapes horizontally and vertically.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2022\/07\/image2.gif\" alt=\"DHTMLX Diagram v5.0 - Alignment and distribution options\" width=\"875\" height=\"481\" class=\"aligncenter size-full wp-image-10435\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/lfd0d5po?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nAt the same time, it should be mentioned that the group distribution and alignment functions are not available when placing shapes in swimlanes or groups.<\/p>\n<h5>Snap Lines<\/h5>\n<p>One more novelty delivered for the diagram editor in v5.0 is the ability to use <a href=\"https:\/\/docs.dhtmlx.com\/diagram\/guides\/diagram_editor\/grid_area\/#enablingdisabling-snap-lines\" rel=\"noopener\" target=\"_blank\">snap lines<\/a>. This feature is available in the default mode and can be very helpful when end-users decide to arrange diagram shapes by hand. <\/p>\n<p>How does it work in practice? When moving a specific diagram shape along the grid area, end-users will see snap lines when central or extreme lateral coordinates of the moved shape match the coordinates of static shapes. As a result, it will be much easier to manually position shapes relative to each other in the editor with utmost precision.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2022\/07\/image3.gif\" alt=\"DHTMLX Diagram v5.0 - snap lines\" width=\"859\" height=\"517\" class=\"aligncenter size-full wp-image-10437\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/t6t8ay80?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>From now on, this feature will be enabled by default with the newly added <strong><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/api\/diagram_editor\/editor\/config\/magnetic_property\/\" rel=\"noopener\" target=\"_blank\">magnetic<\/a><\/strong> property. You can change the appearance of snap lines via two optional parameters of the property:<\/p>\n<ul>\n<li><strong>lineWidth<\/strong> &#8211; sets the width of lines,<\/li>\n<li><strong>lineColor<\/strong> &#8211; sets the color of lines.<\/li>\n<\/ul>\n<p>The default configuration is the following:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">magnetic<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp;lineWidth<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp;lineColor<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;#000&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>To disable this feature, you should set the value of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/api\/diagram_editor\/editor\/config\/magnetic_property\/\" rel=\"noopener\" target=\"_blank\">magnetic<\/a><\/strong> property to <em>false<\/em>.<\/p>\n<h5>Other Improvements<\/h5>\n<p>In addition to the main features described above, there are a couple of minor updates in v5.0 that are worthy of mention. We\u2019ve updated the grid step attribute in the editor. This feature helps to reposition a selected item (shape, group, swimlane) in the grid in a much smoother way. Now when you change the value of the grid step, the distance between points in the grid area, which affects the way you move shapes along the grid, will be changed correspondingly.<\/p>\n<p>We\u2019ve complemented the <strong>icon<\/strong> object of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/api\/diagram\/toolbar_property\/\" rel=\"noopener\" target=\"_blank\">toolbar<\/a><\/strong> property in the Diagram API with the new <strong>tooltip<\/strong> parameter that allows clarifying all icons appearing in personal toolbars of shapes with text labels. This parameter has also been added to the <strong>icon<\/strong> object of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/api\/diagram_editor\/editor\/config\/shapetoolbar_property\/\" rel=\"noopener\" target=\"_blank\">shapeToolbar<\/a><\/strong> property in the diagram editor, enabling you to add tooltips to custom toolbar controls. Moreover, there are new <a href=\"https:\/\/docs.dhtmlx.com\/diagram\/guides\/localization\/\" rel=\"noopener\" target=\"_blank\">locale options<\/a> for adapting tooltips in per-item toolbars to any language.<\/p>\n<p>The <strong>lineGap<\/strong> property is no longer supported in Diagram and in Editor. Instead, there is a new <strong>lineGap<\/strong> parameter in the lineConfig property.<\/p>\n<p>We\u2019ve enriched our collection of live samples built in the DHTMLX Diagram editor. Here is an example of an <a href=\"https:\/\/snippet.dhtmlx.com\/yfvccvc4?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Eisenhower Matrix<\/a> &#8211; a popular tool used for prioritizing work.<\/p>\n<p>To consolidate your knowledge about DHTMLX Diagram v5.0, visit the \u201c<a href=\"https:\/\/docs.dhtmlx.com\/diagram\/category\/whats-new-and-migration\/\" rel=\"noopener\" target=\"_blank\">What\u2019s new and migration<\/a>\u201d section.<\/p>\n<p>And finally, you can test all the features provided in this major update by downloading a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day trial version<\/a>. If you are our current client, please visit your <a href=\"https:\/\/dhtmlx.com\/clients\/\" rel=\"noopener\" target=\"_blank\">Client&#8217;s Area<\/a> to find the new licensed package 5.0.<\/p>\n<p>If you want to share your impressions on this release or new ideas on how to improve the DHTMLX Diagram library further, please make use of the comments section below.<\/p>\n<h5>Related Materials:<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/whats_new\/#version-50\" rel=\"noopener\" target=\"_blank\">What\u2019s new in v5.0<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/f0cespbk?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">DHTMLX Diagram code snippets<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Diagram documentation<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/download.shtml\" rel=\"noopener\" target=\"_blank\">Free 30-day trial version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The DHTMLX development team continues contributing to your coding productivity with new releases of our JavaScript libraries. This time, we are excited to present DHTMLX Diagram v5.0. The major &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":10543,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,58],"class_list":["post-10431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","tag-all-posts","tag-diagram"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/10431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=10431"}],"version-history":[{"count":24,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/10431\/revisions"}],"predecessor-version":[{"id":14957,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/10431\/revisions\/14957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/10543"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=10431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=10431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=10431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}