Update docs for v6.1.3

docs/api/diagram/autoplace_method.md

@@ -7,7 +7,7 @@ description: You can learn about the autoPlace method in the documentation of th
 # autoPlace()
 
 :::info
-The **autoPlace()** method works only in the default mode of the diagram and only for shapes
+The `autoPlace()` method works only in the default mode of the diagram and only for shapes
 :::
 
 ### Description
@@ -16,16 +16,18 @@ The **autoPlace()** method works only in the default mode of the diagram and onl
 
 ### Usage
 
-~~~jsx
+~~~ts
 autoPlace(config?: object): void;
 ~~~
 
 ### Parameters
 
 - `config` - (optional) an object with configuration settings of the autoplacement. If not specified, the default settings will be applied. Here you can specify the following parameters:
-    - `mode` - (optional) the mode of connecting shapes, "direct" (by default) or "edges"
-    - `graphPadding` - (optional) sets the distance between unconnected diagrams, 200 by default
-    - `placeMode` - (optional) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
+    - `mode` - (optional) the mode of connecting shapes, *"direct"* (by default) or *"edges"*
+    - `graphPadding` - (optional) sets the distance between unconnected diagrams, *200* by default
+    - `placeMode` - (optional) sets the mode of placement of shapes, *"orthogonal"* (by default) or *"radial"*
+    - `itemPadding` - (optional) minimal padding between items (the minimal value is *1*), *20* by default
+    - `levelPadding` - (optional) minimal padding between hierarchy levels (the minimal value is *1*), *20* by default
 
 ### Example
 
@@ -51,6 +53,10 @@ Connector lines with no arrows are aligned "from center to center"; they are str
 
 Connector lines are aligned "from side to side".
 
+:::note
+If `fromSide` and `toSide` are set on a link, the autoplacement algorithm will preserve those values but will not use them during placement calculation. The key properties that define links are `from` and `to`, while `fromSide` and `toSide` are calculated automatically by the algorithm.
+:::
+
 :::info 
 To add arrows to the lines, specify **forwardArrow: "filled"** or **backArrow: "filled"** in the configuration of a [line object](../../../lines/configuration_properties/).
 :::
@@ -94,9 +100,12 @@ Shapes are arranged on imaginary circles relative to the central shape, i.e. a s
 
 **Change log**:
 
+- The `itemPadding` and `levelPadding` parameters are added in v6.1.3
 - The **placeMode** parameter is added in v5.0
 - The **autoplacement** property is added in v3.0
 
 **Related articles**: [Arranging shapes automatically](../../../guides/manipulating_items/#arranging-shapes-automatically)
 
-**Related sample**: [Diagram. Default mode. Autoplacement](https://snippet.dhtmlx.com/f3uekgjw)
+**Related sample**: 
+- [Diagram. Default mode. Radial autoplacement with padding options](https://snippet.dhtmlx.com/huut0l1s)
+- [Diagram. Default mode. Autoplacement](https://snippet.dhtmlx.com/f3uekgjw)

docs/api/diagram/autoplacement_property.md

@@ -11,34 +11,42 @@ description: You can learn about the autoplacement property in the documentation
 @short: Optional. An object with configuration settings for auto-placement of shapes
 
 :::info
-The `autoplacement` property works only in the default mode of the diagram and only for shapes
+The `autoplacement` property works only in the default mode of the diagram and only for shapes. It does not work if you use groups or swimlanes.
+
+Autoplacement will be applied only after the [`autoPlace()`](/api/diagram/autoplace_method/) method is applied. 
 :::
 
 ### Usage
 
-~~~jsx
+~~~ts
 autoplacement?: {
-    mode?: "direct" | "edges",
-    graphPadding?: number,
-    placeMode?: "orthogonal" | "radial"
+    mode?: "direct" | "edges", // "direct" by default
+    graphPadding?: number, // 200 by default
+    placeMode?: "orthogonal" | "radial", // "orthogonal" by default
+    itemPadding?: number, // 20 by default
+    levelPadding?: number // 20 by default
 };
 ~~~
 
 ### Parameters
 
 The `autoplacement` object has the following parameters:
 
-- `mode` - (optional) the mode of connecting shapes, "direct" (by default) or "edges"
-- `graphPadding` - (optional) sets the distance between two or more unconnected diagrams, *"200"* by default
-- `placeMode` - (optional) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
+- `mode` - (optional) the mode of connecting shapes, *"direct"* (by default) or *"edges"*
+- `graphPadding` - (optional) sets the distance between two or more unconnected diagrams, *200* by default
+- `placeMode` - (optional) sets the mode of placement of shapes, *"orthogonal"* (by default) or *"radial"*
+- `itemPadding` - (optional) minimal padding between items (the minimal value is *1*), *20* by default
+- `levelPadding` - (optional) minimal padding between hierarchy levels (the minimal value is *1*), *20* by default
 
 ### Default config
 
 ~~~jsx
 autoplacement: {
     mode: "direct",
     graphPadding: 200,
-    placeMode: "orthogonal"
+    placeMode: "orthogonal",
+    itemPadding: 20, 
+    levelPadding: 20 
 }
 ~~~
 
@@ -47,7 +55,10 @@ autoplacement: {
 ~~~jsx
 const diagram = new dhx.Diagram("diagram_container", {
     autoplacement: {
-        mode: "edges",
+        placeMode: "radial",
+        mode: "direct",
+        itemPadding: 10,
+        levelPadding: 10,
         graphPadding: 100
     }
 });
@@ -109,11 +120,17 @@ Shapes are arranged on imaginary circles relative to the central shape, i.e. the
 
 ![](../../assets/edges_radial.png)
 
-**Change log**: The `placeMode` parameter is added in v5.0
+**Change log**: 
+
+- The `itemPadding` and `levelPadding` parameters are added in v6.1.3
+- The `placeMode` parameter is added in v5.0
 
 **Related articles**:
 
 - [Configuring autoplacement for shapes](../../../guides/diagram/configuration/#configuring-autoplacement-for-shapes)
 - [Arranging shapes automatically](../../../guides/manipulating_items/#arranging-shapes-automatically)
 
-**Related sample**: [Diagram. Default mode. Autoplacement](https://snippet.dhtmlx.com/f3uekgjw)
+**Related sample**: 
+
+- [Diagram. Default mode. Radial autoplacement with padding options](https://snippet.dhtmlx.com/huut0l1s)
+- [Diagram. Default mode. Arranging a generated radial dataset with autoplacement](https://snippet.dhtmlx.com/rwsime82)

docs/api/diagram_editor/editor/config/autoplacement_property.md

@@ -11,34 +11,40 @@ description: You can learn about the autoplacement property of editor in the doc
 @short: Optional. An object with configuration settings for auto-placement of shapes
 
 :::info
-The `autoplacement` property works only in the default mode of the editor (`type:"default"`) and only for shapes
+The `autoplacement` property works only in the default mode of the editor and only for shapes. It does not work if you use groups or swimlanes.
 :::
 
 ### Usage
 
-~~~jsx
+~~~ts
 autoplacement?: {
-    mode?: "direct" | "edges",
-    graphPadding?: number,
-    placeMode?: "orthogonal" | "radial"
+    mode?: "direct" | "edges", // "direct" by default
+    graphPadding?: number, // 200 by default
+    placeMode?: "orthogonal" | "radial", // "orthogonal" by default
+    itemPadding?: number, // 20 by default
+    levelPadding?: number // 20 by default
 };
 ~~~
 
 ### Parameters
 
 The `autoplacement` object has the following parameters:
 
-- `mode` - (optional) the mode of connecting shapes, "direct" (by default) or "edges"
-- `graphPadding` - (optional) sets the distance between unconnected diagrams, *"200"* by default
-- `placeMode` - (optional) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
+- `mode` - (optional) the mode of connecting shapes, *"direct"* (by default) or *"edges"*
+- `graphPadding` - (optional) sets the distance between unconnected diagrams, *200* by default
+- `placeMode` - (optional) sets the mode of placement of shapes, *"orthogonal"* (by default) or *"radial"*
+- `itemPadding` - (optional) minimal padding between items (the minimal value is *1*), *20* by default
+- `levelPadding` - (optional) minimal padding between hierarchy levels (the minimal value is *1*), *20* by default
 
 ### Default config
 
 ~~~jsx
 autoplacement: {
     mode: "direct",
     graphPadding: 200,
-    placeMode: "orthogonal"
+    placeMode: "orthogonal",
+    itemPadding: 20,
+    levelPadding: 20
 }
 ~~~
 
@@ -47,11 +53,15 @@ autoplacement: {
 ~~~jsx
 const editor = new dhx.DiagramEditor("editor_container", {
     autoplacement: {
-        graphPadding: 100,
-        mode: "edges",
-        placeMode: "radial"
+        placeMode: "radial",
+        mode: "direct",
+        itemPadding: 10,
+        levelPadding: 10,
+        graphPadding: 100
     }
 });
+
+editor.parse(data);
 ~~~
 
 ## Modes of connecting shapes
@@ -108,7 +118,8 @@ Shapes are arranged on imaginary circles relative to the central shape, i.e. the
 
 **Change log**:  
 
-- The **placeMode** parameter is added in v5.0
-- The **autoplacement** property is added in v3.0
+- The `itemPadding` and `levelPadding` parameters are added in v6.1.3
+- The `placeMode` parameter is added in v5.0
+- The `autoplacement` property is added in v3.0
 
-**Related sample**: [Diagram. Default mode. Autoplacement](https://snippet.dhtmlx.com/f3uekgjw)
+**Related sample**: [Diagram editor. Default mode. Radial auto layout algorithm](https://snippet.dhtmlx.com/f0cespbk)

docs/guides/diagram/configuration.md

@@ -121,29 +121,40 @@ You can specify the position of a diagram on a page and set margins for shapes i
 
 ## Configuring autoplacement for shapes
 
-The DHTMLX Diagram library lets you configure settings for arranging connected shapes of Diagram in the hierarchical structure automatically. You can specify the [](../../api/diagram/autoplacement_property.md) property in the configuration object of Diagram and configure the mode of connecting shapes and distance between unconnected diagrams:
+The DHTMLX Diagram library lets you configure settings for arranging connected shapes of Diagram in the hierarchical structure automatically. You can specify the [`autoplacement`](/api/diagram/autoplacement_property/) property in the configuration object of Diagram and configure the mode of connecting shapes and distance between unconnected diagrams:
 
 ~~~jsx
 const diagram = new dhx.Diagram("diagram_container", {
     autoplacement: {
         mode: "edges",
         graphPadding: 100,
-        placeMode: "radial"
+        placeMode: "radial",
+        itemPadding: 10,
+        levelPadding: 10
     }
 });
+
+diagram.data.parse(data);
+
 diagram.autoPlace();
 ~~~
 
-The property can contain three options:
+The property can contain the following options:
 
-- **mode** - (*string*) optional, the mode of connecting shapes, "direct" (by default) or "edges"
-- **graphPadding** - (*number*) optional, sets the distance between unconnected diagrams, "200" by default
-- **placeMode** - (*string*) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
+- `mode` - (*string*) optional, the mode of connecting shapes, *"direct"* (by default) or *"edges"*
+- `graphPadding` - (*number*) optional, sets the distance between unconnected diagrams, *200* by default
+- `placeMode` - (*string*) optional, sets the mode of placement of shapes, *"orthogonal"* (by default) or *"radial"*
+- `itemPadding` - (*number*) optional, minimal padding between items (the minimal value is *1*), *20* by default
+- `levelPadding` - (*number*) optional, minimal padding between hierarchy levels (the minimal value is *1*), *20* by default
 
 :::note
-The autoplacement will be applied only after the [](../../api/diagram/autoplace_method.md) method is applied. The autoplacement does not work if you use groups or swimlanes.
+Autoplacement will be applied only after the [`autoPlace()`](/api/diagram/autoplace_method/) method is applied. It works only in the default mode of the diagram and only for shapes. Autoplacement does not work if you use groups or swimlanes.
 :::
 
+![Radial autoplacement with padding options](../../assets/radial_autoplacement.png)
+
+**Related sample**: [Diagram. Default mode. Radial autoplacement with padding options](https://snippet.dhtmlx.com/huut0l1s)
+
 ## Adjusting the Diagram scale
 
 If necessary, you can scale a diagram to fit your application. It can be done with the help of the [](../../api/diagram/scale_property.md) option.

docs/guides/manipulating_items.md

@@ -5,7 +5,11 @@ description: You can learn about manipulating items in the documentation of the
 ---
 # Manipulating items
 
-You can easily manipulate Diagram items via the [Diagram Editor](../../guides/diagram_editor/initialization/). But in this article we'll explore the examples on how to manipulate the items of DHTMLX Diagram via the component's API. The article contains different sections that cover such questions as:
+You can easily manipulate Diagram items via the [Diagram Editor](../../guides/diagram_editor/initialization/). But in this article we'll explore the examples on how to manipulate the items of DHTMLX Diagram via the component's API. 
+
+## Overview
+
+The article contains different sections that cover such questions as:
 
 - [how to automatically arrange shapes in the hierarchical order](#arranging-shapes-automatically);
 - how to perform a range of operations over items, in particular:
@@ -30,12 +34,18 @@ The library provides you with the ability to implement auto-placement for shapes
 - to place connected shapes in the symmetric order at once;
 - to arrange data loaded in the JSON format or loaded from the server in the hierarchical structure.
 
-To perform the auto-placement, you need to make use of the [](../api/diagram/autoplace_method.md) method. The method can take one parameter:
+To perform the auto-placement, you need to make use of the [`autoPlace()`](/api/diagram/autoplace_method/) method. The method can take one parameter:
+
+- `config` - (*object*) optional, an object with configuration settings of the auto-placement. The object can contain the following properties:
+    - `mode` - (*string*) optional, the mode of connecting shapes, *"direct"* (by default) or *"edges"*
+    - `graphPadding` - (*number*) optional, sets the distance between unconnected diagrams, *200* by default
+    - `placeMode` - (*string*) optional, sets the mode of placement of shapes, *"orthogonal"* (by default) or *"radial"*
+    - `itemPadding` - (*number*) optional, minimal padding between items (the minimal value is *1*), *20* by default
+    - `levelPadding` - (*number*) optional, minimal padding between hierarchy levels (the minimal value is *1*), *20* by default
 
-- **config** - (*object*) optional, an object with configuration settings of the auto-placement. The object contains two optional properties:
-    - **mode** - (*string*) the mode of connecting shapes, "direct" (by default) or "edges"
-    - **graphPadding** - (*number*) sets the distance between unconnected diagrams, *"200"* by default
-    - **placeMode** - (*string*) sets the mode of placement of shapes, "orthogonal" (by default) or "radial"
+:::note
+The `autoPlace()` method works only in the default mode of the diagram and only for shapes. The autoplacement does not work if you use groups or swimlanes.
+:::
 
 ~~~jsx
 const diagram = new dhx.Diagram("diagram_container");
@@ -44,7 +54,9 @@ diagram.data.parse(data);
 diagram.autoPlace({
     mode: "edges",
     graphPadding: 100,
-    placeMode: "radial"
+    placeMode: "radial",
+    itemPadding: 10,
+    levelPadding: 10
 });
 ~~~
 
@@ -59,11 +71,29 @@ diagram.data.parse(data);
 diagram.autoPlace();
 ~~~
 
-There is also the ability to configure settings for the auto-placement by using the [](../api/diagram/autoplacement_property.md) configuration option of Diagram and applying the **autoPlace()** method.
+There is also the ability to configure settings for the auto-placement by using the [`autoplacement`](/api/diagram/autoplacement_property/) configuration option of Diagram and applying the `autoPlace()` method. The example below demonstrates how to generate and arrange a radial dataset using autoplacement.
 
-:::note
-The **autoPlace()** method works only in the default mode of the diagram and only for shapes.
-:::
+~~~jsx
+const diagram = new dhx.Diagram("diagram_container", {
+    scale: 0.3,
+    autoplacement: {
+        placeMode: "radial",
+        mode: "direct" 
+    }
+});
+
+diagram.data.parse(getNodes(120, 5));
+
+diagram.autoPlace({
+    itemPadding: 10,
+    levelPadding: 10,
+    graphPadding: 100,
+});
+~~~
+
+![Autoplacement with a generated radial dataset](../assets/radial_datasets_generator.png)
+
+**Related sample:** [Diagram. Default mode. Arranging a generated radial dataset with autoplacement](https://snippet.dhtmlx.com/rwsime82)
 
 ## Adding an item
 

docs/whats_new.md

@@ -8,6 +8,20 @@ description: You can learn a new information about DHTMLX JavaScript Diagram lib
 
 If you are updating Diagram from an older version, check [Migration to Newer Version](migration.md) for details.
 
+## Version 6.1.3 
+
+Released on May 21, 2026
+
+### Updates
+
+- Diagram / Diagram Editor. Improvements in the autoplacement logic. Added the ability to control spacing between shapes and levels via new `itemPadding` and `levelPadding` properties in the [`autoPlace()`](/api/diagram/autoplace_method/) Diagram method and the [`autoplacement`](/api/diagram/autoplacement_property/) configuration object
+
+### Fixes
+
+- Diagram. Fixed the issue where applying autoplacement resulted in incorrect distances between shapes
+- Diagram. Fixed the issue where calling [`autoPlace()`](/api/diagram/autoplace_method/) ignored [`fromSide` and `toSide`](/lines/configuration_properties/) link values, ensuring the diagram structure remains consistent
+- Diagram. The `Radial` autoplacement algorithm was refactored to fix the issue with critically large distances between shapes, providing a more compact layout
+
 ## Version 6.1.2 
 
 Released on April 2, 2026