diff --git a/docs/api/cell_manager/add_method.md b/docs/api/cell_manager/add_method.md
index ef5f310d4..6d82e3cc6 100644
--- a/docs/api/cell_manager/add_method.md
+++ b/docs/api/cell_manager/add_method.md
@@ -7,7 +7,7 @@ description: You can learn about the add method of Cell Manager in the documenta
# add()
:::info
-The **add()** method is automatically validated by the system. The cell won't be added if it is not possible according to the structure of the swimlane.
+The `add()` method is automatically validated by the system. The cell won't be added if it is not possible according to the structure of the swimlane.
:::
### Description
@@ -26,7 +26,7 @@ add(
### Parameters
- `cellIndex` - (required) the start index of a cell in a layout. The count of the index starts from 0
-- `dir` - (required) the direction of the action: "up" | "down" | "left" | "right"
+- `dir` - (required) the direction of the action: `"up"` | `"down"` | `"left"` | `"right"`
### Example
@@ -44,4 +44,4 @@ diagram.cellManager.add(0, "down"); // adds cells as rows
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/aftercellsadd_event.md b/docs/api/cell_manager/aftercellsadd_event.md
index fe826bd24..b8fc0a653 100644
--- a/docs/api/cell_manager/aftercellsadd_event.md
+++ b/docs/api/cell_manager/aftercellsadd_event.md
@@ -40,4 +40,4 @@ diagram.events.on("afterCellsAdd", (swimlaneId) => {
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/aftercellsmove_event.md b/docs/api/cell_manager/aftercellsmove_event.md
index 1db1fcfb4..d97c76bfd 100644
--- a/docs/api/cell_manager/aftercellsmove_event.md
+++ b/docs/api/cell_manager/aftercellsmove_event.md
@@ -40,4 +40,4 @@ diagram.events.on("afterCellsMove", (swimlaneId) => {
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/aftercellsremove_event.md b/docs/api/cell_manager/aftercellsremove_event.md
index e33fea6b7..b69a97820 100644
--- a/docs/api/cell_manager/aftercellsremove_event.md
+++ b/docs/api/cell_manager/aftercellsremove_event.md
@@ -40,4 +40,4 @@ diagram.events.on("afterCellsRemove", (swimlaneId) => {
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/aftercellsvalidation_event.md b/docs/api/cell_manager/aftercellsvalidation_event.md
index e7da1d193..24f4c0de4 100644
--- a/docs/api/cell_manager/aftercellsvalidation_event.md
+++ b/docs/api/cell_manager/aftercellsvalidation_event.md
@@ -46,4 +46,4 @@ diagram.events.on("afterCellsValidation", (swimlaneId, validate, action) => {
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/beforecellsadd_event.md b/docs/api/cell_manager/beforecellsadd_event.md
index f7f1f9ff1..ea63c1ae3 100644
--- a/docs/api/cell_manager/beforecellsadd_event.md
+++ b/docs/api/cell_manager/beforecellsadd_event.md
@@ -45,4 +45,4 @@ diagram.events.on("beforeCellsAdd", (swimlaneId) => {
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/beforecellsmove_event.md b/docs/api/cell_manager/beforecellsmove_event.md
index bee83a290..415540aee 100644
--- a/docs/api/cell_manager/beforecellsmove_event.md
+++ b/docs/api/cell_manager/beforecellsmove_event.md
@@ -45,4 +45,4 @@ diagram.events.on("beforeCellsMove", (swimlaneId) => {
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/beforecellsremove_event.md b/docs/api/cell_manager/beforecellsremove_event.md
index f890c924a..e81e151d4 100644
--- a/docs/api/cell_manager/beforecellsremove_event.md
+++ b/docs/api/cell_manager/beforecellsremove_event.md
@@ -45,4 +45,4 @@ diagram.events.on("beforeCellsRemove", (swimlaneId) => {
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/beforecellsvalidation_event.md b/docs/api/cell_manager/beforecellsvalidation_event.md
index 9e797c253..bf8a685de 100644
--- a/docs/api/cell_manager/beforecellsvalidation_event.md
+++ b/docs/api/cell_manager/beforecellsvalidation_event.md
@@ -49,4 +49,4 @@ diagram.events.on("beforeCellsValidation", (swimlaneId, action) => {
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/getcellid_method.md b/docs/api/cell_manager/getcellid_method.md
index 951cc21ec..0de74d13d 100644
--- a/docs/api/cell_manager/getcellid_method.md
+++ b/docs/api/cell_manager/getcellid_method.md
@@ -22,7 +22,7 @@ getCellId(
### Parameters
- `cellIndex` - (required) the start index of a cell in a layout. The count of the index starts from 0
-- `type` - (required) the type of direction to count the index: "row" | "col"
+- `type` - (required) the type of direction to count the index: `"row"` | `"col"`
### Returns
@@ -46,4 +46,4 @@ diagram.cellManager.getCellId(0, "row"); // -> "r01"
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/getcellindex_method.md b/docs/api/cell_manager/getcellindex_method.md
index c0720fef7..41600740a 100644
--- a/docs/api/cell_manager/getcellindex_method.md
+++ b/docs/api/cell_manager/getcellindex_method.md
@@ -22,7 +22,7 @@ getCellIndex(
### Parameters
- `cellId` - (required) the id of a cell
-- `type` - (required) the type of direction to count the index: "row" | "col"
+- `type` - (required) the type of direction to count the index: `"row"` | `"col"`
### Returns
@@ -46,4 +46,4 @@ diagram.cellManager.getCellIndex("r01", "row"); // -> 0
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/getsubheadercellid_method.md b/docs/api/cell_manager/getsubheadercellid_method.md
index 90d043894..532137189 100644
--- a/docs/api/cell_manager/getsubheadercellid_method.md
+++ b/docs/api/cell_manager/getsubheadercellid_method.md
@@ -42,4 +42,4 @@ diagram.cellManager.getSubHeaderCellId("sub01"); // -> "r01"
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/getsubheadercellindex_method.md b/docs/api/cell_manager/getsubheadercellindex_method.md
index 9b52d487d..4fbbe1625 100644
--- a/docs/api/cell_manager/getsubheadercellindex_method.md
+++ b/docs/api/cell_manager/getsubheadercellindex_method.md
@@ -42,4 +42,4 @@ diagram.cellManager.getSubHeaderCellIndex("sub01"); // -> 0
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/getsubheadertype_method.md b/docs/api/cell_manager/getsubheadertype_method.md
index d4081d95b..ea001449b 100644
--- a/docs/api/cell_manager/getsubheadertype_method.md
+++ b/docs/api/cell_manager/getsubheadertype_method.md
@@ -22,7 +22,7 @@ getSubHeaderType(subheaderId: string): "row" | "col" | undefined;
### Returns
-The method returns the type of the subheader of the swimlane: "row" | "col" | undefined
+The method returns the type of the subheader of the swimlane: `"row"` | `"col"` | undefined
### Example
@@ -42,4 +42,4 @@ diagram.cellManager.getSubHeaderType("sub01"); // -> "row"
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/index.md b/docs/api/cell_manager/index.md
index 00e202537..8fc82b144 100644
--- a/docs/api/cell_manager/index.md
+++ b/docs/api/cell_manager/index.md
@@ -6,7 +6,7 @@ description: You can have an overview of CellManager in the documentation of the
# CellManager overview
-The DHTMLX Diagram library provides you with a set of APIs to manipulate [a swimlane and its cells](../../swimlanes/) dynamically. The API can be used both in the diagram and in the editor.
+The DHTMLX Diagram library provides you with a set of APIs to manipulate [a swimlane and its cells](/swimlanes/) dynamically. The API can be used both in the diagram and in the editor.
## Methods
diff --git a/docs/api/cell_manager/move_method.md b/docs/api/cell_manager/move_method.md
index c67927b7b..e10b0b6ee 100644
--- a/docs/api/cell_manager/move_method.md
+++ b/docs/api/cell_manager/move_method.md
@@ -7,7 +7,7 @@ description: You can learn about the move method of Cell Manager in the document
# move()
:::info
-The **move()** method is automatically validated by the system. The cell won't be moved if it is not possible according to the structure of the swimlane.
+The `move()` method is automatically validated by the system. The cell won't be moved if it is not possible according to the structure of the swimlane.
:::
### Description
@@ -26,7 +26,7 @@ move(
### Parameters
- `cellIndex` - (required) the start index of a cell in a layout. The count of the index starts from 0
-- `dir` - (required) the direction of the action: "up" | "down" | "left" | "right"
+- `dir` - (required) the direction of the action: `"up"` | `"down"` | `"left"` | `"right"`
### Example
@@ -44,4 +44,4 @@ diagram.cellManager.move(0, "down"); // moves cells as rows
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/remove_method.md b/docs/api/cell_manager/remove_method.md
index 570d20c93..b6fcc84d0 100644
--- a/docs/api/cell_manager/remove_method.md
+++ b/docs/api/cell_manager/remove_method.md
@@ -7,7 +7,7 @@ description: You can learn about the remove method of Cell Manager in the docume
# remove()
:::info
-The **remove()** method is automatically validated by the system. The cell won't be removed if it is not possible according to the structure of the swimlane.
+The `remove()` method is automatically validated by the system. The cell won't be removed if it is not possible according to the structure of the swimlane.
:::
### Description
@@ -44,4 +44,4 @@ diagram.cellManager.remove(0, "row"); // removes cells as rows
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/resetswimlane_method.md b/docs/api/cell_manager/resetswimlane_method.md
index c3771f88e..e9e3c250b 100644
--- a/docs/api/cell_manager/resetswimlane_method.md
+++ b/docs/api/cell_manager/resetswimlane_method.md
@@ -34,4 +34,4 @@ diagram.cellManager.resetSwimlane(); // resets active swimlane
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/setswimlane_method.md b/docs/api/cell_manager/setswimlane_method.md
index bccc3dd95..b75df00e7 100644
--- a/docs/api/cell_manager/setswimlane_method.md
+++ b/docs/api/cell_manager/setswimlane_method.md
@@ -38,4 +38,4 @@ diagram.cellManager.setSwimlane("main"); // sets active swimlane
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/cell_manager/validation_method.md b/docs/api/cell_manager/validation_method.md
index 00f517166..d2347219b 100644
--- a/docs/api/cell_manager/validation_method.md
+++ b/docs/api/cell_manager/validation_method.md
@@ -23,8 +23,8 @@ validation(
### Parameters
- `cellIndex` - (required) the start index of a cell in a layout. The count of the index starts from 0
-- `dir` - (required) the direction of the action: "up" | "down" | "left" | "right"
-- `action` - (required) the type of the action: "move" | "remove" | "add"
+- `dir` - (required) the direction of the action: `"up"` | `"down"` | `"left"` | `"right"`
+- `action` - (required) the type of the action: `"move"` | `"remove"` | `"add"`
### Returns
@@ -48,4 +48,4 @@ diagram.cellManager.validation(0, "down", "move"); // -> true
**Change log**: Added in v4.0
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](/swimlanes/)
diff --git a/docs/api/data_collection/add_method.md b/docs/api/data_collection/add_method.md
index 69b3ca6ed..7b1f0f796 100644
--- a/docs/api/data_collection/add_method.md
+++ b/docs/api/data_collection/add_method.md
@@ -49,6 +49,6 @@ diagram.data.add({ type: "card", id: "3.2", text: "New Item" });
diagram.data.add({ type: "line", from: "3", to: "3.2" });
~~~
-**Related articles**: [Adding an item](../../../guides/manipulating_items/#adding-an-item)
+**Related articles**: [Adding an item](guides/manipulating_items.md#adding-an-item)
**Related sample**: [Diagram. Data. Add/delete item](https://snippet.dhtmlx.com/8wi20uop)
diff --git a/docs/api/data_collection/change_event.md b/docs/api/data_collection/change_event.md
index 13f7cbf86..e57b0228a 100644
--- a/docs/api/data_collection/change_event.md
+++ b/docs/api/data_collection/change_event.md
@@ -25,7 +25,7 @@ change: (
The callback of the event takes the following parameters:
- `id` - (optional) the id of the changed item
-- `status` - (optional) the status of the change: "add", "update", "delete", "load"
+- `status` - (optional) the status of the change: `"add"`, `"update"`, `"delete"`, `"load"`
- `updatedItem` - (optional) the object of the changed item
:::info
diff --git a/docs/api/data_collection/filter_event.md b/docs/api/data_collection/filter_event.md
index adc036aa0..302e8770f 100644
--- a/docs/api/data_collection/filter_event.md
+++ b/docs/api/data_collection/filter_event.md
@@ -18,14 +18,14 @@ filter: (filter?: object) => void;
### Parameters
-The callback of the **filter** event is called with the following parameter:
+The callback of the `filter` event is called with the following parameter:
- `object: {key: object }` - an object with all the active filters, where
- `key` - the id of an active filter
- - `object` - an object with the [**rule** and **config** properties](api/data_collection/filter_method.md#parameters)
+ - `object` - an object with the [`rule` and `config` properties](api/data_collection/filter_method.md#parameters)
:::info
-For handling the inner events of Diagram Data Collection you can use the **on()** method.
+For handling the inner events of Diagram Data Collection you can use the `on()` method.
:::
### Example
diff --git a/docs/api/data_collection/filter_method.md b/docs/api/data_collection/filter_method.md
index e494c80fd..12fdec83c 100644
--- a/docs/api/data_collection/filter_method.md
+++ b/docs/api/data_collection/filter_method.md
@@ -52,7 +52,7 @@ filter(
- `config` - (optional) an object which defines the parameters of filtering. The object may contain the following properties:
- `id` - (optional) the id of the filter
- `add` - (optional) defines whether each next filtering will be applied to the already filtered data (true), or to the initial data (false, default)
- - `permanent` - (optional) *true* to make the current filter permanent. It will be applied even if the next filtering doesn't have the `add:true` property in its configuration object. Such a filter can be removed just with the [***resetFilter***()](api/data_collection/resetfilter_method.md) method
+ - `permanent` - (optional) *true* to make the current filter permanent. It will be applied even if the next filtering doesn't have the `add:true` property in its configuration object. Such a filter can be removed just with the [`resetFilter()`](api/data_collection/resetfilter_method.md) method
### Example
@@ -77,7 +77,7 @@ To revert the diagram to the initial state, call the `filter()` method without p
diagram.data.filter();
~~~
-**Related articles**: [Filtering items](../../../guides/manipulating_items/#filtering-items)
+**Related articles**: [Filtering items](guides/manipulating_items.md#filtering-items)
**Related sample**: [Diagram. Data. Filtering shapes](https://snippet.dhtmlx.com/tm43bsgn)
diff --git a/docs/api/data_collection/find_method.md b/docs/api/data_collection/find_method.md
index e9eebe6bc..521791dbf 100644
--- a/docs/api/data_collection/find_method.md
+++ b/docs/api/data_collection/find_method.md
@@ -49,6 +49,6 @@ const shape = diagram.data.find((shape) => {
});
~~~
-**Related articles**: [Finding the necessary item](../../../guides/manipulating_items/#finding-the-necessary-item)
+**Related articles**: [Finding the necessary item](guides/manipulating_items.md#finding-the-necessary-item)
**Related sample**: [Diagram. Data. Finding necessary shape](https://snippet.dhtmlx.com/sete9z73)
diff --git a/docs/api/data_collection/findall_method.md b/docs/api/data_collection/findall_method.md
index 9b7480007..ed7fa7427 100644
--- a/docs/api/data_collection/findall_method.md
+++ b/docs/api/data_collection/findall_method.md
@@ -51,4 +51,4 @@ const shapes = diagram.data.findAll(function (shapes) {
});
~~~
-**Related articles**: [Finding the necessary item](../../../guides/manipulating_items/#finding-the-necessary-item)
+**Related articles**: [Finding the necessary item](guides/manipulating_items.md#finding-the-necessary-item)
diff --git a/docs/api/data_collection/getfilters_method.md b/docs/api/data_collection/getfilters_method.md
index 3d59f61f9..251228991 100644
--- a/docs/api/data_collection/getfilters_method.md
+++ b/docs/api/data_collection/getfilters_method.md
@@ -24,7 +24,7 @@ getFilters({ permanent?: boolean }): object;
The method returns an object with the applied filters, where:
- `key` - the id of a filter
-- `value` - an object with the [**rule** and **config** properties](/api/data_collection/filter_method.md#parameters)
+- `value` - an object with the [`rule` and `config` properties](api/data_collection/filter_method.md#parameters)
### Example
diff --git a/docs/api/data_collection/getitem_method.md b/docs/api/data_collection/getitem_method.md
index 0a1173c1a..d4d75553d 100644
--- a/docs/api/data_collection/getitem_method.md
+++ b/docs/api/data_collection/getitem_method.md
@@ -43,4 +43,4 @@ const shape = diagram.data.getItem(123);
const text = shape.text;
~~~
-**Related articles**: [Getting an item](../../../guides/manipulating_items/#getting-an-item)
+**Related articles**: [Getting an item](guides/manipulating_items.md#getting-an-item)
diff --git a/docs/api/data_collection/load_method.md b/docs/api/data_collection/load_method.md
index 9abd9c0b2..97b9d76b7 100644
--- a/docs/api/data_collection/load_method.md
+++ b/docs/api/data_collection/load_method.md
@@ -21,8 +21,8 @@ load(
### Parameters
-- `url` - (required) the URL of an external file or DataProxy with the URL configured
-- `driver` - (optional) DataDriver or type of data ("json", "csv", "xml"), "json" by default
+- `url` - (required) the URL of an external file or `DataProxy` with the URL configured
+- `driver` - (optional) `DataDriver` or type of data (`"json"`, `"csv"`, `"xml"`), `"json"` by default
### Returns
@@ -51,6 +51,6 @@ diagram.data.load("../some/data").then(() => {
});
~~~
-**Related articles**: [Loading and storing data](../../../guides/loading_data/)
+**Related articles**: [Loading and storing data](guides/loading_data.md)
**Related sample**: [Diagram. Data. Data loading](https://snippet.dhtmlx.com/09isp2d8)
diff --git a/docs/api/data_collection/parse_method.md b/docs/api/data_collection/parse_method.md
index bfc7d16eb..adb35baea 100644
--- a/docs/api/data_collection/parse_method.md
+++ b/docs/api/data_collection/parse_method.md
@@ -27,7 +27,7 @@ parse(
data: object[]; // an array of all shapes and connections
~~~
- for the PERT Diagram mode it is an object with:
- - the `data` array (for shapes: "task", "milestone", "project")
+ - the `data` array (for shapes: `"task"`, `"milestone"`, `"project"`)
- the `links` array (for connections between shapes)
~~~jsx
{
@@ -35,7 +35,7 @@ parse(
links: object[] // an array of connections between the shapes
};
~~~
-- `driver` - (optional) DataDriver or type of data ("json", "csv", "xml"), "json" by default
+- `driver` - (optional) `DataDriver` or type of data (`"json"`, `"csv"`, `"xml"`), `"json"` by default
### Example
@@ -97,7 +97,7 @@ const diagram = new dhx.Diagram("diagram_container", {
diagram.data.parse(dataset);
~~~
-**Related articles**: [Loading and storing data](../../../guides/loading_data/)
+**Related articles**: [Loading and storing data](guides/loading_data.md)
**Related samples**:
- [Diagram. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/5ign6fyy)
diff --git a/docs/api/data_collection/remove_method.md b/docs/api/data_collection/remove_method.md
index b11ebd560..7fc815847 100644
--- a/docs/api/data_collection/remove_method.md
+++ b/docs/api/data_collection/remove_method.md
@@ -11,7 +11,7 @@ description: You can learn about the remove method of data collection in the doc
@short: Deletes the specified item from the diagram
:::note
-If the diagram is initialized in the org (*type: "org"*) or mindmap (*type: "mindmap"*) mode, deleting a shape will remove the link to this shape and all child shapes as well
+If the diagram is initialized in the org (`type: "org"`) or mindmap (`type: "mindmap"`) mode, deleting a shape will remove the link to this shape and all child shapes as well
:::
### Usage
@@ -35,6 +35,6 @@ diagram.data.parse(data);
diagram.data.remove("2");
~~~
-**Related articles**: [Deleting items](../../../guides/manipulating_items/#deleting-items)
+**Related articles**: [Deleting items](guides/manipulating_items.md#deleting-items)
**Related sample**: [Diagram. Data. Add/delete item](https://snippet.dhtmlx.com/8wi20uop)
diff --git a/docs/api/data_collection/removeall_method.md b/docs/api/data_collection/removeall_method.md
index 23305c801..249b0720e 100644
--- a/docs/api/data_collection/removeall_method.md
+++ b/docs/api/data_collection/removeall_method.md
@@ -27,6 +27,6 @@ diagram.data.parse(data);
diagram.data.removeAll();
~~~
-**Related articles**: [Deleting items](../../../guides/manipulating_items/#deleting-items)
+**Related articles**: [Deleting items](guides/manipulating_items.md#deleting-items)
**Related sample**: [Diagram. Data. Add/delete item](https://snippet.dhtmlx.com/8wi20uop)
diff --git a/docs/api/data_collection/resetfilter_method.md b/docs/api/data_collection/resetfilter_method.md
index 5a09fc0e6..dad919c16 100644
--- a/docs/api/data_collection/resetfilter_method.md
+++ b/docs/api/data_collection/resetfilter_method.md
@@ -21,7 +21,7 @@ resetFilter({
### Parameters
-- `config` - (optional) specifies the parameters of resetting the active filters. If the config isn't specified or it is empty, all the filters except for those that have the ***permanent*** property in the configuration object will be reset. Can contain the following properties:
+- `config` - (optional) specifies the parameters of resetting the active filters. If the config isn't specified or it is empty, all the filters except for those that have the `permanent` property in the configuration object will be reset. Can contain the following properties:
- `id` - (optional) the id of the filter to reset
- `permanent` - (optional) *true* to reset all the active filters, including those that have the `permanent:true` setting in their config
diff --git a/docs/api/data_collection/serialize_method.md b/docs/api/data_collection/serialize_method.md
index 98e1e0a57..a859b3c59 100644
--- a/docs/api/data_collection/serialize_method.md
+++ b/docs/api/data_collection/serialize_method.md
@@ -22,7 +22,7 @@ Depending on the diagram mode, the method returns:
- `object[]` - (for the default, org chart and mindmap Diagram modes) an array of objects for each item and link from Diagram
- `{ data: object[]; links: object[] }` - (for the PERT Diagram mode) an object with:
- - the `data` array of objects (for shapes: "task", "milestone", "project")
+ - the `data` array of objects (for shapes: `"task"`, `"milestone"`, `"project"`)
- the `links` array of objects (for connections between shapes)
### Example
@@ -49,6 +49,6 @@ diagram.data.parse(dataset);
const dataset = diagram.data.serialize(); // -> { data: [...], links: [...] };
~~~
-Note that for the PERT Diagram mode the *links* objects in the exported data object will have [the same types as in the DHTMLX Gantt chart](https://docs.dhtmlx.com/gantt/desktop__link_properties.html). It means that if the type of a link in the Diagram data coincides with some of the Gantt links types, it will remain the same during serialization. If the link type isn't specified or set differently (for example, `type: "line"`), it will be converted into `type: "0"`.
+Note that for the PERT Diagram mode the `links` objects in the exported data object will have [the same types as in the DHTMLX Gantt chart](https://docs.dhtmlx.com/gantt/desktop__link_properties.html). It means that if the type of a link in the Diagram data coincides with some of the Gantt links types, it will remain the same during serialization. If the link type isn't specified or set differently (for example, `type: "line"`), it will be converted into `type: "0"`.
-**Related articles**: [Saving and restoring state](../../../guides/loading_data/#saving-and-restoring-state)
+**Related articles**: [Saving and restoring state](guides/loading_data.md#saving-and-restoring-state)
diff --git a/docs/api/data_collection/update_method.md b/docs/api/data_collection/update_method.md
index 2eb352d6f..2be12aee7 100644
--- a/docs/api/data_collection/update_method.md
+++ b/docs/api/data_collection/update_method.md
@@ -39,4 +39,4 @@ diagram.data.parse(data);
diagram.data.update(123, { text:"New text" });
~~~
-**Related articles**: [Updating an item](../../../guides/manipulating_items/#updating-an-item)
+**Related articles**: [Updating an item](guides/manipulating_items.md#updating-an-item)
diff --git a/docs/api/diagram/addshape_method.md b/docs/api/diagram/addshape_method.md
index 119889061..a7ca1808f 100644
--- a/docs/api/diagram/addshape_method.md
+++ b/docs/api/diagram/addshape_method.md
@@ -24,12 +24,12 @@ addShape(
### Parameters
- `type` - (required) the unique name for the type of a custom shape. The name must differ from the names of default shapes
-- `parameters` - (required) an object with the additional parameters of the **addShape()** method. Here you can specify the following attributes:
+- `parameters` - (required) an object with the additional parameters of the `addShape()` method. Here you can specify the following attributes:
- `template: function` - (required) the function that takes the configuration object of the shape as a parameter and returns either an HTML or SVG template
- - [`defaults: object`](../../../shapes/custom_shape/) - (optional) the default configuration for a created shape. See [the full list of the configuration properties of a shape](../../../shapes/configuration_properties/)
- - [`eventHandlers: object`](../../../shapes/custom_shape/#event-handlers-for-custom-shapes) - (optional) adds custom event handlers to HTML elements of the template of a shape. The `eventHandlers` object includes a set of `key:value` pairs, where:
+ - [`defaults: object`](shapes/custom_shape.md) - (optional) the default configuration for a created shape. See [the full list of the configuration properties of a shape](shapes/configuration_properties.md)
+ - [`eventHandlers: object`](shapes/custom_shape.md#event-handlers-for-custom-shapes) - (optional) adds custom event handlers to HTML elements of the template of a shape. The `eventHandlers` object includes a set of `key:value` pairs, where:
- `key: string` - the name of the event. Note, that at the beginning of the event name the 'on' prefix is used (onclick, onmouseover)
- - `value: object` - an object that contains a **key:value** pair, where
+ - `value: object` - an object that contains a `key:value` pair, where
- `key` is the CSS class name that the handler will be applied to
- `value` is a function that takes two parameters:
- `event: object` - (required) an event object
@@ -82,7 +82,7 @@ diagram.addShape("personal", {
**Related sample**: [Diagram with Editor. Org chart mode. Customization of cards, editbar and toolbar](https://snippet.dhtmlx.com/vcnt647v)
-The example below shows how you can add a custom shape into the Diagram Editor as well as configure the [Shapebar](/guides/diagram_editor/shapebar/) and [Editbar](/guides/diagram_editor/editbar/) panels of the editor. The configuration of a custom shape in the editbar of the Editor is implemented via the [`properties`](../../../api/diagram_editor/editbar/config/properties_property/) property of the Editbar panel.
+The example below shows how you can add a custom shape into the Diagram Editor as well as configure the [Shapebar](guides/diagram_editor/shapebar.md) and [Editbar](guides/diagram_editor/editbar.md) panels of the editor. The configuration of a custom shape in the editbar of the Editor is implemented via the [`properties`](api/diagram_editor/editbar/config/properties_property.md) property of the Editbar panel.
~~~jsx {34-49} title="Adding a shape into the Diagram Editor"
const editor = new dhx.DiagramEditor("editor_container", {
@@ -138,7 +138,7 @@ editor.diagram.addShape("network", {
**Change log**: The `properties` attribute is removed in v6.0.
-**Related articles**: [Custom Shape](../../../shapes/custom_shape/)
+**Related articles**: [Custom Shape](shapes/custom_shape.md)
**Related samples**:
diff --git a/docs/api/diagram/aftercollapse_event.md b/docs/api/diagram/aftercollapse_event.md
index c7b97cfd0..123fc8237 100644
--- a/docs/api/diagram/aftercollapse_event.md
+++ b/docs/api/diagram/aftercollapse_event.md
@@ -24,7 +24,7 @@ afterCollapse: (
The callback of the event takes the following parameters:
- `id` - (required) the id of an item which has been collapsed
-- `dir` - (optional) the side the children were hidden in relation to the parent shape ("left" or "right" for *type:"topic"*, otherwise - undefined)
+- `dir` - (optional) the side the children were hidden in relation to the parent shape (`"left"` or `"right"` for *type:`"topic"`*, otherwise - undefined)
### Example
@@ -42,6 +42,6 @@ diagram.events.on("afterCollapse", (id, dir) => {
});
~~~
-**Change log**: The **dir** parameter was added in v3.1
+**Change log**: The `dir` parameter was added in v3.1
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/afterexpand_event.md b/docs/api/diagram/afterexpand_event.md
index 32afd5888..ff0a37fd0 100644
--- a/docs/api/diagram/afterexpand_event.md
+++ b/docs/api/diagram/afterexpand_event.md
@@ -24,7 +24,7 @@ afterExpand: (
The callback of the event takes the following parameters:
- `id` - (required) the id of an item which has been expanded
-- `dir` - (optional) the side the children were shown in relation to the parent shape ("left" or "right" for *type:"topic"*, otherwise - undefined)
+- `dir` - (optional) the side the children were shown in relation to the parent shape (`"left"` or `"right"` for *type:`"topic"`*, otherwise - undefined)
### Example
@@ -42,4 +42,4 @@ diagram.events.on("afterExpand", (id, dir) => {
});
~~~
-**Change log**: The **dir** parameter was added in v3.1
+**Change log**: The `dir` parameter was added in v3.1
diff --git a/docs/api/diagram/aftersubmenuopen_event.md b/docs/api/diagram/aftersubmenuopen_event.md
index 13ac73ed8..c7700f0be 100644
--- a/docs/api/diagram/aftersubmenuopen_event.md
+++ b/docs/api/diagram/aftersubmenuopen_event.md
@@ -46,4 +46,4 @@ diagram.events.on("afterSubmenuOpen", (id, event, subheaderId) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/autoplace_method.md b/docs/api/diagram/autoplace_method.md
index 8dc97cafa..5d2eac7fe 100644
--- a/docs/api/diagram/autoplace_method.md
+++ b/docs/api/diagram/autoplace_method.md
@@ -23,9 +23,9 @@ 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"*
+ - `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"*
+ - `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
@@ -47,7 +47,7 @@ diagram.autoPlace({
Connector lines with no arrows are aligned "from center to center"; they are straight and diagonal.
-
+
### "edges" mode
@@ -58,17 +58,17 @@ If `fromSide` and `toSide` are set on a link, the autoplacement algorithm will p
:::
:::info
-To add arrows to the lines, specify **forwardArrow: "filled"** or **backArrow: "filled"** in the configuration of a [line object](../../../lines/configuration_properties/).
+To add arrows to the lines, specify `forwardArrow: "filled"` or `backArrow: "filled"` in the configuration of a [line object](lines/configuration_properties.md).
:::
-The connector lines in the "edges" mode can be:
- - either straight (if you set **connectType: "straight"** property of a [line object](../../../lines/configuration_properties/))
+The connector lines in the `"edges"` mode can be:
+ - either straight (if you set `connectType: "straight"` property of a [line object](lines/configuration_properties.md))
-
+
- - or 90-degree curved (if you set **connectType: "elbow"** property of a [line object](../../../lines/configuration_properties/))
+ - or 90-degree curved (if you set `connectType: "elbow"` property of a [line object](lines/configuration_properties.md))
-
+
## Modes of placement of shapes
@@ -76,35 +76,35 @@ The connector lines in the "edges" mode can be:
Shapes are arranged along vertical and horizontal lines
-- **"orthogonal"** arrangement with lines in the **"direct"** mode
+- `"orthogonal"` arrangement with lines in the `"direct"` mode
-
+
-- **"orthogonal"** arrangement with lines in the **"edges"** mode
+- `"orthogonal"` arrangement with lines in the `"edges"` mode
-
+
### "radial" mode
Shapes are arranged on imaginary circles relative to the central shape, i.e. a shape with the most connections
-- **"radial"** arrangement with lines in the **"direct"** mode
+- `"radial"` arrangement with lines in the `"direct"` mode
-
+
-- **"radial"** arrangement with lines in the **"edges"** mode
+- `"radial"` arrangement with lines in the `"edges"` mode
-
+
**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
+- 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 articles**: [Arranging shapes automatically](guides/manipulating_items.md#arranging-shapes-automatically)
**Related sample**:
- [Diagram. Default mode. Radial autoplacement with padding options](https://snippet.dhtmlx.com/huut0l1s)
diff --git a/docs/api/diagram/autoplacement_property.md b/docs/api/diagram/autoplacement_property.md
index 28380f367..a7aac9fac 100644
--- a/docs/api/diagram/autoplacement_property.md
+++ b/docs/api/diagram/autoplacement_property.md
@@ -13,7 +13,7 @@ description: You can learn about the autoplacement property in the documentation
:::info
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.
+Autoplacement will be applied only after the [`autoPlace()`](api/diagram/autoplace_method.md) method is applied.
:::
### Usage
@@ -32,9 +32,9 @@ autoplacement?: {
The `autoplacement` object has the following parameters:
-- `mode` - (optional) the mode of connecting shapes, *"direct"* (by default) or *"edges"*
+- `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"*
+- `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
@@ -74,25 +74,25 @@ diagram.autoPlace();
Connector lines with no arrows are aligned "from center to center". They are straight and diagonal.
-
+
### "edges" mode
Connector lines are aligned "from side to side".
:::info
-To add arrows to the lines, specify `forwardArrow: "filled"` or `backArrow: "filled"` in the configuration of a [line object](../../../lines/configuration_properties/).
+To add arrows to the lines, specify `forwardArrow: "filled"` or `backArrow: "filled"` in the configuration of a [line object](lines/configuration_properties.md).
:::
-The connector lines in the "edges" mode can be:
+The connector lines in the `"edges"` mode can be:
-- either straight (if you set the `connectType: "straight"` property of a [line object](../../../lines/configuration_properties/))
+- either straight (if you set the `connectType: "straight"` property of a [line object](lines/configuration_properties.md))
-
+
-- or 90-degree curved (if you set the `connectType: "elbow"` property of a [line object](../../../lines/configuration_properties/))
+- or 90-degree curved (if you set the `connectType: "elbow"` property of a [line object](lines/configuration_properties.md))
-
+
## Modes of placement of shapes
@@ -100,25 +100,25 @@ The connector lines in the "edges" mode can be:
Shapes are arranged along vertical and horizontal lines
-- **"orthogonal"** arrangement with lines in the **"direct"** mode
+- `"orthogonal"` arrangement with lines in the `"direct"` mode
-
+
-- **"orthogonal"** arrangement with lines in the **"edges"** mode
+- `"orthogonal"` arrangement with lines in the `"edges"` mode
-
+
### "radial" mode
Shapes are arranged on imaginary circles relative to the central shape, i.e. the shape with the most connections
-- **"radial"** arrangement with lines in the **"direct"** mode
+- `"radial"` arrangement with lines in the `"direct"` mode
-
+
-- **"radial"** arrangement with lines in the **"edges"** mode
+- `"radial"` arrangement with lines in the `"edges"` mode
-
+
**Change log**:
@@ -127,8 +127,8 @@ Shapes are arranged on imaginary circles relative to the central shape, i.e. the
**Related articles**:
-- [Configuring autoplacement for shapes](../../../guides/diagram/configuration/#configuring-autoplacement-for-shapes)
-- [Arranging shapes automatically](../../../guides/manipulating_items/#arranging-shapes-automatically)
+- [Configuring autoplacement for shapes](guides/diagram/configuration.md#configuring-autoplacement-for-shapes)
+- [Arranging shapes automatically](guides/manipulating_items.md#arranging-shapes-automatically)
**Related sample**:
diff --git a/docs/api/diagram/beforecollapse_event.md b/docs/api/diagram/beforecollapse_event.md
index 3e464e08c..c40ea9a55 100644
--- a/docs/api/diagram/beforecollapse_event.md
+++ b/docs/api/diagram/beforecollapse_event.md
@@ -24,7 +24,7 @@ beforeCollapse: (
The callback of the event takes the following parameters:
- `id` - (required) the id of an item
-- `dir` - (optional) the side the children will be hidden in relation to the parent shape ("left" or "right" for *type:"topic"*, otherwise - undefined)
+- `dir` - (optional) the side the children will be hidden in relation to the parent shape (`"left"` or `"right"` for *type:`"topic"`*, otherwise - undefined)
### Returns
@@ -47,6 +47,6 @@ diagram.events.on("beforeCollapse", (id, dir) => {
});
~~~
-**Change log**: The **dir** parameter was added in v3.1
+**Change log**: The `dir` parameter was added in v3.1
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/beforeexpand_event.md b/docs/api/diagram/beforeexpand_event.md
index e18735520..b57d48913 100644
--- a/docs/api/diagram/beforeexpand_event.md
+++ b/docs/api/diagram/beforeexpand_event.md
@@ -24,7 +24,7 @@ beforeExpand: (
The callback of the event takes the following parameters:
- `id` - (required) the id of an item
-- `dir` - (optional) the side the children will be shown in relation to the parent shape ("left" or "right" for *type:"topic"*, otherwise - undefined)
+- `dir` - (optional) the side the children will be shown in relation to the parent shape (`"left"` or `"right"` for *type:`"topic"`*, otherwise - undefined)
### Returns
@@ -47,6 +47,6 @@ diagram.events.on("beforeExpand", (id, dir) => {
});
~~~
-**Change log**: The **dir** parameter was added in v3.1
+**Change log**: The `dir` parameter was added in v3.1
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/beforesubmenuopen_event.md b/docs/api/diagram/beforesubmenuopen_event.md
index a57e8010d..5e16b745a 100644
--- a/docs/api/diagram/beforesubmenuopen_event.md
+++ b/docs/api/diagram/beforesubmenuopen_event.md
@@ -51,4 +51,4 @@ diagram.events.on("beforeSubmenuOpen", (id, event, subheaderId) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/collapseitem_method.md b/docs/api/diagram/collapseitem_method.md
index 0dc5d342b..1880ae024 100644
--- a/docs/api/diagram/collapseitem_method.md
+++ b/docs/api/diagram/collapseitem_method.md
@@ -22,9 +22,9 @@ collapseItem(
### Parameters
- `id` - (required) the **ID** of the item
-- `dir` - (optional) defines the side, the children will be hidden in relation to the root shape: **"left"**, or **"right"**.
+- `dir` - (optional) defines the side, the children will be hidden in relation to the root shape: `"left"`, or `"right"`.
:::note
- The **dir** parameter can be used only when the diagram is initialized in the mindmap mode (*type:"mindmap"*)
+ The `dir` parameter can be used only when the diagram is initialized in the mindmap mode (*type:`"mindmap"`*)
:::
### Example
@@ -49,6 +49,6 @@ diagram.data.parse(data);
diagram.collapseItem("main", "left");
~~~
-**Change log**: The **dir** parameter was added in v3.1
+**Change log**: The `dir` parameter was added in v3.1
-**Related articles**: [Expanding/collapsing items](../../../guides/manipulating_items/#expandingcollapsing-items)
+**Related articles**: [Expanding/collapsing items](guides/manipulating_items.md#expandingcollapsing-items)
diff --git a/docs/api/diagram/defaultlinktype_property.md b/docs/api/diagram/defaultlinktype_property.md
index 0336a9ae5..f11abf21f 100644
--- a/docs/api/diagram/defaultlinktype_property.md
+++ b/docs/api/diagram/defaultlinktype_property.md
@@ -10,7 +10,7 @@ description: You can learn about the defaultLinkType property in the documentati
@short: Optional. The default type of a connector line
-The value is applied, if the line object doesn't contain the "type" property
+The value is applied, if the line object doesn't contain the `"type"` property
### Usage
@@ -32,4 +32,4 @@ const diagram = new dhx.Diagram("diagram_container", {
});
~~~
-**Related articles**: [Setting connections between shapes](../../../lines/#setting-connections-between-shapes)
+**Related articles**: [Setting connections between shapes](/lines/#setting-connections-between-shapes)
diff --git a/docs/api/diagram/defaults_property.md b/docs/api/diagram/defaults_property.md
index 129eccc57..463c8030e 100644
--- a/docs/api/diagram/defaults_property.md
+++ b/docs/api/diagram/defaults_property.md
@@ -20,7 +20,7 @@ defaults?: {
### Parameters
-The `defaults` property is an object which includes a set of `key:value` pairs where *key* is a type of a shape or line and *value* is an object with a set of configuration settings of the [shape](../../../shapes/configuration_properties/) or [line](../../../lines/configuration_properties/) correspondingly.
+The `defaults` property is an object which includes a set of `key:value` pairs where *key* is a type of a shape or line and *value* is an object with a set of configuration settings of the [shape](shapes/configuration_properties.md) or [line](lines/configuration_properties.md) correspondingly.
:::note
There is no possibility to define `type` and `id` in the default configuration of a shape/line
@@ -58,12 +58,12 @@ const diagram = new dhx.Diagram("diagram_container", {
~~~
:::note
-After defining the default settings for the shapes/lines of separate types, you can either omit these properties or redefine their values while [preparing a data set](../../../guides/loading_data/#preparing-data-to-load) for the shapes/lines of these types.
+After defining the default settings for the shapes/lines of separate types, you can either omit these properties or redefine their values while [preparing a data set](guides/loading_data.md#preparing-data-to-load) for the shapes/lines of these types.
:::
**Change log**: The ability to set the default configuration for lines is added in v4.2
**Related articles**:
-- [Setting the default configuration of a shape](/guides/diagram/configuration/#setting-the-default-configuration-of-a-shape)
-- [Setting the preview of shapes](../../../guides/diagram_editor/shapebar/#setting-the-preview-of-shapes)
+- [Setting the default configuration of a shape](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape)
+- [Setting the preview of shapes](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes)
diff --git a/docs/api/diagram/defaultshapetype_property.md b/docs/api/diagram/defaultshapetype_property.md
index 1fed86930..9b1d0ce99 100644
--- a/docs/api/diagram/defaultshapetype_property.md
+++ b/docs/api/diagram/defaultshapetype_property.md
@@ -10,7 +10,7 @@ description: You can learn about the defaultShapeType property in the documentat
@short: Optional. The default type of a shape
-The value is applied, if the shape object doesn't contain the "type" property
+The value is applied, if the shape object doesn't contain the `"type"` property
### Usage
@@ -20,25 +20,25 @@ defaultShapeType?: string;
### Default config
-- In the **default** mode of Diagram (type: "default")
+- In the `default` mode of Diagram (type: `"default"`)
~~~jsx
defaultShapeType: "rectangle"
~~~
-- In the **org chart** mode of Diagram (type: "org")
+- In the **org chart** mode of Diagram (type: `"org"`)
~~~jsx
defaultShapeType: "card"
~~~
-- In the **mindmap** mode of Diagram (type: "mindmap")
+- In the `mindmap` mode of Diagram (type: `"mindmap"`)
~~~jsx
defaultShapeType: "topic"
~~~
-- In the **PERT** mode of Diagram (type: "pert")
+- In the **PERT** mode of Diagram (type: `"pert"`)
~~~jsx
defaultShapeType: "task"
@@ -52,4 +52,4 @@ const diagram = new dhx.Diagram("diagram_container", {
});
~~~
-**Related articles**: [Setting the type of a shape](../../../shapes/default_shapes/#setting-the-type-of-a-shape)
+**Related articles**: [Setting the type of a shape](shapes/default_shapes.md#setting-the-type-of-a-shape)
diff --git a/docs/api/diagram/emptyareaclick_event.md b/docs/api/diagram/emptyareaclick_event.md
index 51f3ee50c..a19da14d4 100644
--- a/docs/api/diagram/emptyareaclick_event.md
+++ b/docs/api/diagram/emptyareaclick_event.md
@@ -38,4 +38,4 @@ diagram.events.on("emptyAreaClick", () => {
});
~~~
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/emptyareadblclick_event.md b/docs/api/diagram/emptyareadblclick_event.md
index 1dab456ee..74c415afd 100644
--- a/docs/api/diagram/emptyareadblclick_event.md
+++ b/docs/api/diagram/emptyareadblclick_event.md
@@ -40,4 +40,4 @@ diagram.events.on("emptyAreaDblClick", (e) => {
**Change log**: Added in v4.1
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/emptyareamousedown_event.md b/docs/api/diagram/emptyareamousedown_event.md
index 944b7d1d8..2cda2990c 100644
--- a/docs/api/diagram/emptyareamousedown_event.md
+++ b/docs/api/diagram/emptyareamousedown_event.md
@@ -40,4 +40,4 @@ diagram.events.on("emptyAreaMouseDown", (e) => {
**Change log**: Added in v4.1
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/expanditem_method.md b/docs/api/diagram/expanditem_method.md
index 82c577d9b..e91ae23a0 100644
--- a/docs/api/diagram/expanditem_method.md
+++ b/docs/api/diagram/expanditem_method.md
@@ -22,9 +22,9 @@ expandItem(
### Parameters
- `id` - (required) the ID of the item
-- `dir` - (optional) defines the side the children will be shown in relation to the root shape: **"left"**, **"right"**
+- `dir` - (optional) defines the side the children will be shown in relation to the root shape: `"left"`, `"right"`
:::note
- The **dir** parameter can be used only when the diagram is initialized in the mindmap mode (*type:"mindmap"*)
+ The `dir` parameter can be used only when the diagram is initialized in the mindmap mode (*type:`"mindmap"`*)
:::
### Example
@@ -49,6 +49,6 @@ diagram.data.parse(data);
diagram.expandItem("main", "left");
~~~
-**Change log**: The **dir** parameter was added in v3.1
+**Change log**: The `dir` parameter was added in v3.1
-**Related articles**: [Expanding/collapsing items](../../../guides/manipulating_items/#expandingcollapsing-items)
+**Related articles**: [Expanding/collapsing items](guides/manipulating_items.md#expandingcollapsing-items)
diff --git a/docs/api/diagram/exportstyles_property.md b/docs/api/diagram/exportstyles_property.md
index 3a2c2ab89..8921ece43 100644
--- a/docs/api/diagram/exportstyles_property.md
+++ b/docs/api/diagram/exportstyles_property.md
@@ -9,7 +9,7 @@ description: You can learn about the exportStyles property in the documentation
:::info
By default, all css styles included to the page are sent to the export service when exporting a DHTMLX Diagram. As a result, the size of the request increases that can cause the request to fail.
-To avoid this problem, you can reduce the size of the exported data by applying the **exportStyles** property.
+To avoid this problem, you can reduce the size of the exported data by applying the `exportStyles` property.
:::
### Description
@@ -32,7 +32,7 @@ exportStyles: true
### Example
-Set the **exportStyles** property to *false* to prevent all styles from being sent to the export service:
+Set the `exportStyles` property to *false* to prevent all styles from being sent to the export service:
~~~jsx
const diagram = new dhx.Diagram("diagram_container", {
@@ -40,7 +40,7 @@ const diagram = new dhx.Diagram("diagram_container", {
});
~~~
-Or define a set of styles you want to be exported. For that, you need to set string values with the absolute paths to the desired styles to the **exportStyles** array:
+Or define a set of styles you want to be exported. For that, you need to set string values with the absolute paths to the desired styles to the `exportStyles` array:
~~~jsx
const diagram = new dhx.Diagram("diagram_container", {
@@ -57,6 +57,6 @@ You must use only absolute paths not relative ones
**Change log**: Added in v3.1
-**Related articles**: [Exporting Diagram](../../../guides/data_export/)
+**Related articles**: [Exporting Diagram](guides/data_export.md)
**Related sample**: [Diagram. Export. Export styles](https://snippet.dhtmlx.com/jm8if6nh)
diff --git a/docs/api/diagram/getscrollstate_method.md b/docs/api/diagram/getscrollstate_method.md
index a469222b5..d7aac775e 100644
--- a/docs/api/diagram/getscrollstate_method.md
+++ b/docs/api/diagram/getscrollstate_method.md
@@ -33,6 +33,6 @@ const state = diagram.getScrollState();
// diagram.scrollTo( state.x, state.y );
~~~
-**Related articles**: [Scrolling Diagram](../../../guides/diagram/scrolling_diagram/)
+**Related articles**: [Scrolling Diagram](guides/diagram/scrolling_diagram.md)
**Related sample**: [Diagram. Scroll content](https://snippet.dhtmlx.com/f970hbym)
diff --git a/docs/api/diagram/groupclick_event.md b/docs/api/diagram/groupclick_event.md
index 9172e2608..afe4b408b 100644
--- a/docs/api/diagram/groupclick_event.md
+++ b/docs/api/diagram/groupclick_event.md
@@ -46,4 +46,4 @@ diagram.events.on("groupClick", (id, event) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/groupdblclick_event.md b/docs/api/diagram/groupdblclick_event.md
index 8b9e00a4a..7004645b7 100644
--- a/docs/api/diagram/groupdblclick_event.md
+++ b/docs/api/diagram/groupdblclick_event.md
@@ -46,4 +46,4 @@ diagram.events.on("groupDblClick", (id, event) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/groupheaderclick_event.md b/docs/api/diagram/groupheaderclick_event.md
index 3b3eb779d..e76cba844 100644
--- a/docs/api/diagram/groupheaderclick_event.md
+++ b/docs/api/diagram/groupheaderclick_event.md
@@ -48,4 +48,4 @@ diagram.events.on("groupHeaderClick", (id, event, subheaderId) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/groupheaderdblclick_event.md b/docs/api/diagram/groupheaderdblclick_event.md
index 97ce1be50..7abf10ce3 100644
--- a/docs/api/diagram/groupheaderdblclick_event.md
+++ b/docs/api/diagram/groupheaderdblclick_event.md
@@ -48,4 +48,4 @@ diagram.events.on("groupHeaderDblClick", (id, event, subheaderId) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/groupmousedown_event.md b/docs/api/diagram/groupmousedown_event.md
index 70ac29438..c62ed93eb 100644
--- a/docs/api/diagram/groupmousedown_event.md
+++ b/docs/api/diagram/groupmousedown_event.md
@@ -46,4 +46,4 @@ diagram.events.on("groupMouseDown", (id, event) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/itemclick_event.md b/docs/api/diagram/itemclick_event.md
index 51794adbb..d42dcc361 100644
--- a/docs/api/diagram/itemclick_event.md
+++ b/docs/api/diagram/itemclick_event.md
@@ -46,4 +46,4 @@ diagram.events.on("itemClick", (id, event) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/itemdblclick_event.md b/docs/api/diagram/itemdblclick_event.md
index 6296955be..5f6aa4ae1 100644
--- a/docs/api/diagram/itemdblclick_event.md
+++ b/docs/api/diagram/itemdblclick_event.md
@@ -46,4 +46,4 @@ diagram.events.on("itemDblClick", (id, event) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/itemmousedown_event.md b/docs/api/diagram/itemmousedown_event.md
index 2b35f117d..2589a5fa9 100644
--- a/docs/api/diagram/itemmousedown_event.md
+++ b/docs/api/diagram/itemmousedown_event.md
@@ -46,4 +46,4 @@ diagram.events.on("itemMouseDown", (id, event) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/itemmouseout_event.md b/docs/api/diagram/itemmouseout_event.md
index c565dd6dd..8c87c7e0e 100644
--- a/docs/api/diagram/itemmouseout_event.md
+++ b/docs/api/diagram/itemmouseout_event.md
@@ -44,4 +44,4 @@ diagram.events.on("itemMouseOut", (id, event) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/itemmouseover_event.md b/docs/api/diagram/itemmouseover_event.md
index df9264708..a25e5cfcd 100644
--- a/docs/api/diagram/itemmouseover_event.md
+++ b/docs/api/diagram/itemmouseover_event.md
@@ -44,4 +44,4 @@ diagram.events.on("itemMouseOver", (id, event) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/lineclick_event.md b/docs/api/diagram/lineclick_event.md
index 0cc0b5a6d..55937f423 100644
--- a/docs/api/diagram/lineclick_event.md
+++ b/docs/api/diagram/lineclick_event.md
@@ -44,4 +44,4 @@ diagram.events.on("lineClick", (id) => {
**Change log**: Added in v3.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/lineconfig_property.md b/docs/api/diagram/lineconfig_property.md
index 652978f54..b30a94c55 100644
--- a/docs/api/diagram/lineconfig_property.md
+++ b/docs/api/diagram/lineconfig_property.md
@@ -22,14 +22,14 @@ lineConfig?: {
### Parameters
-The **lineConfig** object contains the following parameters:
+The `lineConfig` object contains the following parameters:
-- `lineType` - (optional) the default type of a connector line. The value is applied, if the line object doesn't contain the "type" property
+- `lineType` - (optional) the default type of a connector line. The value is applied, if the line object doesn't contain the `"type"` property
- `lineGap` - (optional) sets the distance to the right-angled bend of a connector line
-- `connectType` - (optional) sets the connection type of the lines: `"elbow"` | `"straight"` | `"curved"` (the "curved" type is used only in the mindmap Diagram mode). The value is applied, if the line object doesn't contain the "connectType" property
+- `connectType` - (optional) sets the connection type of the lines: `"elbow"` | `"straight"` | `"curved"` (the `"curved"` type is used only in the mindmap Diagram mode). The value is applied, if the line object doesn't contain the `"connectType"` property
:::info
-The values of the **lineType** and **connectType** settings will be applied, if the line object doesn't contain the identical ones.
+The values of the `lineType` and `connectType` settings will be applied, if the line object doesn't contain the identical ones.
:::
### Default config
@@ -43,8 +43,8 @@ lineConfig: {
The `connectType` parameter has the following default values:
-- "elbow" - for the default and org chart Diagram modes
-- "curved" - for the mindmap Diagram mode (this type is used only in the mindmap Diagram mode)
+- `"elbow"` - for the default and org chart Diagram modes
+- `"curved"` - for the mindmap Diagram mode (this type is used only in the mindmap Diagram mode)
### Example
@@ -60,16 +60,16 @@ const diagram = new dhx.Diagram("diagram_container", {
});
~~~
-The result of applying the **lineGap** property is shown in the image below:
+The result of applying the `lineGap` property is shown in the image below:
-
+
**Related sample**: [Diagram. Default mode. Activity diagram](https://snippet.dhtmlx.com/a9t2z2dt)
**Change log**:
- The `connectType` parameter is added in v6.1
-- The `lineGap` parameter is added in v5.0 (check the [Migration article](diagram/migration.md/#42---50))
+- The `lineGap` parameter is added in v5.0 (check the [Migration article](migration.md#42---50))
- Added in v4.2
-**Related articles**: [Setting connections between shapes](../../../lines/#setting-connections-between-shapes)
+**Related articles**: [Setting connections between shapes](/lines/#setting-connections-between-shapes)
diff --git a/docs/api/diagram/linedblclick_event.md b/docs/api/diagram/linedblclick_event.md
index fd38ecb25..0c7575f16 100644
--- a/docs/api/diagram/linedblclick_event.md
+++ b/docs/api/diagram/linedblclick_event.md
@@ -44,4 +44,4 @@ diagram.events.on("lineDblClick", (id, event) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/linemousedown_event.md b/docs/api/diagram/linemousedown_event.md
index a09cfd19e..003612919 100644
--- a/docs/api/diagram/linemousedown_event.md
+++ b/docs/api/diagram/linemousedown_event.md
@@ -44,4 +44,4 @@ diagram.events.on("lineMouseDown", (id, event) => {
**Change log**: Added in v4.0
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/linetitleclick_event.md b/docs/api/diagram/linetitleclick_event.md
index 1b9842d3d..e624160a7 100644
--- a/docs/api/diagram/linetitleclick_event.md
+++ b/docs/api/diagram/linetitleclick_event.md
@@ -46,4 +46,4 @@ diagram.events.on("lineTitleClick", (lineId, titleId, event) => {
**Change log**: Added in v4.1
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/linetitledblclick_event.md b/docs/api/diagram/linetitledblclick_event.md
index ae94bdaff..2e9a50e5a 100644
--- a/docs/api/diagram/linetitledblclick_event.md
+++ b/docs/api/diagram/linetitledblclick_event.md
@@ -46,4 +46,4 @@ diagram.events.on("lineTitleDblClick", (lineId, titleId, event) => {
**Change log**: Added in v4.1
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/linetitlemousedown_event.md b/docs/api/diagram/linetitlemousedown_event.md
index f97ba9f85..9e27defd1 100644
--- a/docs/api/diagram/linetitlemousedown_event.md
+++ b/docs/api/diagram/linetitlemousedown_event.md
@@ -46,4 +46,4 @@ diagram.events.on("lineTitleMouseDown", (lineId, titleId, event) => {
**Change log**: Added in v4.1
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/margin_property.md b/docs/api/diagram/margin_property.md
index 1fbcb0886..b9803eb4d 100644
--- a/docs/api/diagram/margin_property.md
+++ b/docs/api/diagram/margin_property.md
@@ -23,10 +23,10 @@ margin?: {
### Parameters
-The **margin** object can include the following parameters:
+The `margin` object can include the following parameters:
-- `itemX` - (optional) horizontal space between two shapes (only for [type: "org" | "mindmap"](../../../api/diagram/type_property/))
-- `itemY` - (optional) vertical space between two shapes (only for [type: "org" | "mindmap"](../../../api/diagram/type_property/))
+- `itemX` - (optional) horizontal space between two shapes (only for [type: "org" | "mindmap"](api/diagram/type_property.md))
+- `itemY` - (optional) vertical space between two shapes (only for [type: "org" | "mindmap"](api/diagram/type_property.md))
- `x` - (optional) horizontal space between the start of a diagram and the first item
- `y` - (optional) vertical space between the start of a diagram and the first item
diff --git a/docs/api/diagram/scroll_event.md b/docs/api/diagram/scroll_event.md
index 09f809026..c8b5fc906 100644
--- a/docs/api/diagram/scroll_event.md
+++ b/docs/api/diagram/scroll_event.md
@@ -41,5 +41,5 @@ diagram.events.on("scroll", () => {
**Related articles**:
-- [Scrolling Diagram](../../../guides/diagram/scrolling_diagram/)
-- [Event handling](../../../guides/event_handling/)
+- [Scrolling Diagram](guides/diagram/scrolling_diagram.md)
+- [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/scrollto_method.md b/docs/api/diagram/scrollto_method.md
index 20e7b648d..1e36b51db 100644
--- a/docs/api/diagram/scrollto_method.md
+++ b/docs/api/diagram/scrollto_method.md
@@ -30,4 +30,4 @@ diagram.data.parse(data);
diagram.scrollTo(100, 80);
~~~
-**Related articles**: [Scrolling Diagram](../../../guides/diagram/scrolling_diagram/)
+**Related articles**: [Scrolling Diagram](guides/diagram/scrolling_diagram.md)
diff --git a/docs/api/diagram/select_property.md b/docs/api/diagram/select_property.md
index c48105690..b6c3b0f83 100644
--- a/docs/api/diagram/select_property.md
+++ b/docs/api/diagram/select_property.md
@@ -32,5 +32,5 @@ const diagram = new dhx.Diagram("diagram_container", {
**Related articles**:
-- [Enabling items selection](../../../guides/diagram/configuration/#enabling-items-selection)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [Enabling items selection](guides/diagram/configuration.md#enabling-items-selection)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
diff --git a/docs/api/diagram/shapeclick_event.md b/docs/api/diagram/shapeclick_event.md
index 9ac01022b..5cb227358 100644
--- a/docs/api/diagram/shapeclick_event.md
+++ b/docs/api/diagram/shapeclick_event.md
@@ -42,4 +42,4 @@ diagram.events.on("shapeClick", (id) => {
});
~~~
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/shapedblclick_event.md b/docs/api/diagram/shapedblclick_event.md
index 6a7817dee..7b91724f7 100644
--- a/docs/api/diagram/shapedblclick_event.md
+++ b/docs/api/diagram/shapedblclick_event.md
@@ -42,4 +42,4 @@ diagram.events.on("shapeDblClick", (id) => {
});
~~~
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/shapeiconclick_event.md b/docs/api/diagram/shapeiconclick_event.md
index f8cc13cbd..fae97a45c 100644
--- a/docs/api/diagram/shapeiconclick_event.md
+++ b/docs/api/diagram/shapeiconclick_event.md
@@ -70,6 +70,6 @@ diagram.events.on("shapeIconClick", function (action) {
});
~~~
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
**Related sample**: [Diagram. Configuration. Shape toolbar](https://snippet.dhtmlx.com/4if395hd)
diff --git a/docs/api/diagram/shapemousedown_event.md b/docs/api/diagram/shapemousedown_event.md
index 2e0e80f5c..535d5054b 100644
--- a/docs/api/diagram/shapemousedown_event.md
+++ b/docs/api/diagram/shapemousedown_event.md
@@ -42,4 +42,4 @@ diagram.events.on("shapeMouseDown", (id) => {
});
~~~
-**Related article**: [Event handling](../../../guides/event_handling/)
+**Related article**: [Event handling](guides/event_handling.md)
diff --git a/docs/api/diagram/toolbar_property.md b/docs/api/diagram/toolbar_property.md
index f8e55d467..6b0fd8de7 100644
--- a/docs/api/diagram/toolbar_property.md
+++ b/docs/api/diagram/toolbar_property.md
@@ -27,7 +27,7 @@ toolbar?: [
### Parameters
-The **toolbar** array includes a set of icon objects. Each icon object can have the following parameters:
+The `toolbar` array includes a set of icon objects. Each icon object can have the following parameters:
- `id` - (required) the id of the icon
- `content` - (required) the content of the icon. It can contain an HTML element with the name of the icon class
@@ -67,11 +67,11 @@ const diagram = new dhx.Diagram("diagram_container", {
**Change log**:
-- The **tooltip** parameter is added in v5.0
+- The `tooltip` parameter is added in v5.0
**Related articles**:
-- [Setting toolbar for shapes](/guides/diagram/configuration/#setting-toolbar-for-shapes)
+- [Setting toolbar for shapes](guides/diagram/configuration.md#setting-toolbar-for-shapes)
- [Default icons](https://docs.dhtmlx.com/suite/helpers/icon/)
**Related sample**: [Diagram. Configuration. Shape toolbar](https://snippet.dhtmlx.com/4if395hd)
diff --git a/docs/api/diagram/type_property.md b/docs/api/diagram/type_property.md
index 7e86306e1..7cdb8df6d 100644
--- a/docs/api/diagram/type_property.md
+++ b/docs/api/diagram/type_property.md
@@ -26,29 +26,29 @@ const diagram = new dhx.Diagram("diagram_container", {
### Diagram modes
-DHTMLX Diagram can be initialized in one of the following modes: "default", "org", "mindmap" or "pert". To apply the necessary mode, specify the corresponding value of the **type** property:
+DHTMLX Diagram can be initialized in one of the following modes: `"default"`, `"org"`, `"mindmap"` or `"pert"`. To apply the necessary mode, specify the corresponding value of the `type` property:
-- **type:"default"** is used to visualize relations between some entities
+- `type:"default"` is used to visualize relations between some entities
-- **type:"org"** is used to show the structure of a group of people by presenting their relations in a hierarchical order
+- `type:"org"` is used to show the structure of a group of people by presenting their relations in a hierarchical order
-- **type:"mindmap"** is used to arrange information on some topic by representing the main concept surrounded by associated ideas
+- `type:"mindmap"` is used to arrange information on some topic by representing the main concept surrounded by associated ideas
-- **type:"pert"** is used to show the sequences of tasks and projects, and visualize connections between them. This type of diagram is also useful in estimating the critical path and project planning
+- `type:"pert"` is used to show the sequences of tasks and projects, and visualize connections between them. This type of diagram is also useful in estimating the critical path and project planning
**Change log**:
-- The **"pert"** type was added in v6.1
+- The `"pert"` type was added in v6.1
**Related articles**:
-- [Overview](../../../)
-- [How to start with Diagram](../../../guides/diagram/initialization/)
+- [Overview](/)
+- [How to start with Diagram](guides/diagram/initialization.md)
diff --git a/docs/api/diagram/typeconfig_property.md b/docs/api/diagram/typeconfig_property.md
index 2af6e6627..795c9b33d 100644
--- a/docs/api/diagram/typeconfig_property.md
+++ b/docs/api/diagram/typeconfig_property.md
@@ -50,11 +50,11 @@ The `typeConfig` object can include one of the following parameters:
- for the mindmap mode:
- `direction` - (optional) sets the direction of the graph:
- - *"left"* - puts child shapes of the graph to the left of the root shape
- - *"right"* - puts child shapes of the graph to the right of the root shape
+ - `"left"` - puts child shapes of the graph to the left of the root shape
+ - `"right"` - puts child shapes of the graph to the right of the root shape
- `side` - (optional) an object which sets the mandatory direction for the specified child shapes. The object contains a set of *key:value* pairs where *key* is the direction of the shapes (left, right) and *value* is an array with the ids of the shapes
- for the PERT mode:
- - `dateFormat` - (optional) sets the format of rendering dates in the shapes of the **task** type. Affects rendering of dates in the user interface
+ - `dateFormat` - (optional) sets the format of rendering dates in the shapes of the `task` type. Affects rendering of dates in the user interface
:::tip
You can use either the `direction` attribute or the `side` one for the diagram in the mindmap mode. Don't use both of them at the same time!
@@ -105,7 +105,7 @@ const diagram = new dhx.Diagram("diagram_container", {
- The `dateFormat` property for the PERT mode was added in v6.1
- Added in v3.1.
-**Related articles**: [Arrangement of shapes in the mindmap mode of Diagram](../../../guides/diagram/configuration/#arranging-shapes-in-the-mindmap-mode-of-diagram)
+**Related articles**: [Arrangement of shapes in the mindmap mode of Diagram](guides/diagram/configuration.md#arranging-shapes-in-the-mindmap-mode-of-diagram)
**Related samples**:
diff --git a/docs/api/diagram_editor/copymanager/methods/copy_method.md b/docs/api/diagram_editor/copymanager/methods/copy_method.md
index 34db1ce73..68857dd51 100644
--- a/docs/api/diagram_editor/copymanager/methods/copy_method.md
+++ b/docs/api/diagram_editor/copymanager/methods/copy_method.md
@@ -11,7 +11,7 @@ description: You can learn about the copy method of copy manager in the document
@short: Copies selected elements or elements specified by ids
:::note
-The `copy()` method works only if the Diagram Editor is initialized in the **default** mode.
+The `copy()` method works only if the Diagram Editor is initialized in the `default` mode.
:::
### Usage
diff --git a/docs/api/diagram_editor/copymanager/methods/paste_method.md b/docs/api/diagram_editor/copymanager/methods/paste_method.md
index f84c09e61..ee9293cb2 100644
--- a/docs/api/diagram_editor/copymanager/methods/paste_method.md
+++ b/docs/api/diagram_editor/copymanager/methods/paste_method.md
@@ -11,7 +11,7 @@ description: You can learn about the paste method of copy manager in the documen
@short: Creates new elements identical to the elements passed by the "copy()" method
:::note
-The `paste()` method works only if the Diagram Editor is initialized in the **default** mode.
+The `paste()` method works only if the Diagram Editor is initialized in the `default` mode.
:::
### Usage
diff --git a/docs/api/diagram_editor/editbar/api_overview.md b/docs/api/diagram_editor/editbar/api_overview.md
index db4e95137..949cdf0ad 100644
--- a/docs/api/diagram_editor/editbar/api_overview.md
+++ b/docs/api/diagram_editor/editbar/api_overview.md
@@ -6,7 +6,7 @@ description: You can check a Editbar overview in the documentation of the DHTMLX
# Editbar API overview
-[Editbar](/guides/diagram_editor/editbar/) is a part of the Diagram Editor that contains controls for managing Diagram items (shapes, lines, groups, etc). Use the `editbar` property of the [`view`](/api/diagram_editor/editor/config/view_property/) configuration object to show, hide and configure the Editbar. There are two ways of initialization you can choose from:
+[Editbar](guides/diagram_editor/editbar.md) is a part of the Diagram Editor that contains controls for managing Diagram items (shapes, lines, groups, etc). Use the `editbar` property of the [`view`](api/diagram_editor/editor/config/view_property.md) configuration object to show, hide and configure the Editbar. There are two ways of initialization you can choose from:
- creating the default Editbar by using the `editbar:true` setting:
diff --git a/docs/api/diagram_editor/editbar/basic_controls/avatar.md b/docs/api/diagram_editor/editbar/basic_controls/avatar.md
index ff02cca9c..95b7e460d 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/avatar.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/avatar.md
@@ -8,7 +8,7 @@ description: You can explore the Avatar control of Editbar in the documentation
@short: The basic control for uploading of images.
-
+
## Usage
@@ -59,8 +59,8 @@ description: You can explore the Avatar control of Editbar in the documentation
### Basic properties
-- `type` - (required) the type of a control. Set it to *"avatar"*
-- `key` - (optional) the name of the specified/modified property in the object of a Diagram item. *"img"* by default
+- `type` - (required) the type of a control. Set it to `"avatar"`
+- `key` - (optional) the name of the specified/modified property in the object of a Diagram item. `"img"` by default
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `target` - (optional) sets an URL to the server-side script that will process file upload, the property is required when an image is sent to the server via the control
:::note
@@ -75,16 +75,16 @@ While loading an image and sending it to the server via the `target` property, n
- `placeholder` - (optional) allows setting a text to be visible when there is no image uploaded, doesn't work together with the `preview` property
- `preview` - (optional) specifies the absolute path to the preview image. The preview image is visible, when an image is not uploaded
- `alt` - (optional) sets the attribute of the <img> tag - an alternative text when there is no image uploaded
-- `size` - (optional) allows setting one of the three basic control's sizes: *"small"* | *"medium"* | *"large"* , or applying a custom size in px. *"medium"* by default
+- `size` - (optional) allows setting one of the three basic control's sizes: `"small"` | `"medium"` | `"large"` , or applying a custom size in px. `"medium"` by default
- `css` - (optional) adds style classes to a control
-- `width` - (optional) the width of a control. *"content"* by default
-- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. `"content"` by default
+- `height` - (optional) the height of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of the Avatar control
- `label` - (optional) specifies a label for the control
- `labelWidth` - (optional) sets the label width of the control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
- `accept` - (optional) allows specifying the type/extension of the selected file. *"image/*"* by default. [Check details](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept)
-- `fieldName` - (optional) sets the file field name in the form data sent to the server. *"file"* by default
+- `fieldName` - (optional) sets the file field name in the form data sent to the server. `"file"` by default
- `autosend` - (optional) enables/disables automatic sending of an added file. *false* by default
- `params` - (optional) adds extra parameters for sending an XMLHttpRequest
- `headerParams` - (optional) provides additional parameters for Request Headers
diff --git a/docs/api/diagram_editor/editbar/basic_controls/button.md b/docs/api/diagram_editor/editbar/basic_controls/button.md
index 51a08d049..e3fa63196 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/button.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/button.md
@@ -8,7 +8,7 @@ description: You can explore the Button control of Editbar in the documentation
@short: The basic button control that can have an icon.
-
+
## Usage
@@ -42,20 +42,20 @@ description: You can explore the Button control of Editbar in the documentation
### Basic properties
-- `type` - (required) the type of a control. Set it to *"button"*
+- `type` - (required) the type of a control. Set it to `"button"`
- `text` - (optional) the text label of a button
- `css` - (optional) adds style classes to a control
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a control is hidden. *false* by default
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a button control
- `circle` - (optional) makes the corners of a button round. *false* by default
-- `color` - (optional) defines the color scheme of a button: *"danger"* | *"secondary"* | *"primary"* | *"success"*. *"primary"* by default
+- `color` - (optional) defines the color scheme of a button: `"danger"` | `"secondary"` | `"primary"` | `"success"`. `"primary"` by default
- `full` - (optional) extends a button to the full width of the Editbar. *false* by default
- `icon` - (optional) sets the CSS class of an icon displayed inside the button
-- `size` - (optional) defines the size of a button: *"small"* | *"medium"*. *"medium"* by default
-- `view` - (optional) defines the look of a button: *"flat"* | *"link"*. *"flat"* by default
+- `size` - (optional) defines the size of a button: `"small"` | `"medium"`. `"medium"` by default
+- `view` - (optional) defines the look of a button: `"flat"` | `"link"`. `"flat"` by default
### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/checkbox.md b/docs/api/diagram_editor/editbar/basic_controls/checkbox.md
index ffebe728c..e7e805caf 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/checkbox.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/checkbox.md
@@ -8,7 +8,7 @@ description: You can explore the Checkbox control of Editbar in the documentatio
@short: The basic control for displaying the specified value or change it to the opposite one.
-
+
## Usage
@@ -44,18 +44,18 @@ The control can be used both with the *boolean* value and the *string* one, if t
### Basic properties
-- `type` - (required) the type of a control. Set it to *"checkbox"*
+- `type` - (required) the type of a control. Set it to `"checkbox"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `text` - (optional) the text value of a control. It's placed to the right of the control
- `value` - (optional) the value of a checkbox
- `css` - (optional) adds style classes to a control
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a checkbox is hidden. *false* by default
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a Checkbox control
- `label` - (optional) specifies a label for a control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
- `labelWidth` - (optional) sets the width of the label of a control
### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/checkboxgroup.md b/docs/api/diagram_editor/editbar/basic_controls/checkboxgroup.md
index 1198e9782..a576df109 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/checkboxgroup.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/checkboxgroup.md
@@ -8,7 +8,7 @@ description: You can explore the CheckboxGroup control of Editbar in the documen
@short: The basic control for creating groups of checkboxes.
-
+
## Usage
@@ -71,7 +71,7 @@ The objects with the `checkbox` configuration inside the control can be used bot
#### Basic properties
-- `type` - (required) the type of a control. Set it to *"checkboxGroup"*
+- `type` - (required) the type of a control. Set it to `"checkboxGroup"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `options` - (required) an object with options of a CheckboxGroup. The object can contain the following attributes:
@@ -84,12 +84,12 @@ The objects with the `checkbox` configuration inside the control can be used bot
- `css` - (optional) adds style classes to a control
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (boolean) defines whether a CheckboxGroup is hidden. *false* by default
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a CheckboxGroup control
- `label` - (optional) specifies a label for the control
- `labelWidth` - (optional) sets the label width of the control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
#### Service properties and methods
@@ -127,8 +127,8 @@ Note that it's highly not recommended to redefine the service properties and met
- `css` - (optional) adds style classes to a control
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a checkbox is hidden. *false* by default
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a Checkbox control
## Example
diff --git a/docs/api/diagram_editor/editbar/basic_controls/colorpicker.md b/docs/api/diagram_editor/editbar/basic_controls/colorpicker.md
index cc33529e9..8b7c46ea6 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/colorpicker.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/colorpicker.md
@@ -8,7 +8,7 @@ description: You can explore the Colorpicker control of Editbar in the documenta
@short: The basic control for selecting a color.
-
+
## Usage
@@ -51,25 +51,25 @@ description: You can explore the Colorpicker control of Editbar in the documenta
### Basic properties
-- `type` - (required) the type of a control. Set it to *"colorpicker"*
+- `type` - (required) the type of a control. Set it to `"colorpicker"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `css` - (optional) adds style classes to a control
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a control is hidden. *false* by default
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a Colorpicker control
- `customColors` - (optional) shows a section with custom colors in the bottom part of the Colorpicker
- `grayShades` - (optional) defines whether the section with gray shades is displayed in the palette. *true* by default
- `icon` - (optional) the CSS class of an icon from the used icon font
-- `mode` - (optional) the mode of a control: *"palette"* | *"picker"*. *"palette"* by default
+- `mode` - (optional) the mode of a control: `"palette"` | `"picker"`. `"palette"` by default
- `palette` - (optional) contains arrays of colors you want to be shown in a colorpicker
- `paletteOnly` - (optional) defines whether Colorpicker is shown only in the palette mode. *false* by default
- `pickerOnly` - (optional) defines whether Colorpicker is shown only in the picker mode. *false* by default
- `placeholder` - (optional) a tip for the input
- `label` - (optional) specifies a label for a control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
- `labelWidth` - (optional) sets the width of the label of a control
### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/combo.md b/docs/api/diagram_editor/editbar/basic_controls/combo.md
index 6d892375e..0353fd32b 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/combo.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/combo.md
@@ -8,7 +8,7 @@ description: You can explore the Combo control of Editbar in the documentation o
@short: The basic input control that represents an advanced editable select box with a set of options.
-
+
## Usage
@@ -70,15 +70,15 @@ Option configuration object inside Combo:
#### Basic properties
-- `type` - (required) the type of a control. Set it to *"combo"*
+- `type` - (required) the type of a control. Set it to `"combo"`
- `options` - (required) an array of Combo options, each option can be set as a *string* or as an *object* with a set of `key:value` pairs - [attributes of options and their values](#option-properties)
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `css` - (optional) adds style classes to a control
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a combo is hidden. *false* by default
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a Combo control
- `filter` - (optional) sets a custom function for filtering Combo options. [Check the details](https://docs.dhtmlx.com/suite/combobox/customization/#custom-filter-for-options)
- `eventHandlers` - (optional) adds event handlers to HTML elements of a custom template of Combo items. [Check the details](https://docs.dhtmlx.com/suite/combobox/api/combobox_eventhandlers_config/)
@@ -92,7 +92,7 @@ Option configuration object inside Combo:
- `template` - (optional) sets a template of displaying options in the popup list
- `virtual` - (optional) enables dynamic loading of data on scrolling the list of options. *false* by default
- `label` - (optional) specifies a label for a control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
- `labelWidth` - (optional) sets the width of the label of a control
#### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/container.md b/docs/api/diagram_editor/editbar/basic_controls/container.md
index ddc73b23e..695ac5de8 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/container.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/container.md
@@ -8,7 +8,7 @@ description: You can explore the Container control of Editbar in the documentati
@short: The basic control for attaching an HTML code.
-
+
## Usage
@@ -39,18 +39,18 @@ description: You can explore the Container control of Editbar in the documentati
### Basic properties
-- `type` - (required) the type of a control. Set it to *"container"*
+- `type` - (required) the type of a control. Set it to `"container"`
- `html` - (required) the HTML content of a control
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `css` - (optional) adds style classes to a control string
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a control is hidden. *false* by default
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a control
- `label` - (optional) specifies a label for the control
- `labelWidth` - (optional) sets the label width of the control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
#### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/datepicker.md b/docs/api/diagram_editor/editbar/basic_controls/datepicker.md
index b815b2528..c0f061edd 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/datepicker.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/datepicker.md
@@ -8,7 +8,7 @@ description: You can explore the Datepicker control of Editbar in the documentat
@short: The basic control for selecting a date.
-
+
## Usage
@@ -56,31 +56,31 @@ description: You can explore the Datepicker control of Editbar in the documentat
### Basic properties
-- `type` - (required) the type of a control. Set it to *"datepicker"*
+- `type` - (required) the type of a control. Set it to `"datepicker"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `css` - (optional) adds style classes to a control string
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a control is hidden. *false* by default
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a Datepicker control
- `date` - (optional) defines the date that will be opened when the calendar is created
- `dateFormat` - (optional) defines the format of dates in the calendar. *"%d/%m/%y"* by default. The date format must include delimiters (space or symbol), otherwise an error will be thrown
- `disabledDates` - (optional) allows disabling some date intervals, day labels are dimmed
- `icon` - (optional) the CSS class of an icon from the used icon font
- `mark` - (optional) allows adding a CSS class to specific days
-- `mode` - (optional) specifies the mode of displaying a calendar: *"calendar"* | *"month"* | *"year"*. *"calendar"* by default
+- `mode` - (optional) specifies the mode of displaying a calendar: `"calendar"` | `"month"` | `"year"`. `"calendar"` by default
- `placeholder` - (optional) a tip for the input
- `thisMonthOnly` - (optional) hides dates of the previous/next months relative to the currently displayed one
- `timeFormat` - (optional) defines the time format of a timepicker, 12-hour or 24-hour: *12* | *24*. *24* by default
- `timePicker` - (optional) adds a timepicker into a calendar. *false* by default
-- `valueFormat` - (optional) defines the format of the value that will be returned while getting the current value of the control: *"string"* | *"Date"*. *"string"* by default
+- `valueFormat` - (optional) defines the format of the value that will be returned while getting the current value of the control: `"string"` | `"Date"`. `"string"` by default
- `weekNumbers` - (optional) defines whether to show the numbers of weeks, *false* by default
-- `weekStart` - (optional) sets the starting day of the week: *"saturday"* | *"monday"* | *"sunday"*. *"sunday"* by default
+- `weekStart` - (optional) sets the starting day of the week: `"saturday"` | `"monday"` | `"sunday"`. `"sunday"` by default
- `label` - (optional) specifies a label for the control
- `labelWidth` - (optional) sets the label width of the control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/fieldset.md b/docs/api/diagram_editor/editbar/basic_controls/fieldset.md
index 5779f6a84..7aaab3c9c 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/fieldset.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/fieldset.md
@@ -6,9 +6,9 @@ description: You can explore the Fieldset control of Editbar in the documentatio
# Fieldset
-@short: The basic control for creating complex controls with the help of the [`controls`](/api/diagram_editor/editbar/config/controls_property/) or the [`properties`](/api/diagram_editor/editbar/config/properties_property/) Editbar configuration options.
+@short: The basic control for creating complex controls with the help of the [`controls`](api/diagram_editor/editbar/config/controls_property.md) or the [`properties`](api/diagram_editor/editbar/config/properties_property.md) Editbar configuration options.
-
+
## Usage
@@ -54,17 +54,17 @@ The `rows` and `cols` properties may include an array of objects of the specifie
### Basic properties
-- `type` - (required) the type of a control. Set it to *"fieldset"*
+- `type` - (required) the type of a control. Set it to `"fieldset"`
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a control is hidden. *false* by default
- `css` - (optional) the name of a CSS class(es) applied to the control group
-- `width` - (optional) sets the width of the control group. *"content"* by default
-- `height` - (optional) sets the height of the control group. *"content"* by default
+- `width` - (optional) sets the width of the control group. `"content"` by default
+- `height` - (optional) sets the height of the control group. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group
-- `align` - (optional) sets the alignment of controls inside the control group. *"start"* by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"start"` by default
- `label` - (optional) specifies a label for a control
-- `labelAlignment` - (optional) defines the position of the label: *"left"* | *"right"* | *"center"*. *"left"* by default
+- `labelAlignment` - (optional) defines the position of the label: `"left"` | `"right"` | `"center"`. `"left"` by default
- `rows` - (optional) arranges controls inside the control group vertically
- `cols` - (optional) arranges controls inside the control group horizontally
diff --git a/docs/api/diagram_editor/editbar/basic_controls/input.md b/docs/api/diagram_editor/editbar/basic_controls/input.md
index 6a4013b22..45f70c039 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/input.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/input.md
@@ -8,7 +8,7 @@ description: You can explore the Input control of Editbar in the documentation o
@short: The basic input field control for typing some text inside.
-
+
## Usage
@@ -51,18 +51,18 @@ description: You can explore the Input control of Editbar in the documentation o
### Basic properties
-- `type` - (required) the type of a control. Set it to *"input"*
+- `type` - (required) the type of a control. Set it to `"input"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `css` - (optional) adds style classes to a control
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a control is hidden. *false* by default
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of an input control
- `icon` - (optional) the CSS class of an [icon](https://docs.dhtmlx.com/suite/helpers/icon/) from the used icon font
-- `inputType` - (optional) sets the type of an input: *"text"* | *"password"* | *"number"*. *"text"* by default
-Use the "password" value to specify a field for entering a password
+- `inputType` - (optional) sets the type of an input: `"text"` | `"password"` | `"number"`. `"text"` by default
+Use the `"password"` value to specify a field for entering a password
- `max` - (optional) - the [maximal value allowed in the input](https://docs.dhtmlx.com/suite/form/work_with_form/#minimal-and-maximal-values). The attribute works only with the input type: *"number"*
- `maxlength` - (optional) the maximum [number of characters allowed in the input](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters). The attribute works with the following input types: *"text", "password"*
- `min` - (optional) [the minimal value allowed in the input](https://docs.dhtmlx.com/suite/form/work_with_form/#minimal-and-maximal-values). The attribute works only with the input type: *"number"*
@@ -71,7 +71,7 @@ Use the "password" value to specify a field for entering a password
- `readOnly` - (optional) defines whether an input is readonly. *false* by default
- `label` - (optional) specifies a label for the control
- `labelWidth` - (optional) sets the label width of the control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/radiogroup.md b/docs/api/diagram_editor/editbar/basic_controls/radiogroup.md
index e206572ce..3337833e3 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/radiogroup.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/radiogroup.md
@@ -8,7 +8,7 @@ description: You can explore the RadioGroup control of Editbar in the documentat
@short: The basic control for creating groups of Radio buttons.
-
+
## Usage
@@ -69,7 +69,7 @@ Radio button configuration object inside RadioGroup:
#### Basic properties
-- `type` - (required) the type of a control. Set it to "radioGroup"
+- `type` - (required) the type of a control. Set it to `"radioGroup"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `options` - (required) an object with options of a RadioGroup. The object can contain the following attributes:
@@ -82,12 +82,12 @@ Radio button configuration object inside RadioGroup:
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (boolean) defines whether a RadioGroup is hidden. *false* by default
- `css` - (optional) adds style classes to a control
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a RadioGroup control
- `label` - (optional) specifies a label for the control
- `labelWidth` - (optional) sets the label width of the control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
#### Service properties and methods
@@ -124,8 +124,8 @@ Note that it's highly not recommended to redefine the service properties and met
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a radio button is hidden. *false* by default
- `css` - (optional) adds style classes to a control
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a radio button control
## Example
diff --git a/docs/api/diagram_editor/editbar/basic_controls/select.md b/docs/api/diagram_editor/editbar/basic_controls/select.md
index 7d2213f82..03251549e 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/select.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/select.md
@@ -8,7 +8,7 @@ description: You can explore the Select control of Editbar in the documentation
@short: The basic control that represents an advanced select box with a set of options to choose from.
-
+
## Usage
@@ -56,20 +56,20 @@ Option configuration object inside Select:
#### Basic properties
-- `type` - (required) the type of a control. Set it to *"select"*
+- `type` - (required) the type of a control. Set it to `"select"`
- `options` - (required) an array of Select options, each option can be set as a *string* or as an *object* with a set of `key:value` pairs - [attributes of options and their values](#option-properties)
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `css` - (optional) adds style classes to a control
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (boolean) defines whether a Select is hidden. *false* by default
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a Select control
- `icon` - (optional) the CSS class of an [icon](https://docs.dhtmlx.com/suite/helpers/icon/) from the used icon font
- `label` - (optional) specifies a label for the control
- `labelWidth` - (optional) sets the label width of the control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
#### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/slider.md b/docs/api/diagram_editor/editbar/basic_controls/slider.md
index 7ea9f067c..61bf9e5b6 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/slider.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/slider.md
@@ -8,7 +8,7 @@ description: You can explore the Slider control of Editbar in the documentation
@short: The basic control for selecting a numeric value by moving a thumb along a line with a fixed set of options.
-
+
## Usage
@@ -53,20 +53,20 @@ description: You can explore the Slider control of Editbar in the documentation
### Basic properties
-- `type` - (required) the type of a control. Set it to *"slider"*
+- `type` - (required) the type of a control. Set it to `"slider"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
- `hidden` - (optional) defines whether a control is hidden. *false* by default
- `css` - (optional) adds style classes to a control
-- `height` - (optional) the height of a control. *"content"* by default
-- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. `"content"` by default
+- `width` - (optional) the width of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of a slider control
- `inverse` - (optional) enables/disables the inverse slider mode. *false* by default
- `majorTick` - (optional) sets interval of rendering numeric values on the slider scale
- `max` - (optional) the maximal value of slider. *100* by default
- `min` - (optional) the minimal value of slider. *0* by default
-- `mode` - (optional) the direction of the slider scale. *"horizontal"* by default
+- `mode` - (optional) the direction of the slider scale. `"horizontal"` by default
- `range` - (optional) enables/disables the possibility to select a range of values on the slider. *false* by default
- `step` - (optional) the step the slider thumb will be moved with. *1* by default
- `tick` - (optional) sets the interval of steps for rendering the slider scale
diff --git a/docs/api/diagram_editor/editbar/basic_controls/spacer.md b/docs/api/diagram_editor/editbar/basic_controls/spacer.md
index a43249fb0..55c6c9480 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/spacer.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/spacer.md
@@ -18,7 +18,7 @@ description: You can explore the Spacer control of Editbar in the documentation
## Description
-- `type` - (required) the type of a control. Set it to *"spacer"*
+- `type` - (required) the type of a control. Set it to `"spacer"`
## Example
diff --git a/docs/api/diagram_editor/editbar/basic_controls/textarea.md b/docs/api/diagram_editor/editbar/basic_controls/textarea.md
index be6c575b6..780ad131b 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/textarea.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/textarea.md
@@ -8,7 +8,7 @@ description: You can explore the Textarea control of Editbar in the documentatio
@short: The basic control for entering a simple multi-line text.
-
+
## Usage
@@ -47,14 +47,14 @@ description: You can explore the Textarea control of Editbar in the documentatio
### Basic properties
-- `type` - (required) the type of a control. Set it to *"textarea"*
+- `type` - (required) the type of a control. Set it to `"textarea"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `css` - (optional) adds style classes to a control
- `hidden` - (optional) defines whether a control is hidden. *false* by default
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
-- `width` - (optional) the width of a control. *"content"* by default
-- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. `"content"` by default
+- `height` - (optional) the height of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of the Textarea control
- `maxlength` - (optional) the maximum [number of characters allowed in the textarea](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)
- `minlength` - (optional) the minimum [number of characters allowed in the textarea](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)
@@ -62,7 +62,7 @@ description: You can explore the Textarea control of Editbar in the documentatio
- `readOnly` - (optional) defines whether a textarea is readonly. *false* by default
- `label` - (optional) specifies a label for the control
- `labelWidth` - (optional) sets the label width of the control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/timepicker.md b/docs/api/diagram_editor/editbar/basic_controls/timepicker.md
index c4a975e0a..aefff7dc1 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/timepicker.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/timepicker.md
@@ -8,7 +8,7 @@ description: You can explore the Timepicker control of Editbar in the documentat
@short: The basic control for selecting a time value either by moving handles along track bars or by entering hour and minutes values directly into related inputs.
-
+
## Usage
@@ -48,23 +48,23 @@ description: You can explore the Timepicker control of Editbar in the documentat
### Basic properties
-- `type` - (required) the type of a control. Set it to *"timepicker"*
+- `type` - (required) the type of a control. Set it to `"timepicker"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `wrap` - (optional) allows displaying the external wrapping. *false* by default
- `css` - (optional) adds style classes to a control
- `hidden` - (optional) defines whether a control is hidden. *false* by default
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
-- `width` - (optional) the width of a control. *"content"* by default
-- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. `"content"` by default
+- `height` - (optional) the height of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of the Timepicker control
- `controls` - (optional) defines whether a timepicker is equipped with the Close and Save buttons. *false* by default
- `icon` - (optional) the CSS class of an icon from the used icon font
- `placeholder` - (optional) a tip for the input
- `timeFormat` - (optional) defines what clock format is activated: the 12-hour or 24-hour one. Set the property to *12* or *24*, correspondingly. *24* by default
-- `valueFormat` - (optional) defines the format of the value to be applied when working with the events of the timepicker control: *"string"* | *"timeObject"*. *"string"* by default
+- `valueFormat` - (optional) defines the format of the value to be applied when working with the events of the timepicker control: `"string"` | `"timeObject"`. `"string"` by default
- `label` - (optional) specifies a label for the control
- `labelWidth` - (optional) sets the label width of the control
-- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+- `labelPosition` - (optional) defines the position of a label: `"left"` | `"top"`. `"top"` by default
### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/toggle.md b/docs/api/diagram_editor/editbar/basic_controls/toggle.md
index f1903faf2..6af897cd3 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/toggle.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/toggle.md
@@ -8,7 +8,7 @@ description: You can explore the Toggle control of Editbar in the documentation
@short: The basic control that represents a special button which can change its state from the pressed to the unpressed one when clicked.
-
+
## Usage
@@ -46,7 +46,7 @@ The control can be used both with the *boolean* value and the *string* one, if t
### Basic properties
-- `type` - (required) the type of a control. Set it to *"toggle"*
+- `type` - (required) the type of a control. Set it to `"toggle"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `hidden` - (optional) defines whether a control is hidden. *false* by default
- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
@@ -57,8 +57,8 @@ The control can be used both with the *boolean* value and the *string* one, if t
- `offIcon` - (optional) sets the CSS class of an icon that will be rendered in the unselected (unpressed) state of the toggle
- `value` - (optional) specifies the value in the selected (pressed) state. If not defined, the control is used with the *boolean* value
- `css` - (optional) adds style classes to a control
-- `width` - (optional) the width of a control. *"content"* by default
-- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. `"content"` by default
+- `height` - (optional) the height of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of the Toggle control
### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/basic_controls/togglegroup.md b/docs/api/diagram_editor/editbar/basic_controls/togglegroup.md
index d22f55229..6d1646623 100644
--- a/docs/api/diagram_editor/editbar/basic_controls/togglegroup.md
+++ b/docs/api/diagram_editor/editbar/basic_controls/togglegroup.md
@@ -8,7 +8,7 @@ description: You can explore the ToggleGroup control of Editbar in the documenta
@short: The basic control for creating groups of toggle buttons.
-
+
## Usage
@@ -60,7 +60,7 @@ The objects with the `toggle` configuration inside the control can be used both
#### Basic properties
-- `type` - (required) the type of a control. Set it to *"toggleGroup"*
+- `type` - (required) the type of a control. Set it to `"toggleGroup"`
- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
- `options` - (required) an array of ToggleGroup options, each option is set as an *object* with a set of `key:value` pairs - [attributes of options and their values](#toggle-properties)
- `hidden` - (optional) defines whether a ToggleGroup is hidden. *false* by default
@@ -68,8 +68,8 @@ The objects with the `toggle` configuration inside the control can be used both
- `full` - (optional) defines whether the ToggleGroup will be extended to the width specified by the `width` property. *false* by default
- `gap` - (optional) sets an offset between the elements (buttons) of an option. *0* by default
- `css` - (optional) adds style classes to a control
-- `width` - (optional) the width of a control. *"content"* by default
-- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. `"content"` by default
+- `height` - (optional) the height of a control. `"content"` by default
- `padding` - (optional) sets padding between a cell and a border of the ToggleGroup control
#### Service properties and methods
diff --git a/docs/api/diagram_editor/editbar/complex_controls/arrange.md b/docs/api/diagram_editor/editbar/complex_controls/arrange.md
index 97c26bb1a..53e461c03 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/arrange.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/arrange.md
@@ -4,17 +4,19 @@ title: Editbar Complex Controls - Arrange
description: You can explore the Arrange control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Arrange
@short: The complex control for editing width, height, rotation angle, x and y properties of a Diagram element
.default})
:::info
-The **Arrange** control is available for all elements (excluding the **line** and **lineTitle** elements) in the *default* mode of the Diagram editor.
+The **Arrange** control is available for all elements (excluding the `line` and `lineTitle` elements) in the *default* mode of the Diagram editor.
:::
## Usage
@@ -45,26 +47,26 @@ The **Arrange** control is available for all elements (excluding the **line** an
### Basic properties
-- `type` - (required) the type of a control. Set it to *"arrange"*
+- `type` - (required) the type of a control. Set it to `"arrange"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*)
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the control label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"start"* by default
+- `labelAlignment` - (optional) defines the position of the control label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"start"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
### Service properties
-- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview/) within a complex control. You can configure the following elements of the **Arrange** control based on the basic controls:
- - `x` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element position on the x-axis
- - `y` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element position on the y-axis
- - `width` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element width (px)
- - `height` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element height (px)
- - `angle` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element rotation angle
+- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Arrange** control based on the basic controls:
+ - `x` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element position on the x-axis
+ - `y` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element position on the y-axis
+ - `width` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element width (px)
+ - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element height (px)
+ - `angle` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element rotation angle
## Example
diff --git a/docs/api/diagram_editor/editbar/complex_controls/border.md b/docs/api/diagram_editor/editbar/complex_controls/border.md
index 4db8b46a1..e780920a0 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/border.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/border.md
@@ -4,17 +4,19 @@ title: Editbar Complex Controls - Border
description: You can explore the Border control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Border
@short: The complex control for displaying and modifying borders of a Diagram element
.default})
:::info
-The **Border** control is not available for the **lineTitle** element.
+The **Border** control is not available for the `lineTitle` element.
:::
## Usage
@@ -45,24 +47,24 @@ The **Border** control is not available for the **lineTitle** element.
### Basic properties
-- `type` - (required) the type of a control. Set it to *"border"*
+- `type` - (required) the type of a control. Set it to `"border"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"between"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"between"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
### Service properties
-- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Border** control based on the basic controls:
- - `stroke` - ([colorpicker](/api/diagram_editor/editbar/basic_controls/colorpicker)) sets the border color
- - `strokeType` - ([combo](/api/diagram_editor/editbar/basic_controls/combo)) sets the border type
- - `strokeWidth` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the border width
+- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Border** control based on the basic controls:
+ - `stroke` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) sets the border color
+ - `strokeType` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) sets the border type
+ - `strokeWidth` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the border width
## Example
diff --git a/docs/api/diagram_editor/editbar/complex_controls/gridstep.md b/docs/api/diagram_editor/editbar/complex_controls/gridstep.md
index 823fb26fd..b2f7d046d 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/gridstep.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/gridstep.md
@@ -4,12 +4,14 @@ title: Editbar Complex Controls - Grid step
description: You can explore the Grid step control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Grid step
@short: The complex control for displaying and modifying a grid step of the Diagram editor
.default})
@@ -38,15 +40,15 @@ description: You can explore the Grid step control of Editbar in the documentati
### Basic properties
-- `type` - (required) the type of a control. Set it to *"gridStep"*
+- `type` - (required) the type of a control. Set it to `"gridStep"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
- `readOnly` - (optional) sets the readonly mode for the control. *false* by default
- `wrap` - (optional) allows displaying the external wrapping. *true* by default
diff --git a/docs/api/diagram_editor/editbar/complex_controls/header.md b/docs/api/diagram_editor/editbar/complex_controls/header.md
index afc38639e..5c56edf7f 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/header.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/header.md
@@ -4,17 +4,19 @@ title: Editbar Complex Controls - Header
description: You can explore the Header control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Header
-@short: The complex control for displaying and modifying the header of "group" and "swimlane" elements of the Diagram editor
+@short: The complex control for displaying and modifying the header of `"group"` and `"swimlane"` elements of the Diagram editor
.default})
:::info
-The **Header** control is available only for **group** and **swimlane** elements in the *default* mode of the Diagram editor.
+The **Header** control is available only for `group` and `swimlane` elements in the *default* mode of the Diagram editor.
:::
## Usage
@@ -42,16 +44,16 @@ The **Header** control is available only for **group** and **swimlane** elements
### Basic properties
-- `type` - (required) the type of a control. Set it to *"header"*
+- `type` - (required) the type of a control. Set it to `"header"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"start"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"start"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frames. *false* by default
## Example
diff --git a/docs/api/diagram_editor/editbar/complex_controls/headercommon.md b/docs/api/diagram_editor/editbar/complex_controls/headercommon.md
index 81ea881ff..11755027b 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/headercommon.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/headercommon.md
@@ -4,17 +4,19 @@ title: Editbar Complex Controls - Header common
description: You can explore the Header common control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Header common
@short: The complex control for for changing visibility, color, and height of the group header
.default})
:::info
-The **Header common** control is available only for **group** and **swimlane** elements in the *default* mode of the Diagram editor.
+The **Header common** control is available only for `group` and `swimlane` elements in the *default* mode of the Diagram editor.
:::
## Usage
@@ -45,24 +47,24 @@ The **Header common** control is available only for **group** and **swimlane** e
### Basic properties
-- `type` - (required) the type of a control. Set it to *"headerCommon"*
+- `type` - (required) the type of a control. Set it to `"headerCommon"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"between"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"between"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
### Service properties
-- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Header common** control based on the basic controls:
- - `enable` - ([toggle](/api/diagram_editor/editbar/basic_controls/toggle)) toggles the group header visibility
- - `fill` - ([colorpicker](/api/diagram_editor/editbar/basic_controls/colorpicker)) sets the group header background color
- - `height` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the group header height (px)
+- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Header common** control based on the basic controls:
+ - `enable` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) toggles the group header visibility
+ - `fill` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) sets the group header background color
+ - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the group header height (px)
## Example
diff --git a/docs/api/diagram_editor/editbar/complex_controls/headerposition.md b/docs/api/diagram_editor/editbar/complex_controls/headerposition.md
index c95c80b58..e1aeabcb6 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/headerposition.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/headerposition.md
@@ -4,17 +4,19 @@ title: Editbar Complex Controls - Header position
description: You can explore the Header position control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Header position
@short: The complex control for changing position of the group header
.default})
:::info
-The **Header position** control is available only for **group** and **swimlane** elements in the *default* mode of the Diagram editor.
+The **Header position** control is available only for `group` and `swimlane` elements in the *default* mode of the Diagram editor.
:::
## Usage
@@ -45,22 +47,22 @@ The **Header position** control is available only for **group** and **swimlane**
### Basic properties
-- `type` - (required) the type of a control. Set it to *"headerPosition"*
+- `type` - (required) the type of a control. Set it to `"headerPosition"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"start"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"start"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
### Service properties
-- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following element of the **Header position** control based on the basic controls:
- - `position` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) - sets a position of the group header
+- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following element of the **Header position** control based on the basic controls:
+ - `position` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) - sets a position of the group header
## Example
diff --git a/docs/api/diagram_editor/editbar/complex_controls/lineshape.md b/docs/api/diagram_editor/editbar/complex_controls/lineshape.md
index 3605c1082..99a18e4c7 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/lineshape.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/lineshape.md
@@ -4,17 +4,19 @@ title: Editbar Complex Controls - Line shape
description: You can explore the Line shape control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Line shape
@short: The complex control for displaying and managing connectors
.default})
:::info
-The **Line shape** control is available only for the **line** element in the *default* mode of the Diagram editor.
+The **Line shape** control is available only for the `line` element in the *default* mode of the Diagram editor.
:::
## Usage
@@ -45,22 +47,22 @@ The **Line shape** control is available only for the **line** element in the *de
### Basic properties
-- `type` - (required) the type of a control. Set it to *"lineShape"*
+- `type` - (required) the type of a control. Set it to `"lineShape"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"between"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"between"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
### Service properties
-- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following element of the **Line shape** control based on the basic controls:
- - `connectType` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) sets the connector type
+- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following element of the **Line shape** control based on the basic controls:
+ - `connectType` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the connector type
## Example
diff --git a/docs/api/diagram_editor/editbar/complex_controls/pointerview.md b/docs/api/diagram_editor/editbar/complex_controls/pointerview.md
index 50c207288..618ecdbcb 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/pointerview.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/pointerview.md
@@ -4,17 +4,19 @@ title: Editbar Complex Controls - Pointer view
description: You can explore the Pointer view control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Pointer view
@short: The complex control for displaying and managing the connector arrows
.default})
:::info
-The **Pointer view** control is available only for the **line** element in the *default* mode of the Diagram editor.
+The **Pointer view** control is available only for the `line` element in the *default* mode of the Diagram editor.
:::
## Usage
@@ -45,23 +47,23 @@ The **Pointer view** control is available only for the **line** element in the *
### Basic properties
-- `type` - (required) the type of a control. Set it to *"pointerView"*
+- `type` - (required) the type of a control. Set it to `"pointerView"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"between"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"between"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
### Service properties
-- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Pointer view** control based on the basic controls:
- - `backArrow` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) sets the arrow type at the end of connector
- - `forwardArrow` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) sets the arrow type at the start of connector
+- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Pointer view** control based on the basic controls:
+ - `backArrow` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the arrow type at the end of connector
+ - `forwardArrow` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the arrow type at the start of connector
## Example
diff --git a/docs/api/diagram_editor/editbar/complex_controls/position.md b/docs/api/diagram_editor/editbar/complex_controls/position.md
index 07e0b01b6..0bf2dca0d 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/position.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/position.md
@@ -4,17 +4,19 @@ title: Editbar Complex Controls - Position
description: You can explore the Position control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Position
@short: The complex control for configuring the shape offset from the predefined algorithm on the X and Y axis
.default})
:::info
-The **Position** control is available only for the **shape** element in the *org* or *mindmap* modes of the Diagram editor.
+The **Position** control is available only for the `shape` element in the *org* or *mindmap* modes of the Diagram editor.
:::
## Usage
@@ -45,23 +47,23 @@ The **Position** control is available only for the **shape** element in the *org
### Basic properties
-- `type` - (required) the type of a control. Set it to *"position"*
+- `type` - (required) the type of a control. Set it to `"position"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"start"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"start"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
### Service properties
-- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview)) within a complex control. You can configure the following elements of the **Position** control based on the basic controls:
- - `dx` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the shape offset from the predefined algorithm on the x-axis
- - `dy` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the shape offset from the predefined algorithm on the y-axis
+- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md)) within a complex control. You can configure the following elements of the **Position** control based on the basic controls:
+ - `dx` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the shape offset from the predefined algorithm on the x-axis
+ - `dy` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the shape offset from the predefined algorithm on the y-axis
## Example
diff --git a/docs/api/diagram_editor/editbar/complex_controls/size.md b/docs/api/diagram_editor/editbar/complex_controls/size.md
index 1d0b27fca..55ac4aa2e 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/size.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/size.md
@@ -4,17 +4,19 @@ title: Editbar Complex Controls - Size
description: You can explore the Size control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Size
@short: The complex control for managing width and height of the Diagram elements
.default})
:::info
-The **Size** control is available only for the **shape**, **group** and **swimlane** elements of the Diagram editor.
+The **Size** control is available only for the `shape`, `group` and `swimlane` elements of the Diagram editor.
:::
## Usage
@@ -45,23 +47,23 @@ The **Size** control is available only for the **shape**, **group** and **swimla
### Basic properties
-- `type` - (required) the type of a control. Set it to *"size"*
+- `type` - (required) the type of a control. Set it to `"size"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"start"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"start"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
### Service properties
-- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Size** control based on the basic controls:
- - `width` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element width (px)
- - `height` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the Diagram element height (px)
+- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Size** control based on the basic controls:
+ - `width` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element width (px)
+ - `height` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the Diagram element height (px)
## Example
diff --git a/docs/api/diagram_editor/editbar/complex_controls/textalign.md b/docs/api/diagram_editor/editbar/complex_controls/textalign.md
index a9f2457e1..8db2c80ff 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/textalign.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/textalign.md
@@ -4,12 +4,14 @@ title: Editbar Complex Controls - Text align
description: You can explore the Text align control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Text align
@short: The complex control for managing the text alignment within the Diagram elements
.default})
@@ -41,23 +43,23 @@ description: You can explore the Text align control of Editbar in the documentat
### Basic properties
-- `type` - (required) the type of a control. Set it to *"textAlign"*
+- `type` - (required) the type of a control. Set it to `"textAlign"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"between"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"between"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
### Service properties
-- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Text align** control based on the basic controls:
- - `textAlign` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) sets the horizontal alignment of text
- - `textVerticalAlign` - ([toggleGroup](/api/diagram_editor/editbar/basic_controls/togglegroup)) sets the vertical alignment of text
+- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Text align** control based on the basic controls:
+ - `textAlign` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the horizontal alignment of text
+ - `textVerticalAlign` - ([toggleGroup](api/diagram_editor/editbar/basic_controls/togglegroup.md)) sets the vertical alignment of text
## Example
diff --git a/docs/api/diagram_editor/editbar/complex_controls/textstyle.md b/docs/api/diagram_editor/editbar/complex_controls/textstyle.md
index d61e668ad..2d2f295f8 100644
--- a/docs/api/diagram_editor/editbar/complex_controls/textstyle.md
+++ b/docs/api/diagram_editor/editbar/complex_controls/textstyle.md
@@ -4,12 +4,14 @@ title: Editbar Complex Controls - Text style
description: You can explore the Text style control of Editbar in the documentation of the the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Text style
@short: The complex control for managing the text style within the Diagram elements
.default})
@@ -41,26 +43,26 @@ description: You can explore the Text style control of Editbar in the documentat
### Basic properties
-- `type` - (required) the type of a control. Set it to *"textStyle"*
+- `type` - (required) the type of a control. Set it to `"textStyle"`
- `hidden` - (optional) defines whether the control is hidden. *false* by default
- `disabled` - (optional) defines whether the control is enabled (*false*) or disabled (*true*). *false* by default
- `css` - (optional) adds style classes to the control
-- `width` - (optional) the width of the control. *"content"* by default
-- `height` - (optional) the height of the control. *"content"* by default
+- `width` - (optional) the width of the control. `"content"` by default
+- `height` - (optional) the height of the control. `"content"` by default
- `padding` - (optional) sets the padding for the content inside the control group. *"0 16px"* by default
- `label` - (optional) specifies a label for the control
-- `labelAlignment` - (optional) defines the position of the label. *"left"* by default
-- `align` - (optional) sets the alignment of controls inside the control group. *"between"* by default
+- `labelAlignment` - (optional) defines the position of the label. `"left"` by default
+- `align` - (optional) sets the alignment of controls inside the control group. `"between"` by default
- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
### Service properties
-- `$properties` - (optional) allows you to override values of [basic controls](/api/diagram_editor/editbar/basic_controls_overview) within a complex control. You can configure the following elements of the **Text style** control based on the basic controls:
- - `fontSize` - ([combo](/api/diagram_editor/editbar/basic_controls/combo)) sets the font size
- - `lineHeight` - ([input](/api/diagram_editor/editbar/basic_controls/input)) sets the line height
- - `fontColor` - ([colorpicker](/api/diagram_editor/editbar/basic_controls/colorpicker)) sets the font color
- - `fontWeight` - ([toggle](/api/diagram_editor/editbar/basic_controls/toggle)) sets the font weight
- - `fontStyle` - ([toggle](/api/diagram_editor/editbar/basic_controls/toggle)) sets the font style
+- `$properties` - (optional) allows you to override values of [basic controls](api/diagram_editor/editbar/basic_controls_overview.md) within a complex control. You can configure the following elements of the **Text style** control based on the basic controls:
+ - `fontSize` - ([combo](api/diagram_editor/editbar/basic_controls/combo.md)) sets the font size
+ - `lineHeight` - ([input](api/diagram_editor/editbar/basic_controls/input.md)) sets the line height
+ - `fontColor` - ([colorpicker](api/diagram_editor/editbar/basic_controls/colorpicker.md)) sets the font color
+ - `fontWeight` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) sets the font weight
+ - `fontStyle` - ([toggle](api/diagram_editor/editbar/basic_controls/toggle.md)) sets the font style
## Example
diff --git a/docs/api/diagram_editor/editbar/config/controls_property.md b/docs/api/diagram_editor/editbar/config/controls_property.md
index 3fa9a0cef..bcc79f667 100644
--- a/docs/api/diagram_editor/editbar/config/controls_property.md
+++ b/docs/api/diagram_editor/editbar/config/controls_property.md
@@ -11,7 +11,7 @@ description: You can learn about the controls property of Editbar in the documen
@short: Optional. A set of configurations that defines one or several custom controls
:::info
-The `controls` property allows you to create custom **Editbar** controls based on [**Basic controls**](api/diagram_editor/editbar/basic_controls_overview.md) and/or [**Complex controls**](api/diagram_editor/editbar/complex_controls_overview.md). Use the [`properties`](api/diagram_editor/editbar/config/properties_property.md) property to apply the custom control(s) to the needed elements (shapes, groups, swimlanes, etc.).
+The `controls` property allows you to create custom `Editbar` controls based on [**Basic controls**](api/diagram_editor/editbar/basic_controls_overview.md) and/or [**Complex controls**](api/diagram_editor/editbar/complex_controls_overview.md). Use the [`properties`](api/diagram_editor/editbar/config/properties_property.md) property to apply the custom control(s) to the needed elements (shapes, groups, swimlanes, etc.).
Refer to the [**Editbar configuration**](guides/diagram_editor/editbar.md) guide for more information about configuring!
:::
diff --git a/docs/api/diagram_editor/editbar/config/properties_property.md b/docs/api/diagram_editor/editbar/config/properties_property.md
index b00d98385..434d02df8 100644
--- a/docs/api/diagram_editor/editbar/config/properties_property.md
+++ b/docs/api/diagram_editor/editbar/config/properties_property.md
@@ -38,7 +38,7 @@ properties?: {
- `item` - (optional) the object of the selected element
- `editor` - (required) the object of the Diagram editor
-You can configure Editbar controls for a separate Diagram element, for instance **rectangle**, **circle**, **card** etc.:
+You can configure Editbar controls for a separate Diagram element, for instance `rectangle`, `circle`, `card` etc.:
~~~jsx
properties: {
diff --git a/docs/api/diagram_editor/editor/config/autoplacement_property.md b/docs/api/diagram_editor/editor/config/autoplacement_property.md
index 175dba834..c936d9a67 100644
--- a/docs/api/diagram_editor/editor/config/autoplacement_property.md
+++ b/docs/api/diagram_editor/editor/config/autoplacement_property.md
@@ -30,9 +30,9 @@ autoplacement?: {
The `autoplacement` object has the following parameters:
-- `mode` - (optional) the mode of connecting shapes, *"direct"* (by default) or *"edges"*
+- `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"*
+- `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
@@ -70,25 +70,25 @@ editor.parse(data);
Connector lines with no arrows are aligned "from center to center". They are straight and diagonal.
-
+
### "edges" mode
Connector lines are aligned "from side to side".
:::info
-To add arrows to the lines, specify `forwardArrow: "filled"` or `backArrow: "filled"` in the configuration of a [line object](/lines/configuration_properties/).
+To add arrows to the lines, specify `forwardArrow: "filled"` or `backArrow: "filled"` in the configuration of a [line object](lines/configuration_properties.md).
:::
-The connector lines in the "edges" mode can be:
+The connector lines in the `"edges"` mode can be:
-- either straight (if you set the `connectType: "straight"` property of a [line object](/lines/configuration_properties/))
+- either straight (if you set the `connectType: "straight"` property of a [line object](lines/configuration_properties.md))
-
+
-- or 90-degree curved (if you set the `connectType: "elbow"` property of a [line object](/lines/configuration_properties/))
+- or 90-degree curved (if you set the `connectType: "elbow"` property of a [line object](lines/configuration_properties.md))
-
+
## Modes of placement of shapes
@@ -96,25 +96,25 @@ The connector lines in the "edges" mode can be:
Shapes are arranged along vertical and horizontal lines
-- **"orthogonal"** arrangement with lines in the **"direct"** mode
+- `"orthogonal"` arrangement with lines in the `"direct"` mode
-
+
-- **"orthogonal"** arrangement with lines in the **"edges"** mode
+- `"orthogonal"` arrangement with lines in the `"edges"` mode
-
+
### "radial" mode
Shapes are arranged on imaginary circles relative to the central shape, i.e. the shape with the most connections
-- **"radial"** arrangement with lines in the **"direct"** mode
+- `"radial"` arrangement with lines in the `"direct"` mode
-
+
-- **"radial"** arrangement with lines in the **"edges"** mode
+- `"radial"` arrangement with lines in the `"edges"` mode
-
+
**Change log**:
diff --git a/docs/api/diagram_editor/editor/config/connectionpoints_property.md b/docs/api/diagram_editor/editor/config/connectionpoints_property.md
index 73d4bf867..0973bb5e8 100644
--- a/docs/api/diagram_editor/editor/config/connectionpoints_property.md
+++ b/docs/api/diagram_editor/editor/config/connectionpoints_property.md
@@ -11,7 +11,7 @@ description: You can learn about the connectionPoints property of editor in the
@short: Optional. Enables/disables an ability to connect shapes using connection controls
:::info
-The `connectionPoints` property works only the **default** mode.
+The `connectionPoints` property works only the `default` mode.
:::
### Usage
diff --git a/docs/api/diagram_editor/editor/config/defaults_property.md b/docs/api/diagram_editor/editor/config/defaults_property.md
index bd16d332a..f4e3849ef 100644
--- a/docs/api/diagram_editor/editor/config/defaults_property.md
+++ b/docs/api/diagram_editor/editor/config/defaults_property.md
@@ -20,7 +20,7 @@ defaults?: {
### Parameters
-The `defaults` object can contain a set of `key:value` pairs where *key* is the type of a shape or line and *value* is a set of configuration settings of the [shape](/shapes/configuration_properties/) or [line](/lines/configuration_properties/) correspondingly.
+The `defaults` object can contain a set of `key:value` pairs where *key* is the type of a shape or line and *value* is a set of configuration settings of the [shape](shapes/configuration_properties.md) or [line](lines/configuration_properties.md) correspondingly.
:::note
The `type` and `id` attributes can not be defined in the default configuration of a shape/line.
@@ -58,14 +58,14 @@ const editor = new dhx.DiagramEditor("editor_container", {
~~~
:::info
-After defining the default settings for the shape/line of separate types, you can either omit these properties or redefine their values while [preparing a data set](/diagram/guides/loading_data/#preparing-data-to-load) for the shapes/lines of these types.
+After defining the default settings for the shape/line of separate types, you can either omit these properties or redefine their values while [preparing a data set](guides/loading_data.md#preparing-data-to-load) for the shapes/lines of these types.
:::
**Change log**: The ability to set the default configuration for lines was added in v4.2
**Related articles**:
-- [Setting the default configuration of a shape](/guides/diagram/configuration/#setting-the-default-configuration-of-a-shape)
-- [Setting the preview of shapes](/guides/diagram_editor/shapebar/#setting-the-preview-of-shapes)
+- [Setting the default configuration of a shape](guides/diagram/configuration.md#setting-the-default-configuration-of-a-shape)
+- [Setting the preview of shapes](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes)
**Related sample**: [Diagram editor. Setting the default line (connector) type. Try connecting shape A to shape B](https://snippet.dhtmlx.com/22abzn5m)
diff --git a/docs/api/diagram_editor/editor/config/lineconfig_property.md b/docs/api/diagram_editor/editor/config/lineconfig_property.md
index ead3f239d..b8b091128 100644
--- a/docs/api/diagram_editor/editor/config/lineconfig_property.md
+++ b/docs/api/diagram_editor/editor/config/lineconfig_property.md
@@ -28,16 +28,16 @@ lineConfig?: {
### Parameters
-The **lineConfig** object contains the following parameters:
+The `lineConfig` object contains the following parameters:
-- `lineType` - (optional) the default type of the new connector lines. The value is applied, if the line object doesn't contain the "type" property
+- `lineType` - (optional) the default type of the new connector lines. The value is applied, if the line object doesn't contain the `"type"` property
- `lineDirection` - (optional) the direction of the new connector lines
- `arrowsHidden` - (optional) defines whether the arrows of the new connector lines should be hidden
- `lineGap` - (optional) sets the distance to the right-angled bend of a connector line
-- `connectType` - (optional) sets the connection type of the lines: `"elbow"` | `"straight"` | `"curved"` (the "curved" type is used only in the mindmap Diagram mode). The value is applied, if the line object doesn't contain the "connectType" property
+- `connectType` - (optional) sets the connection type of the lines: `"elbow"` | `"straight"` | `"curved"` (the `"curved"` type is used only in the mindmap Diagram mode). The value is applied, if the line object doesn't contain the `"connectType"` property
:::note
-The **lineDirection**, **arrowsHidden**, and **lineGap** parameters work only in the default mode of the editor (*type: "default"*)
+The `lineDirection`, `arrowsHidden`, and `lineGap` parameters work only in the default mode of the editor (*type: `"default"`*)
:::
### Default config
@@ -53,8 +53,8 @@ lineConfig: {
The `connectType` parameter has the following default values:
-- "elbow" - for the default and org chart modes
-- "curved" - for the mindmap mode (this type is used only in the mindmap mode)
+- `"elbow"` - for the default and org chart modes
+- `"curved"` - for the mindmap mode (this type is used only in the mindmap mode)
### Example
@@ -72,14 +72,14 @@ const editor = new dhx.DiagramEditor("editor_container", {
});
~~~
-The result of applying the **lineGap** property is shown in the image below:
+The result of applying the `lineGap` property is shown in the image below:
-
+
**Change log**:
- The `connectType` parameter is added in v6.1
-- The `lineGap` parameter is added in v5.0 (check the [Migration article](diagram/migration.md/#42---50))
+- The `lineGap` parameter is added in v5.0 (check the [Migration article](migration.md#42---50))
- Added in v4.2
**Related sample**: [Diagram editor. Setting the default line (connector) type. Try connecting shape A to shape B](https://snippet.dhtmlx.com/22abzn5m)
diff --git a/docs/api/diagram_editor/editor/config/magnetic_property.md b/docs/api/diagram_editor/editor/config/magnetic_property.md
index 5724db194..ee8fd96d2 100644
--- a/docs/api/diagram_editor/editor/config/magnetic_property.md
+++ b/docs/api/diagram_editor/editor/config/magnetic_property.md
@@ -7,7 +7,7 @@ description: You can learn about the magnetic property of editor in the document
# magnetic
:::info
-The **magnetic** property works only in the **default mode** of the editor (`type: "default"`)
+The `magnetic` property works only in the `default` mode of the editor (`type: "default"`)
:::
### Description
@@ -46,7 +46,7 @@ magnetic: {
### Parameters
-As an object, the **magnetic** property can include the following parameters:
+As an object, the `magnetic` property can include the following parameters:
- `show` - (optional) enables/disables snap lines when moving a shape
- `lineWidth` - (optional) the width of snap lines (2 by default)
@@ -65,4 +65,4 @@ const editor = new dhx.DiagramEditor("editor_container", {
});
~~~
-**Change log**: The ***show*** parameter was added in v6.0
+**Change log**: The `show` parameter was added in v6.0
diff --git a/docs/api/diagram_editor/editor/config/shapetoolbar_property.md b/docs/api/diagram_editor/editor/config/shapetoolbar_property.md
index 09a5a1a79..c65a5f812 100644
--- a/docs/api/diagram_editor/editor/config/shapetoolbar_property.md
+++ b/docs/api/diagram_editor/editor/config/shapetoolbar_property.md
@@ -22,9 +22,9 @@ As an array, the `shapeToolbar` property can include:
- a *boolean* value - to show/hide the default toolbar
- string values with the names of the toolbar controls. The sequence the values are put in the array defines the order the controls will be displayed in the toolbar. The available values are:
- - in the default mode: *"copy"* | *"connect"* | *"remove"* | *"addRowLast"* | *"addColumnLast"*
- - in the org chart mode: *"add"* | *"horizontal"* | *"vertical"* | *"remove"*
- - in the mindmap mode: *"add"* | *"addLeft"* | *"addRight"* | *"remove"*
+ - in the default mode: `"copy"` | `"connect"` | `"remove"` | `"addRowLast"` | `"addColumnLast"`
+ - in the org chart mode: `"add"` | `"horizontal"` | `"vertical"` | `"remove"`
+ - in the mindmap mode: `"add"` | `"addLeft"` | `"addRight"` | `"remove"`
- a set of icon objects. Each icon object can have the following properties:
- `id: string` - (required) the id of an icon. Note, that the usage of the default names of the toolbar controls as ids of new controls is prohibited
- `content: string` - (required) the content of the icon. It can contain an HTML element with the name of the icon class
@@ -84,6 +84,6 @@ const editor = new dhx.DiagramEditor("editor_container", {
**Change log:** The `tooltip` parameter of the icon object is added in v5.0
-**Related articles**: [Grid Area](/guides/diagram_editor/grid_area/#configuring-the-toolbar-of-an-item)
+**Related articles**: [Grid Area](guides/diagram_editor/grid_area.md#configuring-the-toolbar-of-an-item)
**Relate sample**: [Diagram Editor. Org chart mode. Shape toolbar configuration](https://snippet.dhtmlx.com/b2agwets)
diff --git a/docs/api/diagram_editor/editor/config/shapetype_property.md b/docs/api/diagram_editor/editor/config/shapetype_property.md
index 8c79b0fb6..39c333634 100644
--- a/docs/api/diagram_editor/editor/config/shapetype_property.md
+++ b/docs/api/diagram_editor/editor/config/shapetype_property.md
@@ -10,7 +10,7 @@ description: You can learn about the shapeType property of editor in the documen
@short: Optional. The type of the items
-This value is applied, if the shape object doesn't contain the "type" property
+This value is applied, if the shape object doesn't contain the `"type"` property
### Usage
@@ -20,19 +20,19 @@ shapeType?: string;
### Default config
-In the default mode of Editor (type: "default"):
+In the default mode of Editor (type: `"default"`):
~~~jsx
shapeType: "rectangle"
~~~
-In the org chart mode of Editor (type: "card"):
+In the org chart mode of Editor (type: `"card"`):
~~~jsx
shapeType: "card"
~~~
-In the mindmap mode of Editor (type: "topic"):
+In the mindmap mode of Editor (type: `"topic"`):
~~~jsx
shapeType: "topic"
@@ -46,4 +46,4 @@ const editor = new dhx.DiagramEditor("editor_container", {
});
~~~
-**Related articles**: [Default Shapes](/shapes/default_shapes/)
+**Related articles**: [Default Shapes](shapes/default_shapes.md)
diff --git a/docs/api/diagram_editor/editor/config/type_property.md b/docs/api/diagram_editor/editor/config/type_property.md
index 7538ad3c4..d96455a59 100644
--- a/docs/api/diagram_editor/editor/config/type_property.md
+++ b/docs/api/diagram_editor/editor/config/type_property.md
@@ -20,20 +20,20 @@ type?: "default" | "org" | "mindmap";
Diagram Editor can be initialized in one of three modes:
-- **type:"default"** is used to visualize relations between some entities
+- `type:"default"` is used to visualize relations between some entities
-- **type:"org"** is used to show the structure of a group of people by presenting their relations in a hierarchical order
+- `type:"org"` is used to show the structure of a group of people by presenting their relations in a hierarchical order
-- **type:"mindmap"** is used to arrange information on some topic by representing the main concept surrounded by associated ideas
+- `type:"mindmap"` is used to arrange information on some topic by representing the main concept surrounded by associated ideas
**Related articles**:
-- [Overview](/editor_overview)
-- [How to start with Diagram Editor](/guides/diagram_editor/initialization/)
+- [Overview](editor_overview.md)
+- [How to start with Diagram Editor](guides/diagram_editor/initialization.md)
diff --git a/docs/api/diagram_editor/editor/config/view_property.md b/docs/api/diagram_editor/editor/config/view_property.md
index 74317a1c9..aa771c8e3 100644
--- a/docs/api/diagram_editor/editor/config/view_property.md
+++ b/docs/api/diagram_editor/editor/config/view_property.md
@@ -22,9 +22,9 @@ view: {
### Parameters
-- `toolbar` - (optional) allows you to show/hide **Toolbar** (if *boolean*) or configure its appearance (if *object*). Refer to the [Toolbar API](/api/diagram_editor/toolbar/api_overview/) section for more information about configuring the toolbar
-- `shapebar` - (optional) allows you to show/hide **Shapebar** (if *boolean*) or configure its appearance (if *object*). Refer to the [Shapebar API](/api/diagram_editor/shapebar/api_overview/) section for more information about configuring the shapebar
-- `editbar` - (optional) allows you to show/hide **Editbar** (if *boolean*) or configure its appearance (if *object*). Refer to the [Editbar API](/api/diagram_editor/editbar/api_overview/) section for more information about configuring the Editbar
+- `toolbar` - (optional) allows you to show/hide `Toolbar` (if *boolean*) or configure its appearance (if *object*). Refer to the [Toolbar API](api/diagram_editor/toolbar/api_overview.md) section for more information about configuring the toolbar
+- `shapebar` - (optional) allows you to show/hide `Shapebar` (if *boolean*) or configure its appearance (if *object*). Refer to the [Shapebar API](api/diagram_editor/shapebar/api_overview.md) section for more information about configuring the shapebar
+- `editbar` - (optional) allows you to show/hide `Editbar` (if *boolean*) or configure its appearance (if *object*). Refer to the [Editbar API](api/diagram_editor/editbar/api_overview.md) section for more information about configuring the Editbar
### Default config
diff --git a/docs/api/diagram_editor/editor/events/aftergroupmove_event.md b/docs/api/diagram_editor/editor/events/aftergroupmove_event.md
index 04f8f1d4b..82461530a 100644
--- a/docs/api/diagram_editor/editor/events/aftergroupmove_event.md
+++ b/docs/api/diagram_editor/editor/events/aftergroupmove_event.md
@@ -37,7 +37,7 @@ The callback of the event is called with an object with the following parameters
- `event` - an event object
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/afteritemcatch_event.md b/docs/api/diagram_editor/editor/events/afteritemcatch_event.md
index 7bb107f46..ad3c588d1 100644
--- a/docs/api/diagram_editor/editor/events/afteritemcatch_event.md
+++ b/docs/api/diagram_editor/editor/events/afteritemcatch_event.md
@@ -11,7 +11,7 @@ description: You can learn about the afterItemCatch event of editor in the docum
@short: Fires after an item is caught
:::info
-The event works only in the **org chart** and **mindmap** modes of Diagram, the ***itemsDraggable*** property must be set to `true`.
+The event works only in the **org chart** and `mindmap` modes of Diagram, the `itemsDraggable` property must be set to `true`.
:::
### Usage
diff --git a/docs/api/diagram_editor/editor/events/afteritemmove_event.md b/docs/api/diagram_editor/editor/events/afteritemmove_event.md
index 16d5d3ecc..7c30affa7 100644
--- a/docs/api/diagram_editor/editor/events/afteritemmove_event.md
+++ b/docs/api/diagram_editor/editor/events/afteritemmove_event.md
@@ -11,7 +11,7 @@ description: You can learn about the afterItemMove event of editor in the docume
@short: Fires when an item is moved one grid step
:::note
-The event doesn't work with the **line** object.
+The event doesn't work with the `line` object.
The event fires just for the target element despite the number of selected elements. The ids of dragged elements are provided in the `batch` parameter of the callback function.
:::
@@ -39,7 +39,7 @@ The callback of the event is called with an object with the following parameters
- `event` - an event object
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
@@ -67,8 +67,8 @@ editor.events.on("afterItemMove", ({ id, coords }) => {
**Related API**:
-- [`beforeItemMove`](/api/diagram_editor/editor/events/beforeitemmove_event/)
-- [`itemMoveEnd`](/api/diagram_editor/editor/events/itemmoveend_event/)
+- [`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md)
+- [`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md)
**Related samples**:
diff --git a/docs/api/diagram_editor/editor/events/afteritemresize_event.md b/docs/api/diagram_editor/editor/events/afteritemresize_event.md
index 7923adf1c..c14eb02e4 100644
--- a/docs/api/diagram_editor/editor/events/afteritemresize_event.md
+++ b/docs/api/diagram_editor/editor/events/afteritemresize_event.md
@@ -33,14 +33,14 @@ The callback of the event is called with an object with the following parameters
- `x` - the new X-coordinate of the item
- `y` - the new Y-coordinate of the item
- `dir` - the direction of the resize operation:
- - **"n"** - north
- - **"ne"** - north-east
- - **"e"** - east
- - **"se"** - south-east
- - **"s"** - south
- - **"sw"** - south-west
- - **"w"** - west
- - **"nw"** - north-west
+ - `"n"` - north
+ - `"ne"` - north-east
+ - `"e"` - east
+ - `"se"` - south-east
+ - `"s"` - south
+ - `"sw"` - south-west
+ - `"w"` - west
+ - `"nw"` - north-west
### Example
@@ -66,8 +66,8 @@ editor.events.on("afterItemResize", ({ id, width, height }) => {
**Related API**:
-- [`beforeItemResize`](/api/diagram_editor/editor/events/beforeitemresize_event/)
-- [`itemResizeEnd`](/api/diagram_editor/editor/events/itemresizeend_event/)
+- [`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md)
+- [`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md)
**Related samples**:
diff --git a/docs/api/diagram_editor/editor/events/afteritemrotate_event.md b/docs/api/diagram_editor/editor/events/afteritemrotate_event.md
index 8b22aed52..2b574133a 100644
--- a/docs/api/diagram_editor/editor/events/afteritemrotate_event.md
+++ b/docs/api/diagram_editor/editor/events/afteritemrotate_event.md
@@ -46,8 +46,8 @@ editor.events.on("afterItemRotate", ({ id, angle }) => {
**Related API**:
-- [`beforeItemRotate`](/api/diagram_editor/editor/events/beforeitemrotate_event/)
-- [`itemRotateEnd`](/api/diagram_editor/editor/events/itemrotateend_event/)
+- [`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md)
+- [`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md)
**Related samples**:
diff --git a/docs/api/diagram_editor/editor/events/afterlinetitlemove_event.md b/docs/api/diagram_editor/editor/events/afterlinetitlemove_event.md
index df9e2c385..2400cc605 100644
--- a/docs/api/diagram_editor/editor/events/afterlinetitlemove_event.md
+++ b/docs/api/diagram_editor/editor/events/afterlinetitlemove_event.md
@@ -33,7 +33,7 @@ The callback of the event is called with an object with the following parameters
- `y` - the vertical position of the text element, moving from top to bottom
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/aftershapeiconclick_event.md b/docs/api/diagram_editor/editor/events/aftershapeiconclick_event.md
index bcbc0373b..668e7a318 100644
--- a/docs/api/diagram_editor/editor/events/aftershapeiconclick_event.md
+++ b/docs/api/diagram_editor/editor/events/aftershapeiconclick_event.md
@@ -27,7 +27,7 @@ The callback of the event is called with the following parameters:
- `shape` - an object with the item configuration
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/aftershapemove_event.md b/docs/api/diagram_editor/editor/events/aftershapemove_event.md
index 080f0fe90..bd1346d0a 100644
--- a/docs/api/diagram_editor/editor/events/aftershapemove_event.md
+++ b/docs/api/diagram_editor/editor/events/aftershapemove_event.md
@@ -37,7 +37,7 @@ The callback of the event is called with an object with the following parameters
- `event` - an event object
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/beforegroupmove_event.md b/docs/api/diagram_editor/editor/events/beforegroupmove_event.md
index 7adc98120..6b7b70b1f 100644
--- a/docs/api/diagram_editor/editor/events/beforegroupmove_event.md
+++ b/docs/api/diagram_editor/editor/events/beforegroupmove_event.md
@@ -41,7 +41,7 @@ The callback of the event is called with an object with the following parameters
The callback returns `false` to prevent the group or swimlane from being moved; otherwise, `true`
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/beforeitemcatch_event.md b/docs/api/diagram_editor/editor/events/beforeitemcatch_event.md
index 149dbd2c7..f48199fb3 100644
--- a/docs/api/diagram_editor/editor/events/beforeitemcatch_event.md
+++ b/docs/api/diagram_editor/editor/events/beforeitemcatch_event.md
@@ -11,7 +11,7 @@ description: You can learn about the beforeItemCatch event of editor in the docu
@short: Fires before an item is caught
:::info
-The event works only in the **org chart** and **mindmap** modes of Diagram, the ***itemsDraggable*** property must be set to `true`.
+The event works only in the **org chart** and `mindmap` modes of Diagram, the `itemsDraggable` property must be set to `true`.
:::
### Usage
@@ -39,7 +39,7 @@ The callback of the event is called with an object with the following parameters
The callback returns `false` to prevent the item from being caught; otherwise, `true`
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/beforeitemmove_event.md b/docs/api/diagram_editor/editor/events/beforeitemmove_event.md
index d830eb493..0a126fcab 100644
--- a/docs/api/diagram_editor/editor/events/beforeitemmove_event.md
+++ b/docs/api/diagram_editor/editor/events/beforeitemmove_event.md
@@ -11,7 +11,7 @@ description: You can learn about the beforeItemMove event of editor in the docum
@short: Fires before an item is moved
:::note
-The event doesn't work with the **line** object.
+The event doesn't work with the `line` object.
The event fires just for the target element despite the number of selected elements. The ids of dragged elements are provided in the `batch` parameter of the callback function.
:::
@@ -43,7 +43,7 @@ The callback of the event is called with an object with the following parameters
The callback returns `false` to prevent the item from being moved; otherwise, `true`
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
@@ -72,8 +72,8 @@ editor.events.on("beforeItemMove", ({ id, coords }) => {
**Related API**:
-- [`afterItemMove`](/api/diagram_editor/editor/events/afteritemmove_event/)
-- [`itemMoveEnd`](/api/diagram_editor/editor/events/itemmoveend_event/)
+- [`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md)
+- [`itemMoveEnd`](api/diagram_editor/editor/events/itemmoveend_event.md)
**Related samples**:
diff --git a/docs/api/diagram_editor/editor/events/beforeitemresize_event.md b/docs/api/diagram_editor/editor/events/beforeitemresize_event.md
index 27daa33a9..a581881a7 100644
--- a/docs/api/diagram_editor/editor/events/beforeitemresize_event.md
+++ b/docs/api/diagram_editor/editor/events/beforeitemresize_event.md
@@ -33,14 +33,14 @@ The callback of the event is called with an object with the following parameters
- `x` - the new X-coordinate of the item
- `y` - the new Y-coordinate of the item
- `dir` - the direction of the resize operation:
- - **"n"** - north
- - **"ne"** - north-east
- - **"e"** - east
- - **"se"** - south-east
- - **"s"** - south
- - **"sw"** - south-west
- - **"w"** - west
- - **"nw"** - north-west
+ - `"n"` - north
+ - `"ne"` - north-east
+ - `"e"` - east
+ - `"se"` - south-east
+ - `"s"` - south
+ - `"sw"` - south-west
+ - `"w"` - west
+ - `"nw"` - north-west
### Returns
@@ -70,8 +70,8 @@ editor.events.on("beforeItemResize", ({ id, width, height }) => {
**Related API**:
-- [`afterItemResize`](/api/diagram_editor/editor/events/afteritemresize_event/)
-- [`itemResizeEnd`](/api/diagram_editor/editor/events/itemresizeend_event/)
+- [`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md)
+- [`itemResizeEnd`](api/diagram_editor/editor/events/itemresizeend_event.md)
**Related samples**:
diff --git a/docs/api/diagram_editor/editor/events/beforeitemrotate_event.md b/docs/api/diagram_editor/editor/events/beforeitemrotate_event.md
index 435ab9de9..bcda26789 100644
--- a/docs/api/diagram_editor/editor/events/beforeitemrotate_event.md
+++ b/docs/api/diagram_editor/editor/events/beforeitemrotate_event.md
@@ -54,8 +54,8 @@ editor.events.on("beforeItemRotate", ({ id, angle }) => {
**Related API**:
-- [`afterItemRotate`](/api/diagram_editor/editor/events/afteritemrotate_event/)
-- [`itemRotateEnd`](/api/diagram_editor/editor/events/itemrotateend_event/)
+- [`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md)
+- [`itemRotateEnd`](api/diagram_editor/editor/events/itemrotateend_event.md)
**Related samples**:
diff --git a/docs/api/diagram_editor/editor/events/beforelinetitlemove_event.md b/docs/api/diagram_editor/editor/events/beforelinetitlemove_event.md
index 70a742aed..164892e88 100644
--- a/docs/api/diagram_editor/editor/events/beforelinetitlemove_event.md
+++ b/docs/api/diagram_editor/editor/events/beforelinetitlemove_event.md
@@ -37,7 +37,7 @@ The callback of the event is called with an object with the following parameters
The callback returns `false` to prevent the text element of a line from being moved; otherwise, `true`
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/beforeshapeiconclick_event.md b/docs/api/diagram_editor/editor/events/beforeshapeiconclick_event.md
index a51d76966..20a896539 100644
--- a/docs/api/diagram_editor/editor/events/beforeshapeiconclick_event.md
+++ b/docs/api/diagram_editor/editor/events/beforeshapeiconclick_event.md
@@ -31,7 +31,7 @@ The callback of the event is called with the following parameters:
The callback returns `false` to prevent the toolbar control from being clicked; otherwise, `true`
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/beforeshapemove_event.md b/docs/api/diagram_editor/editor/events/beforeshapemove_event.md
index 7409bfa3c..c4fe34940 100644
--- a/docs/api/diagram_editor/editor/events/beforeshapemove_event.md
+++ b/docs/api/diagram_editor/editor/events/beforeshapemove_event.md
@@ -41,7 +41,7 @@ The callback of the event is called with an object with the following parameters
The callback returns `false` to prevent the shape from being moved; otherwise, `true`
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/groupmoveend_event.md b/docs/api/diagram_editor/editor/events/groupmoveend_event.md
index 5b97adeed..2d81c6ca1 100644
--- a/docs/api/diagram_editor/editor/events/groupmoveend_event.md
+++ b/docs/api/diagram_editor/editor/events/groupmoveend_event.md
@@ -37,7 +37,7 @@ The callback of the event is called with an object with the following parameters
- `event` - an event object
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/itemmoveend_event.md b/docs/api/diagram_editor/editor/events/itemmoveend_event.md
index 646916da9..3cd9baedc 100644
--- a/docs/api/diagram_editor/editor/events/itemmoveend_event.md
+++ b/docs/api/diagram_editor/editor/events/itemmoveend_event.md
@@ -11,7 +11,7 @@ description: You can learn about the itemMoveEnd event of editor in the document
@short: Fires after an item is moved
:::note
-The event doesn't work with the **line** object.
+The event doesn't work with the `line` object.
The event fires just for the target element despite the number of selected elements. The ids of dragged elements are provided in the `batch` parameter of the callback function.
:::
@@ -63,8 +63,8 @@ editor.events.on("itemMoveEnd", ({ id, coords }) => {
**Related API**:
-- [`afterItemMove`](/api/diagram_editor/editor/events/afteritemmove_event/)
-- [`beforeItemMove`](/api/diagram_editor/editor/events/beforeitemmove_event/)
+- [`afterItemMove`](api/diagram_editor/editor/events/afteritemmove_event.md)
+- [`beforeItemMove`](api/diagram_editor/editor/events/beforeitemmove_event.md)
**Related samples**:
diff --git a/docs/api/diagram_editor/editor/events/itemresizeend_event.md b/docs/api/diagram_editor/editor/events/itemresizeend_event.md
index 45574bf08..0dee2fef6 100644
--- a/docs/api/diagram_editor/editor/events/itemresizeend_event.md
+++ b/docs/api/diagram_editor/editor/events/itemresizeend_event.md
@@ -33,14 +33,14 @@ The callback of the event is called with an object with the following parameters
- `x` - the final X-coordinate of the item
- `y` - the final Y-coordinate of the item
- `dir` - the direction of the resize operation:
- - **"n"** - north
- - **"ne"** - north-east
- - **"e"** - east
- - **"se"** - south-east
- - **"s"** - south
- - **"sw"** - south-west
- - **"w"** - west
- - **"nw"** - north-west
+ - `"n"` - north
+ - `"ne"` - north-east
+ - `"e"` - east
+ - `"se"` - south-east
+ - `"s"` - south
+ - `"sw"` - south-west
+ - `"w"` - west
+ - `"nw"` - north-west
### Example
@@ -68,8 +68,8 @@ editor.events.on("itemResizeEnd", ({ id, width, height }) => {
**Related API**:
-- [`beforeItemResize`](/api/diagram_editor/editor/events/beforeitemresize_event/)
-- [`afterItemResize`](/api/diagram_editor/editor/events/afteritemresize_event/)
+- [`beforeItemResize`](api/diagram_editor/editor/events/beforeitemresize_event.md)
+- [`afterItemResize`](api/diagram_editor/editor/events/afteritemresize_event.md)
**Related samples**:
diff --git a/docs/api/diagram_editor/editor/events/itemrotateend_event.md b/docs/api/diagram_editor/editor/events/itemrotateend_event.md
index aeadfe0fc..4c329a643 100644
--- a/docs/api/diagram_editor/editor/events/itemrotateend_event.md
+++ b/docs/api/diagram_editor/editor/events/itemrotateend_event.md
@@ -47,8 +47,8 @@ editor.events.on("itemRotateEnd", ({ id, angle }) => {
**Related API**:
-- [`beforeItemRotate`](/api/diagram_editor/editor/events/beforeitemrotate_event/)
-- [`afterItemRotate`](/api/diagram_editor/editor/events/afteritemrotate_event/)
+- [`beforeItemRotate`](api/diagram_editor/editor/events/beforeitemrotate_event.md)
+- [`afterItemRotate`](api/diagram_editor/editor/events/afteritemrotate_event.md)
**Related samples**:
diff --git a/docs/api/diagram_editor/editor/events/itemtarget_event.md b/docs/api/diagram_editor/editor/events/itemtarget_event.md
index ad53cd921..c06531972 100644
--- a/docs/api/diagram_editor/editor/events/itemtarget_event.md
+++ b/docs/api/diagram_editor/editor/events/itemtarget_event.md
@@ -11,7 +11,7 @@ description: You can learn about the itemTarget event of editor in the documenta
@short: Fires when the moved item is hovering over the target item
:::info
-The event works only in the **org chart** and **mindmap** modes of Diagram, the ***itemsDraggable*** property must be set to `true`.
+The event works only in the **org chart** and `mindmap` modes of Diagram, the `itemsDraggable` property must be set to `true`.
The event doesn't work with the *parent item of a moved item* and with a *moved item that has the `giveItem: false` property*.
:::
@@ -41,7 +41,7 @@ The callback of the event is called with an object with the following parameters
The callback returns `false` to prevent an item from being hovered over the target item; otherwise, `true`
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/linetitlemoveend_event.md b/docs/api/diagram_editor/editor/events/linetitlemoveend_event.md
index 771b8bb05..1de7d39d0 100644
--- a/docs/api/diagram_editor/editor/events/linetitlemoveend_event.md
+++ b/docs/api/diagram_editor/editor/events/linetitlemoveend_event.md
@@ -33,7 +33,7 @@ The callback of the event is called with an object with the following parameters
- `y` - the vertical position of the text element, moving from top to bottom
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/shapemoveend_event.md b/docs/api/diagram_editor/editor/events/shapemoveend_event.md
index 33ff50e22..303a190c5 100644
--- a/docs/api/diagram_editor/editor/events/shapemoveend_event.md
+++ b/docs/api/diagram_editor/editor/events/shapemoveend_event.md
@@ -37,7 +37,7 @@ The callback of the event is called with an object with the following parameters
- `event` - an event object
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/shaperesize_event.md b/docs/api/diagram_editor/editor/events/shaperesize_event.md
index 8cd1cf3f0..be3b8ad13 100644
--- a/docs/api/diagram_editor/editor/events/shaperesize_event.md
+++ b/docs/api/diagram_editor/editor/events/shaperesize_event.md
@@ -17,7 +17,7 @@ description: You can learn about the shapeResize event of editor in the document
~~~
:::info
-For handling the inner Diagram Editor events you can use the **on()** method.
+For handling the inner Diagram Editor events you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/editor/events/zoomin_event.md b/docs/api/diagram_editor/editor/events/zoomin_event.md
index 898b2d6f2..16d77d35f 100644
--- a/docs/api/diagram_editor/editor/events/zoomin_event.md
+++ b/docs/api/diagram_editor/editor/events/zoomin_event.md
@@ -18,12 +18,12 @@ description: You can learn about the zoomIn event of editor in the documentation
### Parameters
-The callback of the **zoomIn** event is called with the following parameter:
+The callback of the `zoomIn` event is called with the following parameter:
- `step` - (required) a value that displays the step of the [`scale`](api/diagram_editor/editor/config/scale_property.md) property.
:::info
-For handling the inner events of Diagram Editor you can use the **on()** method.
+For handling the inner events of Diagram Editor you can use the `on()` method.
:::
### Example
@@ -40,4 +40,4 @@ editor.events.on("zoomIn", (step) => {
});
~~~
-**Change log**: The ***step*** parameter was added in v6.0
+**Change log**: The `step` parameter was added in v6.0
diff --git a/docs/api/diagram_editor/editor/events/zoomout_event.md b/docs/api/diagram_editor/editor/events/zoomout_event.md
index 4713eae98..0deef04e6 100644
--- a/docs/api/diagram_editor/editor/events/zoomout_event.md
+++ b/docs/api/diagram_editor/editor/events/zoomout_event.md
@@ -18,12 +18,12 @@ description: You can learn about the zoomOut event of editor in the documentatio
### Parameters
-The callback of the **zoomOut** event is called with the following parameter:
+The callback of the `zoomOut` event is called with the following parameter:
- `step` - (required) a value that displays the change step of the [`scale`](api/diagram_editor/editor/config/scale_property.md) property.
:::info
-For handling the inner events of Diagram Editor you can use the **on()** method.
+For handling the inner events of Diagram Editor you can use the `on()` method.
:::
### Example
@@ -40,4 +40,4 @@ editor.events.on("zoomOut", (step) => {
});
~~~
-**Change log**: The ***step*** parameter was added in v6.0
+**Change log**: The `step` parameter was added in v6.0
diff --git a/docs/api/diagram_editor/editor/methods/import_method.md b/docs/api/diagram_editor/editor/methods/import_method.md
index 619a6e167..81f963b60 100644
--- a/docs/api/diagram_editor/editor/methods/import_method.md
+++ b/docs/api/diagram_editor/editor/methods/import_method.md
@@ -37,6 +37,6 @@ const editor = new dhx.DiagramEditor("editor_container");
editor.import(diagram);
~~~
-You can load data in any supported data format. See the details in the [](api/data_collection/parse_method.md) article.
+You can load data in any supported data format. See the details in the [`parse()`](api/data_collection/parse_method.md) article.
**Related sample**: [Diagram editor. Org chart mode. Live editor](https://snippet.dhtmlx.com/bng7ego7)
diff --git a/docs/api/diagram_editor/editor/methods/parse_method.md b/docs/api/diagram_editor/editor/methods/parse_method.md
index 2030f2c7d..e8b0812fb 100644
--- a/docs/api/diagram_editor/editor/methods/parse_method.md
+++ b/docs/api/diagram_editor/editor/methods/parse_method.md
@@ -20,7 +20,7 @@ parse(data: array): void;
- `data` - (required) the data that should be parsed into the editor
-You can load data in any supported data format. See the details in the [](api/data_collection/parse_method.md) article.
+You can load data in any supported data format. See the details in the [`parse()`](api/data_collection/parse_method.md) article.
### Example
diff --git a/docs/api/diagram_editor/shapebar/api_overview.md b/docs/api/diagram_editor/shapebar/api_overview.md
index dd52d70b1..16d47145d 100644
--- a/docs/api/diagram_editor/shapebar/api_overview.md
+++ b/docs/api/diagram_editor/shapebar/api_overview.md
@@ -6,7 +6,7 @@ description: You can check a Shapebar overview in the documentation of the DHTML
# Shapebar API overview
-[Shapebar](/guides/diagram_editor/shapebar/) is a part of the Diagram Editor that renders previews of Diagram items (shapes, groups and swimlanes). Use the `shapebar` property of the [`view`](/api/diagram_editor/editor/config/view_property/) configuration object to show, hide and configure the Shapebar. There are two ways of initialization you can choose from:
+[Shapebar](guides/diagram_editor/shapebar.md) is a part of the Diagram Editor that renders previews of Diagram items (shapes, groups and swimlanes). Use the `shapebar` property of the [`view`](api/diagram_editor/editor/config/view_property.md) configuration object to show, hide and configure the Shapebar. There are two ways of initialization you can choose from:
- creating the default Shapebar by using the `shapebar:true` setting:
diff --git a/docs/api/diagram_editor/shapebar/config/css_property.md b/docs/api/diagram_editor/shapebar/config/css_property.md
index e846b00be..72d1b451d 100644
--- a/docs/api/diagram_editor/shapebar/config/css_property.md
+++ b/docs/api/diagram_editor/shapebar/config/css_property.md
@@ -42,7 +42,7 @@ css?: string;
**Related articles**:
-- [Shapebar and shapes appearance](guides/diagram_editor/shapebar.md/#shapebar-and-shapes-appearance)
-- [Configuring the look of shapes in Shapebar](guides/themes/base_themes_configuration.md/#configuring-the-look-of-shapes-in-shapebar)
+- [Shapebar and shapes appearance](guides/diagram_editor/shapebar.md#shapebar-and-shapes-appearance)
+- [Configuring the look of shapes in Shapebar](guides/themes/base_themes_configuration.md#configuring-the-look-of-shapes-in-shapebar)
**Change log**: Added in v6.0
diff --git a/docs/api/diagram_editor/shapebar/config/preview_property.md b/docs/api/diagram_editor/shapebar/config/preview_property.md
index 00c178ea2..e36b4b13b 100644
--- a/docs/api/diagram_editor/shapebar/config/preview_property.md
+++ b/docs/api/diagram_editor/shapebar/config/preview_property.md
@@ -54,7 +54,7 @@ const editor = new dhx.DiagramEditor("editor_container", {
### Details
-The values of the **gap** and **scale** properties can be redefined for a separate shape via the **gap** and **scale** attributes of the [preview](shapes/configuration_properties.md/#properties-specific-for-the-default-mode) property of the shape object:
+The values of the `gap` and `scale` properties can be redefined for a separate shape via the `gap` and `scale` attributes of the [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) property of the shape object:
~~~jsx {14-17}
const defaults = {
@@ -80,6 +80,6 @@ const editor = new dhx.DiagramEditor("editor_container", {
});
~~~
-**Related article**: [Shapebar](guides/diagram_editor/shapebar.md/#setting-the-preview-of-shapes)
+**Related article**: [Shapebar](guides/diagram_editor/shapebar.md#setting-the-preview-of-shapes)
**Change log**: Added in v6.0
diff --git a/docs/api/diagram_editor/shapebar/config/sections_property.md b/docs/api/diagram_editor/shapebar/config/sections_property.md
index 84830f944..a9bd886b9 100644
--- a/docs/api/diagram_editor/shapebar/config/sections_property.md
+++ b/docs/api/diagram_editor/shapebar/config/sections_property.md
@@ -6,9 +6,9 @@ description: You can learn about the sections property of Shapebar in the docume
# sections
-The [default sections of the shapebar](guides/diagram_editor/shapebar.md/#default-sections) are: *Shapes*, *Groups*, *Swimlanes*.
+The [default sections of the shapebar](guides/diagram_editor/shapebar.md#default-sections) are: *Shapes*, *Groups*, *Swimlanes*.
-Using the **sections** property you can change the structure of the shapebar and display the necessary items.
+Using the `sections` property you can change the structure of the shapebar and display the necessary items.
### Description
@@ -28,11 +28,11 @@ The `sections` object can contain a set of *key:value* pairs where:
- `key` - the name of a section specified by a user
- `value` - an array which can include:
- an object with one *key:value* pair for rendering a basic set of shapes. The list of available pairs is given below:
- - `{flowShapes: true}` - (optional) displays all available types of the [Flow-chart](/diagram/shapes/default_shapes/#shapes-in-the-default-mode) shapes
- - `{org: true}` - (optional) displays Org shapes: the "card" and "img-card" shape types
+ - `{flowShapes: true}` - (optional) displays all available types of the [Flow-chart](shapes/default_shapes.md#shapes-in-the-default-mode) shapes
+ - `{org: true}` - (optional) displays Org shapes: the `"card"` and `"img-card"` shape types
- `{group: true}` - (optional) displays a basic set of Groups
- `{swimlane: true}` - (optional) displays a basic set of Swimlanes
- - a string value with a specific type of the item to be rendered in the section (for example, "text", "topic", etc.)
+ - a string value with a specific type of the item to be rendered in the section (for example, `"text"`, `"topic"`, etc.)
- an object with several *key:value* pairs for redefining the default properties of any shape
### Example
@@ -169,6 +169,6 @@ const editor = new dhx.DiagramEditor("editor_container", {
});
~~~
-**Related article**: [Shapebar](guides/diagram_editor/shapebar.md/#custom-sections)
+**Related article**: [Shapebar](guides/diagram_editor/shapebar.md#custom-sections)
**Change log**: Added in v6.0
diff --git a/docs/api/diagram_editor/shapebar/config/show_property.md b/docs/api/diagram_editor/shapebar/config/show_property.md
index 72cfacc19..3b1680ba4 100644
--- a/docs/api/diagram_editor/shapebar/config/show_property.md
+++ b/docs/api/diagram_editor/shapebar/config/show_property.md
@@ -37,6 +37,6 @@ const editor = new dhx.DiagramEditor("editor_container", {
});
~~~
-**Related article**: [Shapebar](guides/diagram_editor/shapebar.md/#showinghiding-the-shapebar)
+**Related article**: [Shapebar](guides/diagram_editor/shapebar.md#showinghiding-the-shapebar)
**Change log**: Added in v6.0
diff --git a/docs/api/diagram_editor/shapebar/config/width_property.md b/docs/api/diagram_editor/shapebar/config/width_property.md
index c592e96b8..422ba49ca 100644
--- a/docs/api/diagram_editor/shapebar/config/width_property.md
+++ b/docs/api/diagram_editor/shapebar/config/width_property.md
@@ -37,6 +37,6 @@ const editor = new dhx.DiagramEditor("editor_container", {
});
~~~
-**Related article**: [Shapebar](guides/diagram_editor/shapebar.md/#setting-the-width-of-shapebar)
+**Related article**: [Shapebar](guides/diagram_editor/shapebar.md#setting-the-width-of-shapebar)
**Change log**: Added in v6.0
diff --git a/docs/api/diagram_editor/toolbar/api_overview.md b/docs/api/diagram_editor/toolbar/api_overview.md
index 8d0d87304..9718f5d6c 100644
--- a/docs/api/diagram_editor/toolbar/api_overview.md
+++ b/docs/api/diagram_editor/toolbar/api_overview.md
@@ -6,7 +6,7 @@ description: You can check a Toolbar overview in the documentation of the DHTMLX
# Toolbar API overview
-[Toolbar](/guides/diagram_editor/toolbar/) is a part of the Diagram Editor that helps users to control the editing process. Use the `toolbar` property of the [`view`](/api/diagram_editor/editor/config/view_property/) configuration object to show, hide and configure the Toolbar. There are two ways of initialization you can choose from:
+[Toolbar](guides/diagram_editor/toolbar.md) is a part of the Diagram Editor that helps users to control the editing process. Use the `toolbar` property of the [`view`](api/diagram_editor/editor/config/view_property.md) configuration object to show, hide and configure the Toolbar. There are two ways of initialization you can choose from:
- creating the default Toolbar by using the `toolbar:true` setting:
@@ -39,7 +39,7 @@ Check the related API sections to explore the available methods, properties and
## Toolbar methods
-- [List of Toolbar methods](/api/diagram_editor/toolbar/methods/overview/)
+- [List of Toolbar methods](api/diagram_editor/toolbar/methods/overview.md)
## Toolbar properties
@@ -47,4 +47,4 @@ Check the related API sections to explore the available methods, properties and
## Toolbar events
-- [List of Toolbar events](/api/diagram_editor/toolbar/events/overview/)
+- [List of Toolbar events](api/diagram_editor/toolbar/events/overview.md)
diff --git a/docs/api/diagram_editor/toolbar/config/items_property.md b/docs/api/diagram_editor/toolbar/config/items_property.md
index 6e1e955b4..514cb2ef5 100644
--- a/docs/api/diagram_editor/toolbar/config/items_property.md
+++ b/docs/api/diagram_editor/toolbar/config/items_property.md
@@ -18,17 +18,17 @@ items?: (object | string)[];
### Configuring items via strings
-The `items` property allows you to specify [**Service elements**](guides/diagram_editor/toolbar.md/#service-elements) as an array of strings:
+The `items` property allows you to specify [**Service elements**](guides/diagram_editor/toolbar.md#service-elements) as an array of strings:
~~~jsx
items: [ "file", "edit", "view", "arrange", "spacer", "scale" ];
~~~
-The full list of service elements you can see [here](guides/diagram_editor/toolbar.md/#service-elements).
+The full list of service elements you can see [here](guides/diagram_editor/toolbar.md#service-elements).
### Configuring items via objects
-The `items` property allows you to specify [**Service elements**](guides/diagram_editor/toolbar.md/#service-elements) and [**Base elements**](guides/diagram_editor/toolbar.md/#base-elements) as an array of objects:
+The `items` property allows you to specify [**Service elements**](guides/diagram_editor/toolbar.md#service-elements) and [**Base elements**](guides/diagram_editor/toolbar.md#base-elements) as an array of objects:
~~~jsx
items: [
@@ -50,10 +50,10 @@ items: [
#### Parameters
-For all [**service elements**](guides/diagram_editor/toolbar.md/#service-elements), excluding `separator` / `spacer` / `scale`, you can specify an object with the following parameters:
+For all [**service elements**](guides/diagram_editor/toolbar.md#service-elements), excluding `separator` / `spacer` / `scale`, you can specify an object with the following parameters:
- `type` - (required) - the type of a service element. The full list of service element types you can see [here](guides/diagram_editor/toolbar.md)
-- `id` - (optional) - the ID of a service element. By default, the ID of a service element includes **$** and the **type** of the service element: **$file**
+- `id` - (optional) - the ID of a service element. By default, the ID of a service element includes `$` and the `type` of the service element: `$file`
- `value` - (optional) - the label of a service element
- `hotkey` - (optional) - the hot key combination label of a service element
- `icon` - (optional) - the css class of a service element icon
@@ -63,7 +63,7 @@ For all [**service elements**](guides/diagram_editor/toolbar.md/#service-element
- `items` - (optional) - defines the structure of the child elements
- `checkIcon` - (optional) - the handler that returns the icon css class. It is called with the following argument:
- `editor` - the Diagram Editor object
-- `handler` - (optional) - the handler that runs when the ***click*** or ***inputChange*** events occurs. It is called with the following arguments:
+- `handler` - (optional) - the handler that runs when the `click` or `inputChange` events occurs. It is called with the following arguments:
- `editor` - the Diagram Editor object
- `event` - a [native event](https://developer.mozilla.org/en-US/docs/Web/API/Event)
diff --git a/docs/api/diagram_editor/toolbar/events/overview.md b/docs/api/diagram_editor/toolbar/events/overview.md
index 4a60933ea..661e7db85 100644
--- a/docs/api/diagram_editor/toolbar/events/overview.md
+++ b/docs/api/diagram_editor/toolbar/events/overview.md
@@ -6,7 +6,7 @@ description: You can learn about Toolbar events in the documentation of the DHTM
# Toolbar events overview
-You can use the following [**Toolbar**](https://docs.dhtmlx.com/suite/category/toolbar-events/) events of [**Suite**](https://docs.dhtmlx.com/suite/):
+You can use the following [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-events/) events of [**Suite**](https://docs.dhtmlx.com/suite/):
| Name | Description |
| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
@@ -35,7 +35,7 @@ editor.toolbar.events.on("click", (id, event) => {
# TreeCollection events overview
-You can use the following [**TreeCollection**](https://docs.dhtmlx.com/suite/category/treecollection-events/) events of [**Suite**](https://docs.dhtmlx.com/suite/):
+You can use the following [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-events/) events of [**Suite**](https://docs.dhtmlx.com/suite/):
| Name | Description |
| ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
diff --git a/docs/api/diagram_editor/toolbar/events/toolbar_events.md b/docs/api/diagram_editor/toolbar/events/toolbar_events.md
index d54d85efe..0c35accbe 100644
--- a/docs/api/diagram_editor/toolbar/events/toolbar_events.md
+++ b/docs/api/diagram_editor/toolbar/events/toolbar_events.md
@@ -4,7 +4,7 @@ title: Events of Toolbar
description: You can learn about events of Toolbar in the documentation of the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.
---
-You can use the following [**Toolbar**](https://docs.dhtmlx.com/suite/category/toolbar-events/) events of [**Suite**](https://docs.dhtmlx.com/suite/):
+You can use the following [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-events/) events of [**Suite**](https://docs.dhtmlx.com/suite/):
| Name | Description |
| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
diff --git a/docs/api/diagram_editor/toolbar/events/treecollection_events.md b/docs/api/diagram_editor/toolbar/events/treecollection_events.md
index 482778b27..baaa41a31 100644
--- a/docs/api/diagram_editor/toolbar/events/treecollection_events.md
+++ b/docs/api/diagram_editor/toolbar/events/treecollection_events.md
@@ -4,7 +4,7 @@ title: TreeCollection Events of Toolbar
description: You can learn about TreeCollection events of Toolbar in the documentation of the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.
---
-You can use the following [**TreeCollection**](https://docs.dhtmlx.com/suite/category/treecollection-events/) events of [**Suite**](https://docs.dhtmlx.com/suite/):
+You can use the following [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-events/) events of [**Suite**](https://docs.dhtmlx.com/suite/):
| Name | Description |
| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
diff --git a/docs/api/diagram_editor/toolbar/methods/overview.md b/docs/api/diagram_editor/toolbar/methods/overview.md
index 2b8b28e33..088207e19 100644
--- a/docs/api/diagram_editor/toolbar/methods/overview.md
+++ b/docs/api/diagram_editor/toolbar/methods/overview.md
@@ -10,7 +10,7 @@ description: You can learn about Toolbar methods in the documentation of the DHT
Use the [`parse()`](api/diagram_editor/toolbar/methods/parse_method.md) method to manipulate data in Toolbar.
:::
-You can use the following [**Toolbar**](https://docs.dhtmlx.com/suite/category/toolbar-methods/) methods of [**Suite**](https://docs.dhtmlx.com/suite/):
+You can use the following [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-methods/) methods of [**Suite**](https://docs.dhtmlx.com/suite/):
| Name | Description |
| :------------------------------------------------------------------------------------ | :--------------------------------------------------------- |
@@ -45,7 +45,7 @@ editor.toolbar.disable();
# TreeCollection methods overview
-You can use the following [**TreeCollection**](https://docs.dhtmlx.com/suite/category/treecollection-methods/) methods of [**Suite**](https://docs.dhtmlx.com/suite/):
+You can use the following [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-methods/) methods of [**Suite**](https://docs.dhtmlx.com/suite/):
| Name | Description |
| ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
diff --git a/docs/api/diagram_editor/toolbar/methods/toolbar_methods.md b/docs/api/diagram_editor/toolbar/methods/toolbar_methods.md
index 9fa178733..663c26159 100644
--- a/docs/api/diagram_editor/toolbar/methods/toolbar_methods.md
+++ b/docs/api/diagram_editor/toolbar/methods/toolbar_methods.md
@@ -4,7 +4,7 @@ title: Methods of Toolbar
description: You can learn about methods of Toolbar in the documentation of the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.
---
-You can use the following [**Toolbar**](https://docs.dhtmlx.com/suite/category/toolbar-methods/) methods of [**Suite**](https://docs.dhtmlx.com/suite/):
+You can use the following [`Toolbar`](https://docs.dhtmlx.com/suite/category/toolbar-methods/) methods of [**Suite**](https://docs.dhtmlx.com/suite/):
| Name | Description |
| :------------------------------------------------------------------------------------ | :--------------------------------------------------------- |
diff --git a/docs/api/diagram_editor/toolbar/methods/treecollection_methods.md b/docs/api/diagram_editor/toolbar/methods/treecollection_methods.md
index f38c8f3f7..e81419105 100644
--- a/docs/api/diagram_editor/toolbar/methods/treecollection_methods.md
+++ b/docs/api/diagram_editor/toolbar/methods/treecollection_methods.md
@@ -4,7 +4,7 @@ title: TreeCollection Methods of Toolbar
description: You can learn about TreeCollection methods of Toolbar in the documentation of the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.
---
-You can use the following [**TreeCollection**](https://docs.dhtmlx.com/suite/category/treecollection-methods/) methods of [**Suite**](https://docs.dhtmlx.com/suite/):
+You can use the following [`TreeCollection`](https://docs.dhtmlx.com/suite/category/treecollection-methods/) methods of [**Suite**](https://docs.dhtmlx.com/suite/):
| Name | Description |
| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
diff --git a/docs/api/diagram_editor/view/events/afterhide_event.md b/docs/api/diagram_editor/view/events/afterhide_event.md
index 2c61ee8a0..86e98a1d1 100644
--- a/docs/api/diagram_editor/view/events/afterhide_event.md
+++ b/docs/api/diagram_editor/view/events/afterhide_event.md
@@ -18,12 +18,12 @@ description: You can learn about the afterHide event of View in the Diagram Edit
### Parameters
-The callback of the **afterHide** event is called with the following parameter:
+The callback of the `afterHide` event is called with the following parameter:
- `view` - (required) a view that was hidden. Refer to the [`view`](api/diagram_editor/editor/config/view_property.md) property for details.
:::info
-For handling the inner events of Diagram Editor you can use the **on()** method.
+For handling the inner events of Diagram Editor you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/view/events/aftershow_event.md b/docs/api/diagram_editor/view/events/aftershow_event.md
index 7400abba6..da7d5aa5d 100644
--- a/docs/api/diagram_editor/view/events/aftershow_event.md
+++ b/docs/api/diagram_editor/view/events/aftershow_event.md
@@ -18,12 +18,12 @@ description: You can learn about the afterShow event of View in the Diagram Edit
### Parameters
-The callback of the **afterShow** event is called with the following parameter:
+The callback of the `afterShow` event is called with the following parameter:
- `view` - (required) a view that was displayed. Refer to the [`view`](api/diagram_editor/editor/config/view_property.md) property for details.
:::info
-For handling the inner events of Diagram Editor you can use the **on()** method.
+For handling the inner events of Diagram Editor you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/view/events/beforehide_event.md b/docs/api/diagram_editor/view/events/beforehide_event.md
index 9829cadc0..e6d030633 100644
--- a/docs/api/diagram_editor/view/events/beforehide_event.md
+++ b/docs/api/diagram_editor/view/events/beforehide_event.md
@@ -18,12 +18,12 @@ description: You can learn about the beforeHide event of View in the Diagram Edi
### Parameters
-The callback of the **beforeHide** event is called with the following parameter:
+The callback of the `beforeHide` event is called with the following parameter:
- `view` - (required) a view that will be hidden. Refer to the [`view`](api/diagram_editor/editor/config/view_property.md) property for details.
:::info
-For handling the inner events of Diagram Editor you can use the **on()** method.
+For handling the inner events of Diagram Editor you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/view/events/beforeshow_event.md b/docs/api/diagram_editor/view/events/beforeshow_event.md
index 21a3447f9..cdf785431 100644
--- a/docs/api/diagram_editor/view/events/beforeshow_event.md
+++ b/docs/api/diagram_editor/view/events/beforeshow_event.md
@@ -18,12 +18,12 @@ description: You can learn about the beforeShow event of View in the Diagram Edi
### Parameters
-The callback of the **beforeShow** event is called with the following parameter:
+The callback of the `beforeShow` event is called with the following parameter:
- `view` - (required) a view that will be displayed. Refer to the [`view`](api/diagram_editor/editor/config/view_property.md) property for details.
:::info
-For handling the inner events of Diagram Editor you can use the **on()** method.
+For handling the inner events of Diagram Editor you can use the `on()` method.
:::
### Example
diff --git a/docs/api/diagram_editor/view/methods/hide_method.md b/docs/api/diagram_editor/view/methods/hide_method.md
index dcc209ffb..115a98d59 100644
--- a/docs/api/diagram_editor/view/methods/hide_method.md
+++ b/docs/api/diagram_editor/view/methods/hide_method.md
@@ -11,7 +11,7 @@ description: You can learn about the hide method of view in the documentation of
@short: Hides Toolbar, Editbar, and Shapebar views of Diagram Editor.
:::info
-If you need to hide the **Toolbar**, **Editbar**, and **Shapebar** view separately, call the `hide()` method with the corresponding parameter. To hide all these elements, call the `hide()` method without parameters.
+If you need to hide the `Toolbar`, `Editbar`, and `Shapebar` view separately, call the `hide()` method with the corresponding parameter. To hide all these elements, call the `hide()` method without parameters.
:::
### Usage
diff --git a/docs/api/diagram_editor/view/methods/show_method.md b/docs/api/diagram_editor/view/methods/show_method.md
index dcf31e5fa..3235f5c43 100644
--- a/docs/api/diagram_editor/view/methods/show_method.md
+++ b/docs/api/diagram_editor/view/methods/show_method.md
@@ -11,7 +11,7 @@ description: You can learn about the show method of view in the documentation of
@short: Shows Toolbar, Editbar, and Shapebar views of Diagram Editor
:::info
-If you need to show the **Toolbar**, **Editbar**, or **Shapebar** view separately, call the `show()` method with the corresponding parameter. To show all these elements, call the `show()` method without parameters.
+If you need to show the `Toolbar`, `Editbar`, or `Shapebar` view separately, call the `show()` method with the corresponding parameter. To show all these elements, call the `show()` method without parameters.
:::
### Usage
diff --git a/docs/api/export/index.md b/docs/api/export/index.md
index fff4a05f4..1c8b04c55 100644
--- a/docs/api/export/index.md
+++ b/docs/api/export/index.md
@@ -6,7 +6,7 @@ description: You can have an overview of diagram export methods in the documenta
# Export methods overview
-The API methods of the **diagram.export** object allow you to export data from the Diagram or Diagram Editor.
+The API methods of the `diagram.export` object allow you to export data from the Diagram or Diagram Editor.
## Methods
| Name | Description |
diff --git a/docs/api/export/pdf_method.md b/docs/api/export/pdf_method.md
index 098c43e15..f8fef2127 100644
--- a/docs/api/export/pdf_method.md
+++ b/docs/api/export/pdf_method.md
@@ -31,15 +31,15 @@ A promise of data export
- `name?: string` - (optional) the name of the exported file
- `pdf?: object` - (optional) the object of pdf options. Here you can specify the following properties:
- `scale?: number` - (optional) the scale of the grid rendering (between *0.1* and *2*)
- - `landscape?: boolean` - (optional) defines a landscape orientation, ***false*** by default. It works only if the `format` option is specified
+ - `landscape?: boolean` - (optional) defines a landscape orientation, `false` by default. It works only if the `format` option is specified
- `width?: string | number` - (optional) the width of the output page. As a value of the property, you can specify a number or a string with a unit
- `height?: string | number` - (optional) the height of the output page. As a value of the property, you can specify a number or a string with a unit
- - `margin?: object` - (optional) the object with paper margins, ***none*** by default
+ - `margin?: object` - (optional) the object with paper margins, `none` by default
- `left?: string | number` - (optional) defines a left margin, accepts values labeled with units (px,in,cm,mm)
- `right?: string | number` - (optional) defines a right margin, accepts values labeled with units (px,in,cm,mm)
- `top?: string | number` - (optional) defines a top margin, accepts values labeled with units (px,in,cm,mm)
- `bottom?: string | number` - (optional) defines a bottom margin, accepts values labeled with units (px,in,cm,mm)
- - `format?: string` - (optional) defines the paper format. If set, it takes priority over the **width** or **height** options. Not specified by default. Check the list of all available [formats and their sizes](#list-of-formats).
+ - `format?: string` - (optional) defines the paper format. If set, it takes priority over the `width` or `height` options. Not specified by default. Check the list of all available [formats and their sizes](#list-of-formats).
- `pageRanges?: string` - (optional) paper ranges to print, e.g. 1-5, 8, 11-13. It works only if the `format` option is specified
- `displayHeaderFooter?: boolean` - (optional) defines whether to display the header and footer, *false* by default
- `footerTemplate?: string` - (optional) an HTML template for the print footer. It should be a valid HTML markup with the following classes used to inject printing values into them:
@@ -89,19 +89,19 @@ It is necessary to set sufficient margin for correct display of `headerTemplate`
| Format | Size |
| --------- | ------------------ |
-| "Letter" | (8.5in x 11in) |
-| "Legal" | (8.5in x 14in) |
-| "Tabloid" | (11in x 17in) |
-| "Ledger" | (17in x 11in) |
-| "A0" | (33.1in x 46.8in) |
-| "A1" | (23.4in x 33.1in) |
-| "A2" | (16.54in x 23.4in) |
-| "A3" | (11.7in x 16.54in) |
-| "A4" | (8.27in x 11.7in) |
-| "A5" | (5.83in x 8.27in) |
-| "A6" | (4.13in x 5.83in) |
-
-**Related articles**: [Exporting Diagram](../../../guides/data_export/)
+| `"Letter"` | (8.5in x 11in) |
+| `"Legal"` | (8.5in x 14in) |
+| `"Tabloid"` | (11in x 17in) |
+| `"Ledger"` | (17in x 11in) |
+| `"A0"` | (33.1in x 46.8in) |
+| `"A1"` | (23.4in x 33.1in) |
+| `"A2"` | (16.54in x 23.4in) |
+| `"A3"` | (11.7in x 16.54in) |
+| `"A4"` | (8.27in x 11.7in) |
+| `"A5"` | (5.83in x 8.27in) |
+| `"A6"` | (4.13in x 5.83in) |
+
+**Related articles**: [Exporting Diagram](guides/data_export.md)
**Related samples**:
diff --git a/docs/api/export/png_method.md b/docs/api/export/png_method.md
index 2fb16ee01..923311fed 100644
--- a/docs/api/export/png_method.md
+++ b/docs/api/export/png_method.md
@@ -55,7 +55,7 @@ diagram.export.png({
.finally(() => console.log("finished"));
~~~
-**Related articles**: [Exporting Diagram](../../../guides/data_export/)
+**Related articles**: [Exporting Diagram](guides/data_export.md)
**Related samples**:
diff --git a/docs/api/inline_editor/aftereditorclose_event.md b/docs/api/inline_editor/aftereditorclose_event.md
index 2b3ce34fa..1e6618a97 100644
--- a/docs/api/inline_editor/aftereditorclose_event.md
+++ b/docs/api/inline_editor/aftereditorclose_event.md
@@ -46,5 +46,5 @@ diagram.events.on("afterEditorClose", (id, key, subId) => {
**Change log**:
-- The **subHeaderId** parameter has been changed to **subId** in v4.1
+- The `subHeaderId` parameter has been changed to `subId` in v4.1
- Added in v4.0
diff --git a/docs/api/inline_editor/aftereditorediting_event.md b/docs/api/inline_editor/aftereditorediting_event.md
index 4cf110dd8..fda205afd 100644
--- a/docs/api/inline_editor/aftereditorediting_event.md
+++ b/docs/api/inline_editor/aftereditorediting_event.md
@@ -48,5 +48,5 @@ diagram.events.on("afterEditorEditing", (value, id, key, subId) => {
**Change log**:
-- The **subHeaderId** parameter has been changed to **subId** in v4.1
+- The `subHeaderId` parameter has been changed to `subId` in v4.1
- Added in v4.0
diff --git a/docs/api/inline_editor/aftereditoropen_event.md b/docs/api/inline_editor/aftereditoropen_event.md
index 4e3423384..66b92f82e 100644
--- a/docs/api/inline_editor/aftereditoropen_event.md
+++ b/docs/api/inline_editor/aftereditoropen_event.md
@@ -46,5 +46,5 @@ diagram.events.on("afterEditorOpen", (id, key, subId) => {
**Change log**:
-- The **subHeaderId** parameter has been changed to **subId** in v4.1
+- The `subHeaderId` parameter has been changed to `subId` in v4.1
- Added in v4.0
diff --git a/docs/api/inline_editor/beforeeditorclose_event.md b/docs/api/inline_editor/beforeeditorclose_event.md
index 4589c2724..dabdf714c 100644
--- a/docs/api/inline_editor/beforeeditorclose_event.md
+++ b/docs/api/inline_editor/beforeeditorclose_event.md
@@ -51,5 +51,5 @@ diagram.events.on("beforeEditorClose", (id, key, subId) => {
**Change log**:
-- The **subHeaderId** parameter has been changed to **subId** in v4.1
+- The `subHeaderId` parameter has been changed to `subId` in v4.1
- Added in v4.0
diff --git a/docs/api/inline_editor/beforeeditorediting_event.md b/docs/api/inline_editor/beforeeditorediting_event.md
index 072d77665..d90b8152f 100644
--- a/docs/api/inline_editor/beforeeditorediting_event.md
+++ b/docs/api/inline_editor/beforeeditorediting_event.md
@@ -55,5 +55,5 @@ diagram.events.on("beforeEditorEditing", (value, id, key, subId) => {
**Change log**:
-- The **subHeaderId** parameter has been changed to **subId** in v4.1
+- The `subHeaderId` parameter has been changed to `subId` in v4.1
- Added in v4.0
diff --git a/docs/api/inline_editor/beforeeditoropen_event.md b/docs/api/inline_editor/beforeeditoropen_event.md
index b27a6b31e..6a4f5bdf7 100644
--- a/docs/api/inline_editor/beforeeditoropen_event.md
+++ b/docs/api/inline_editor/beforeeditoropen_event.md
@@ -51,5 +51,5 @@ diagram.events.on("beforeEditorOpen", (id, key, subId) => {
**Change log**:
-- The **subHeaderId** parameter has been changed to **subId** in v4.1
+- The `subHeaderId` parameter has been changed to `subId` in v4.1
- Added in v4.0
diff --git a/docs/api/overview/cellmanager_events_overview.md b/docs/api/overview/cellmanager_events_overview.md
index c7e4ee78a..6eaf9991c 100644
--- a/docs/api/overview/cellmanager_events_overview.md
+++ b/docs/api/overview/cellmanager_events_overview.md
@@ -8,11 +8,11 @@ description: You can explore the CellManager events in the documentation of the
| Name | Description |
| :------------------------------------------------- | :-------------------------------------------------------- |
-| [](../cell_manager/aftercellsadd_event.md) | @getshort(../cell_manager/aftercellsadd_event.md) |
-| [](../cell_manager/aftercellsmove_event.md) | @getshort(../cell_manager/aftercellsmove_event.md) |
-| [](../cell_manager/aftercellsremove_event.md) | @getshort(../cell_manager/aftercellsremove_event.md) |
-| [](../cell_manager/aftercellsvalidation_event.md) | @getshort(../cell_manager/aftercellsvalidation_event.md) |
-| [](../cell_manager/beforecellsadd_event.md) | @getshort(../cell_manager/beforecellsadd_event.md) |
-| [](../cell_manager/beforecellsmove_event.md) | @getshort(../cell_manager/beforecellsmove_event.md) |
-| [](../cell_manager/beforecellsremove_event.md) | @getshort(../cell_manager/beforecellsremove_event.md) |
-| [](../cell_manager/beforecellsvalidation_event.md) | @getshort(../cell_manager/beforecellsvalidation_event.md) |
+| [](api/cell_manager/aftercellsadd_event.md) | @getshort(../cell_manager/aftercellsadd_event.md) |
+| [](api/cell_manager/aftercellsmove_event.md) | @getshort(../cell_manager/aftercellsmove_event.md) |
+| [](api/cell_manager/aftercellsremove_event.md) | @getshort(../cell_manager/aftercellsremove_event.md) |
+| [](api/cell_manager/aftercellsvalidation_event.md) | @getshort(../cell_manager/aftercellsvalidation_event.md) |
+| [](api/cell_manager/beforecellsadd_event.md) | @getshort(../cell_manager/beforecellsadd_event.md) |
+| [](api/cell_manager/beforecellsmove_event.md) | @getshort(../cell_manager/beforecellsmove_event.md) |
+| [](api/cell_manager/beforecellsremove_event.md) | @getshort(../cell_manager/beforecellsremove_event.md) |
+| [](api/cell_manager/beforecellsvalidation_event.md) | @getshort(../cell_manager/beforecellsvalidation_event.md) |
diff --git a/docs/api/overview/cellmanager_methods_overview.md b/docs/api/overview/cellmanager_methods_overview.md
index 88b6d02b5..133773f9b 100644
--- a/docs/api/overview/cellmanager_methods_overview.md
+++ b/docs/api/overview/cellmanager_methods_overview.md
@@ -8,14 +8,14 @@ description: You can explore the CellManager methods in the documentation of the
| Name | Description |
| :-------------------------------------------------- | :--------------------------------------------------------- |
-| [](../cell_manager/add_method.md) | @getshort(../cell_manager/add_method.md) |
-| [](../cell_manager/getcellid_method.md) | @getshort(../cell_manager/getcellid_method.md) |
-| [](../cell_manager/getcellindex_method.md) | @getshort(../cell_manager/getcellindex_method.md) |
-| [](../cell_manager/getsubheadercellid_method.md) | @getshort(../cell_manager/getsubheadercellid_method.md) |
-| [](../cell_manager/getsubheadercellindex_method.md) | @getshort(../cell_manager/getsubheadercellindex_method.md) |
-| [](../cell_manager/getsubheadertype_method.md) | @getshort(../cell_manager/getsubheadertype_method.md) |
-| [](../cell_manager/move_method.md) | @getshort(../cell_manager/move_method.md) |
-| [](../cell_manager/remove_method.md) | @getshort(../cell_manager/remove_method.md) |
-| [](../cell_manager/resetswimlane_method.md) | @getshort(../cell_manager/resetswimlane_method.md) |
-| [](../cell_manager/setswimlane_method.md) | @getshort(../cell_manager/setswimlane_method.md) |
-| [](../cell_manager/validation_method.md) | @getshort(../cell_manager/validation_method.md) |
+| [](api/cell_manager/add_method.md) | @getshort(../cell_manager/add_method.md) |
+| [](api/cell_manager/getcellid_method.md) | @getshort(../cell_manager/getcellid_method.md) |
+| [](api/cell_manager/getcellindex_method.md) | @getshort(../cell_manager/getcellindex_method.md) |
+| [](api/cell_manager/getsubheadercellid_method.md) | @getshort(../cell_manager/getsubheadercellid_method.md) |
+| [](api/cell_manager/getsubheadercellindex_method.md) | @getshort(../cell_manager/getsubheadercellindex_method.md) |
+| [](api/cell_manager/getsubheadertype_method.md) | @getshort(../cell_manager/getsubheadertype_method.md) |
+| [](api/cell_manager/move_method.md) | @getshort(../cell_manager/move_method.md) |
+| [](api/cell_manager/remove_method.md) | @getshort(../cell_manager/remove_method.md) |
+| [](api/cell_manager/resetswimlane_method.md) | @getshort(../cell_manager/resetswimlane_method.md) |
+| [](api/cell_manager/setswimlane_method.md) | @getshort(../cell_manager/setswimlane_method.md) |
+| [](api/cell_manager/validation_method.md) | @getshort(../cell_manager/validation_method.md) |
diff --git a/docs/api/overview/datacollection_events_overview.md b/docs/api/overview/datacollection_events_overview.md
index be8404b84..824ab1719 100644
--- a/docs/api/overview/datacollection_events_overview.md
+++ b/docs/api/overview/datacollection_events_overview.md
@@ -8,10 +8,10 @@ description: You can explore the DataCollection events in the documentation of t
| Name | Description |
| :------------------------------------------- | :-------------------------------------------------- |
-| [](../data_collection/afteradd_event.md) | @getshort(../data_collection/afteradd_event.md) |
-| [](../data_collection/afterremove_event.md) | @getshort(../data_collection/afterremove_event.md) |
-| [](../data_collection/beforeadd_event.md) | @getshort(../data_collection/beforeadd_event.md) |
-| [](../data_collection/beforeremove_event.md) | @getshort(../data_collection/beforeremove_event.md) |
-| [](../data_collection/change_event.md) | @getshort(../data_collection/change_event.md) |
-| [](../data_collection/filter_event.md) | @getshort(../data_collection/filter_event.md) |
-| [](../data_collection/load_event.md) | @getshort(../data_collection/load_event.md) |
+| [](api/data_collection/afteradd_event.md) | @getshort(../data_collection/afteradd_event.md) |
+| [](api/data_collection/afterremove_event.md) | @getshort(../data_collection/afterremove_event.md) |
+| [](api/data_collection/beforeadd_event.md) | @getshort(../data_collection/beforeadd_event.md) |
+| [](api/data_collection/beforeremove_event.md) | @getshort(../data_collection/beforeremove_event.md) |
+| [](api/data_collection/change_event.md) | @getshort(../data_collection/change_event.md) |
+| [](api/data_collection/filter_event.md) | @getshort(../data_collection/filter_event.md) |
+| [](api/data_collection/load_event.md) | @getshort(../data_collection/load_event.md) |
diff --git a/docs/api/overview/datacollection_methods_overview.md b/docs/api/overview/datacollection_methods_overview.md
index 4031b9ca5..5e4a1b515 100644
--- a/docs/api/overview/datacollection_methods_overview.md
+++ b/docs/api/overview/datacollection_methods_overview.md
@@ -8,27 +8,27 @@ description: You can explore the DataCollection methods in the documentation of
| Name | Description |
| :------------------------------------------ | :------------------------------------------------- |
-| [](../data_collection/add_method.md) | @getshort(../data_collection/add_method.md) |
-| [](../data_collection/copy_method.md) | @getshort(../data_collection/copy_method.md) |
-| [](../data_collection/eachchild_method.md) | @getshort(../data_collection/eachchild_method.md) |
-| [](../data_collection/eachparent_method.md) | @getshort(../data_collection/eachparent_method.md) |
-| [](../data_collection/exists_method.md) | @getshort(../data_collection/exists_method.md) |
-| [](../data_collection/filter_method.md) | @getshort(../data_collection/filter_method.md) |
-| [](../data_collection/find_method.md) | @getshort(../data_collection/find_method.md) |
-| [](../data_collection/findall_method.md) | @getshort(../data_collection/findall_method.md) |
-| [](../data_collection/getfilters_method.md) | @getshort(../data_collection/getfilters_method.md) |
-| [](../data_collection/getid_method.md) | @getshort(../data_collection/getid_method.md) |
-| [](../data_collection/getindex_method.md) | @getshort(../data_collection/getindex_method.md) |
-| [](../data_collection/getitem_method.md) | @getshort(../data_collection/getitem_method.md) |
-| [](../data_collection/getnearid_method.md) | @getshort(../data_collection/getnearid_method.md) |
-| [](../data_collection/getroot_method.md) | @getshort(../data_collection/getroot_method.md) |
-| [](../data_collection/getroots_method.md) | @getshort(../data_collection/getroots_method.md) |
-| [](../data_collection/load_method.md) | @getshort(../data_collection/load_method.md) |
-| [](../data_collection/map_method.md) | @getshort(../data_collection/map_method.md) |
-| [](../data_collection/move_method.md) | @getshort(../data_collection/move_method.md) |
-| [](../data_collection/parse_method.md) | @getshort(../data_collection/parse_method.md) |
-| [](../data_collection/remove_method.md) | @getshort(../data_collection/remove_method.md) |
-| [](../data_collection/removeall_method.md) | @getshort(../data_collection/removeall_method.md) |
-| [](../data_collection/resetfilter_method.md)| @getshort(../data_collection/resetfilter_method.md)|
-| [](../data_collection/serialize_method.md) | @getshort(../data_collection/serialize_method.md) |
-| [](../data_collection/update_method.md) | @getshort(../data_collection/update_method.md) |
+| [](api/data_collection/add_method.md) | @getshort(../data_collection/add_method.md) |
+| [](api/data_collection/copy_method.md) | @getshort(../data_collection/copy_method.md) |
+| [](api/data_collection/eachchild_method.md) | @getshort(../data_collection/eachchild_method.md) |
+| [](api/data_collection/eachparent_method.md) | @getshort(../data_collection/eachparent_method.md) |
+| [](api/data_collection/exists_method.md) | @getshort(../data_collection/exists_method.md) |
+| [](api/data_collection/filter_method.md) | @getshort(../data_collection/filter_method.md) |
+| [](api/data_collection/find_method.md) | @getshort(../data_collection/find_method.md) |
+| [](api/data_collection/findall_method.md) | @getshort(../data_collection/findall_method.md) |
+| [](api/data_collection/getfilters_method.md) | @getshort(../data_collection/getfilters_method.md) |
+| [](api/data_collection/getid_method.md) | @getshort(../data_collection/getid_method.md) |
+| [](api/data_collection/getindex_method.md) | @getshort(../data_collection/getindex_method.md) |
+| [](api/data_collection/getitem_method.md) | @getshort(../data_collection/getitem_method.md) |
+| [](api/data_collection/getnearid_method.md) | @getshort(../data_collection/getnearid_method.md) |
+| [](api/data_collection/getroot_method.md) | @getshort(../data_collection/getroot_method.md) |
+| [](api/data_collection/getroots_method.md) | @getshort(../data_collection/getroots_method.md) |
+| [](api/data_collection/load_method.md) | @getshort(../data_collection/load_method.md) |
+| [](api/data_collection/map_method.md) | @getshort(../data_collection/map_method.md) |
+| [](api/data_collection/move_method.md) | @getshort(../data_collection/move_method.md) |
+| [](api/data_collection/parse_method.md) | @getshort(../data_collection/parse_method.md) |
+| [](api/data_collection/remove_method.md) | @getshort(../data_collection/remove_method.md) |
+| [](api/data_collection/removeall_method.md) | @getshort(../data_collection/removeall_method.md) |
+| [](api/data_collection/resetfilter_method.md)| @getshort(../data_collection/resetfilter_method.md)|
+| [](api/data_collection/serialize_method.md) | @getshort(../data_collection/serialize_method.md) |
+| [](api/data_collection/update_method.md) | @getshort(../data_collection/update_method.md) |
diff --git a/docs/api/overview/diagram_events_overview.md b/docs/api/overview/diagram_events_overview.md
index 37c46fa50..bbbe182bb 100644
--- a/docs/api/overview/diagram_events_overview.md
+++ b/docs/api/overview/diagram_events_overview.md
@@ -8,33 +8,33 @@ description: You can explore the Diagram events in the documentation of the DHTM
| Name | Description |
| :------------------------------------------ | :------------------------------------------------- |
-| [](../diagram/aftercollapse_event.md) | @getshort(../diagram/aftercollapse_event.md) |
-| [](../diagram/afterexpand_event.md) | @getshort(../diagram/afterexpand_event.md) |
-| [](../diagram/aftersubmenuopen_event.md) | @getshort(../diagram/aftersubmenuopen_event.md) |
-| [](../diagram/beforecollapse_event.md) | @getshort(../diagram/beforecollapse_event.md) |
-| [](../diagram/beforeexpand_event.md) | @getshort(../diagram/beforeexpand_event.md) |
-| [](../diagram/beforesubmenuopen_event.md) | @getshort(../diagram/beforesubmenuopen_event.md) |
-| [](../diagram/emptyareaclick_event.md) | @getshort(../diagram/emptyareaclick_event.md) |
-| [](../diagram/emptyareadblclick_event.md) | @getshort(../diagram/emptyareadblclick_event.md) |
-| [](../diagram/emptyareamousedown_event.md) | @getshort(../diagram/emptyareamousedown_event.md) |
-| [](../diagram/groupclick_event.md) | @getshort(../diagram/groupclick_event.md) |
-| [](../diagram/groupdblclick_event.md) | @getshort(../diagram/groupdblclick_event.md) |
-| [](../diagram/groupheaderclick_event.md) | @getshort(../diagram/groupheaderclick_event.md) |
-| [](../diagram/groupheaderdblclick_event.md) | @getshort(../diagram/groupheaderdblclick_event.md) |
-| [](../diagram/groupmousedown_event.md) | @getshort(../diagram/groupmousedown_event.md) |
-| [](../diagram/itemclick_event.md) | @getshort(../diagram/itemclick_event.md) |
-| [](../diagram/itemdblclick_event.md) | @getshort(../diagram/itemdblclick_event.md) |
-| [](../diagram/itemmousedown_event.md) | @getshort(../diagram/itemmousedown_event.md) |
-| [](../diagram/itemmouseout_event.md) | @getshort(../diagram/itemmouseout_event.md) |
-| [](../diagram/itemmouseover_event.md) | @getshort(../diagram/itemmouseover_event.md) |
-| [](../diagram/lineclick_event.md) | @getshort(../diagram/lineclick_event.md) |
-| [](../diagram/linedblclick_event.md) | @getshort(../diagram/linedblclick_event.md) |
-| [](../diagram/linemousedown_event.md) | @getshort(../diagram/linemousedown_event.md) |
-| [](../diagram/linetitleclick_event.md) | @getshort(../diagram/linetitleclick_event.md) |
-| [](../diagram/linetitledblclick_event.md) | @getshort(../diagram/linetitledblclick_event.md) |
-| [](../diagram/linetitlemousedown_event.md) | @getshort(../diagram/linetitlemousedown_event.md) |
-| [](../diagram/scroll_event.md) | @getshort(../diagram/scroll_event.md) |
-| [](../diagram/shapeclick_event.md) | @getshort(../diagram/shapeclick_event.md) |
-| [](../diagram/shapedblclick_event.md) | @getshort(../diagram/shapedblclick_event.md) |
-| [](../diagram/shapeiconclick_event.md) | @getshort(../diagram/shapeiconclick_event.md) |
-| [](../diagram/shapemousedown_event.md) | @getshort(../diagram/shapemousedown_event.md) |
+| [](api/diagram/aftercollapse_event.md) | @getshort(../diagram/aftercollapse_event.md) |
+| [](api/diagram/afterexpand_event.md) | @getshort(../diagram/afterexpand_event.md) |
+| [](api/diagram/aftersubmenuopen_event.md) | @getshort(../diagram/aftersubmenuopen_event.md) |
+| [](api/diagram/beforecollapse_event.md) | @getshort(../diagram/beforecollapse_event.md) |
+| [](api/diagram/beforeexpand_event.md) | @getshort(../diagram/beforeexpand_event.md) |
+| [](api/diagram/beforesubmenuopen_event.md) | @getshort(../diagram/beforesubmenuopen_event.md) |
+| [](api/diagram/emptyareaclick_event.md) | @getshort(../diagram/emptyareaclick_event.md) |
+| [](api/diagram/emptyareadblclick_event.md) | @getshort(../diagram/emptyareadblclick_event.md) |
+| [](api/diagram/emptyareamousedown_event.md) | @getshort(../diagram/emptyareamousedown_event.md) |
+| [](api/diagram/groupclick_event.md) | @getshort(../diagram/groupclick_event.md) |
+| [](api/diagram/groupdblclick_event.md) | @getshort(../diagram/groupdblclick_event.md) |
+| [](api/diagram/groupheaderclick_event.md) | @getshort(../diagram/groupheaderclick_event.md) |
+| [](api/diagram/groupheaderdblclick_event.md) | @getshort(../diagram/groupheaderdblclick_event.md) |
+| [](api/diagram/groupmousedown_event.md) | @getshort(../diagram/groupmousedown_event.md) |
+| [](api/diagram/itemclick_event.md) | @getshort(../diagram/itemclick_event.md) |
+| [](api/diagram/itemdblclick_event.md) | @getshort(../diagram/itemdblclick_event.md) |
+| [](api/diagram/itemmousedown_event.md) | @getshort(../diagram/itemmousedown_event.md) |
+| [](api/diagram/itemmouseout_event.md) | @getshort(../diagram/itemmouseout_event.md) |
+| [](api/diagram/itemmouseover_event.md) | @getshort(../diagram/itemmouseover_event.md) |
+| [](api/diagram/lineclick_event.md) | @getshort(../diagram/lineclick_event.md) |
+| [](api/diagram/linedblclick_event.md) | @getshort(../diagram/linedblclick_event.md) |
+| [](api/diagram/linemousedown_event.md) | @getshort(../diagram/linemousedown_event.md) |
+| [](api/diagram/linetitleclick_event.md) | @getshort(../diagram/linetitleclick_event.md) |
+| [](api/diagram/linetitledblclick_event.md) | @getshort(../diagram/linetitledblclick_event.md) |
+| [](api/diagram/linetitlemousedown_event.md) | @getshort(../diagram/linetitlemousedown_event.md) |
+| [](api/diagram/scroll_event.md) | @getshort(../diagram/scroll_event.md) |
+| [](api/diagram/shapeclick_event.md) | @getshort(../diagram/shapeclick_event.md) |
+| [](api/diagram/shapedblclick_event.md) | @getshort(../diagram/shapedblclick_event.md) |
+| [](api/diagram/shapeiconclick_event.md) | @getshort(../diagram/shapeiconclick_event.md) |
+| [](api/diagram/shapemousedown_event.md) | @getshort(../diagram/shapemousedown_event.md) |
diff --git a/docs/api/overview/diagram_methods_overview.md b/docs/api/overview/diagram_methods_overview.md
index a76ba1af2..0645f6512 100644
--- a/docs/api/overview/diagram_methods_overview.md
+++ b/docs/api/overview/diagram_methods_overview.md
@@ -8,13 +8,13 @@ description: You can explore the Diagram methods in the documentation of the DHT
| Name | Description |
| :-------------------------------------- | :--------------------------------------------- |
-| [](../diagram/addshape_method.md) | @getshort(../diagram/addshape_method.md) |
-| [](../diagram/autoplace_method.md) | @getshort(../diagram/autoplace_method.md) |
-| [](../diagram/collapseitem_method.md) | @getshort(../diagram/collapseitem_method.md) |
-| [](../diagram/destructor_method.md) | @getshort(../diagram/destructor_method.md) |
-| [](../diagram/expanditem_method.md) | @getshort(../diagram/expanditem_method.md) |
-| [](../diagram/getscrollstate_method.md) | @getshort(../diagram/getscrollstate_method.md) |
-| [](../diagram/locate_method.md) | @getshort(../diagram/locate_method.md) |
-| [](../diagram/paint_method.md) | @getshort(../diagram/paint_method.md) |
-| [](../diagram/scrollto_method.md) | @getshort(../diagram/scrollto_method.md) |
-| [](../diagram/showitem_method.md) | @getshort(../diagram/showitem_method.md) |
+| [](api/diagram/addshape_method.md) | @getshort(../diagram/addshape_method.md) |
+| [](api/diagram/autoplace_method.md) | @getshort(../diagram/autoplace_method.md) |
+| [](api/diagram/collapseitem_method.md) | @getshort(../diagram/collapseitem_method.md) |
+| [](api/diagram/destructor_method.md) | @getshort(../diagram/destructor_method.md) |
+| [](api/diagram/expanditem_method.md) | @getshort(../diagram/expanditem_method.md) |
+| [](api/diagram/getscrollstate_method.md) | @getshort(../diagram/getscrollstate_method.md) |
+| [](api/diagram/locate_method.md) | @getshort(../diagram/locate_method.md) |
+| [](api/diagram/paint_method.md) | @getshort(../diagram/paint_method.md) |
+| [](api/diagram/scrollto_method.md) | @getshort(../diagram/scrollto_method.md) |
+| [](api/diagram/showitem_method.md) | @getshort(../diagram/showitem_method.md) |
diff --git a/docs/api/overview/diagram_properties_overview.md b/docs/api/overview/diagram_properties_overview.md
index 7b041d6f9..a7f3ed184 100644
--- a/docs/api/overview/diagram_properties_overview.md
+++ b/docs/api/overview/diagram_properties_overview.md
@@ -8,14 +8,14 @@ description: You can explore the Diagram properties in the documentation of the
| Name | Description |
| :------------------------------------------ | :------------------------------------------------- |
-| [](../diagram/autoplacement_property.md) | @getshort(../diagram/autoplacement_property.md) |
-| [](../diagram/defaults_property.md) | @getshort(../diagram/defaults_property.md) |
-| [](../diagram/defaultshapetype_property.md) | @getshort(../diagram/defaultshapetype_property.md) |
-| [](../diagram/exportstyles_property.md) | @getshort(../diagram/exportstyles_property.md) |
-| [](../diagram/lineconfig_property.md) | @getshort(../diagram/lineconfig_property.md) |
-| [](../diagram/margin_property.md) | @getshort(../diagram/margin_property.md) |
-| [](../diagram/scale_property.md) | @getshort(../diagram/scale_property.md) |
-| [](../diagram/select_property.md) | @getshort(../diagram/select_property.md) |
-| [](../diagram/toolbar_property.md) | @getshort(../diagram/toolbar_property.md) |
-| [](../diagram/type_property.md) | @getshort(../diagram/type_property.md) |
-| [](../diagram/typeconfig_property.md) | @getshort(../diagram/typeconfig_property.md) |
+| [](api/diagram/autoplacement_property.md) | @getshort(../diagram/autoplacement_property.md) |
+| [](api/diagram/defaults_property.md) | @getshort(../diagram/defaults_property.md) |
+| [](api/diagram/defaultshapetype_property.md) | @getshort(../diagram/defaultshapetype_property.md) |
+| [](api/diagram/exportstyles_property.md) | @getshort(../diagram/exportstyles_property.md) |
+| [](api/diagram/lineconfig_property.md) | @getshort(../diagram/lineconfig_property.md) |
+| [](api/diagram/margin_property.md) | @getshort(../diagram/margin_property.md) |
+| [](api/diagram/scale_property.md) | @getshort(../diagram/scale_property.md) |
+| [](api/diagram/select_property.md) | @getshort(../diagram/select_property.md) |
+| [](api/diagram/toolbar_property.md) | @getshort(../diagram/toolbar_property.md) |
+| [](api/diagram/type_property.md) | @getshort(../diagram/type_property.md) |
+| [](api/diagram/typeconfig_property.md) | @getshort(../diagram/typeconfig_property.md) |
diff --git a/docs/api/overview/selection_events_overview.md b/docs/api/overview/selection_events_overview.md
index c43302f56..6e0efd030 100644
--- a/docs/api/overview/selection_events_overview.md
+++ b/docs/api/overview/selection_events_overview.md
@@ -8,7 +8,7 @@ description: You can explore the Selection events in the documentation of the DH
| Name | Description |
| :--------------------------------------- | :---------------------------------------------- |
-| [](../selection/afterselect_event.md) | @getshort(../selection/afterselect_event.md) |
-| [](../selection/afterunselect_event.md) | @getshort(../selection/afterunselect_event.md) |
-| [](../selection/beforeselect_event.md) | @getshort(../selection/beforeselect_event.md) |
-| [](../selection/beforeunselect_event.md) | @getshort(../selection/beforeunselect_event.md) |
+| [](api/selection/afterselect_event.md) | @getshort(../selection/afterselect_event.md) |
+| [](api/selection/afterunselect_event.md) | @getshort(../selection/afterunselect_event.md) |
+| [](api/selection/beforeselect_event.md) | @getshort(../selection/beforeselect_event.md) |
+| [](api/selection/beforeunselect_event.md) | @getshort(../selection/beforeunselect_event.md) |
diff --git a/docs/api/overview/selection_methods_overview.md b/docs/api/overview/selection_methods_overview.md
index 0837b5c6c..2a788ecce 100644
--- a/docs/api/overview/selection_methods_overview.md
+++ b/docs/api/overview/selection_methods_overview.md
@@ -8,9 +8,9 @@ description: You can explore the Selection methods in the documentation of the D
| Name | Description |
| :----------------------------------- | :------------------------------------------ |
-| [](../selection/add_method.md) | @getshort(../selection/add_method.md) |
-| [](../selection/clear_method.md) | @getshort(../selection/clear_method.md) |
-| [](../selection/getids_method.md) | @getshort(../selection/getids_method.md) |
-| [](../selection/getitem_method.md) | @getshort(../selection/getitem_method.md) |
-| [](../selection/includes_method.md) | @getshort(../selection/includes_method.md) |
-| [](../selection/remove_method.md) | @getshort(../selection/remove_method.md) |
+| [](api/selection/add_method.md) | @getshort(../selection/add_method.md) |
+| [](api/selection/clear_method.md) | @getshort(../selection/clear_method.md) |
+| [](api/selection/getids_method.md) | @getshort(../selection/getids_method.md) |
+| [](api/selection/getitem_method.md) | @getshort(../selection/getitem_method.md) |
+| [](api/selection/includes_method.md) | @getshort(../selection/includes_method.md) |
+| [](api/selection/remove_method.md) | @getshort(../selection/remove_method.md) |
diff --git a/docs/api/selection/add_method.md b/docs/api/selection/add_method.md
index dc06c9ff6..2e0f745b8 100644
--- a/docs/api/selection/add_method.md
+++ b/docs/api/selection/add_method.md
@@ -61,7 +61,7 @@ console.log(diagram.selection.getIds()); // -> ["3"]
**Related articles**:
-- [diagram.config.select](../../../api/diagram/select_property/)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [diagram.config.select](api/diagram/select_property.md)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
**Related samples**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7)
diff --git a/docs/api/selection/afterselect_event.md b/docs/api/selection/afterselect_event.md
index 87c6a1bb0..032a56f4e 100644
--- a/docs/api/selection/afterselect_event.md
+++ b/docs/api/selection/afterselect_event.md
@@ -25,7 +25,7 @@ description: You can learn about the afterSelect event in the documentation of t
The callback of the event is called with an object with the following parameters:
- `id` - the id of the selected item
-- `join` - the applied [mode of selection](../../../api/selection/add_method/#parameters)
+- `join` - the applied [mode of selection](api/selection/add_method.md#parameters)
- `batch` - the list of selected items
### Example
@@ -65,5 +65,5 @@ editor.diagram.events.on("afterSelect", ({ id }) => {
**Related articles**:
-- [diagram.config.select](../../../api/diagram/select_property/)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [diagram.config.select](api/diagram/select_property.md)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
diff --git a/docs/api/selection/afterunselect_event.md b/docs/api/selection/afterunselect_event.md
index 29061ba00..29dc834ac 100644
--- a/docs/api/selection/afterunselect_event.md
+++ b/docs/api/selection/afterunselect_event.md
@@ -63,5 +63,5 @@ editor.diagram.events.on("afterUnSelect", ({ id }) => {
**Related articles**:
-- [diagram.config.select](../../../api/diagram/select_property/)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [diagram.config.select](api/diagram/select_property.md)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
diff --git a/docs/api/selection/beforeselect_event.md b/docs/api/selection/beforeselect_event.md
index 8a13d4f61..0a08f1ff8 100644
--- a/docs/api/selection/beforeselect_event.md
+++ b/docs/api/selection/beforeselect_event.md
@@ -25,7 +25,7 @@ description: You can learn about the beforeSelect event in the documentation of
The callback of the event is called with an object with the following parameters:
- `id` - the id of the item to select
-- `join` - the applied [mode of selection](../../../api/selection/add_method/#parameters)
+- `join` - the applied [mode of selection](api/selection/add_method.md#parameters)
- `batch` - the list of items to select
### Returns
@@ -71,5 +71,5 @@ editor.diagram.events.on("beforeSelect", ({ id }) => {
**Related articles**:
-- [diagram.config.select](../../../api/diagram/select_property/)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [diagram.config.select](api/diagram/select_property.md)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
diff --git a/docs/api/selection/beforeunselect_event.md b/docs/api/selection/beforeunselect_event.md
index 6041a5f91..98c28d8a2 100644
--- a/docs/api/selection/beforeunselect_event.md
+++ b/docs/api/selection/beforeunselect_event.md
@@ -69,5 +69,5 @@ editor.diagram.events.on("beforeUnSelect", ({ id }) => {
**Related articles**:
-- [diagram.config.select](../../../api/diagram/select_property/)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [diagram.config.select](api/diagram/select_property.md)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
diff --git a/docs/api/selection/clear_method.md b/docs/api/selection/clear_method.md
index a2cde265a..e0f6395e2 100644
--- a/docs/api/selection/clear_method.md
+++ b/docs/api/selection/clear_method.md
@@ -34,7 +34,7 @@ diagram.selection.clear();
**Related articles**:
-- [diagram.config.select](../../../api/diagram/select_property/)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [diagram.config.select](api/diagram/select_property.md)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
**Related sample**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7)
diff --git a/docs/api/selection/getids_method.md b/docs/api/selection/getids_method.md
index 91c555e73..1077aa913 100644
--- a/docs/api/selection/getids_method.md
+++ b/docs/api/selection/getids_method.md
@@ -37,7 +37,7 @@ const ids = diagram.selection.getIds(); // -> ["1", "1.1", ...] or []
**Related articles**:
-- [diagram.config.select](../../../api/diagram/select_property/)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [diagram.config.select](api/diagram/select_property.md)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
**Related samples**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7)
diff --git a/docs/api/selection/getitem_method.md b/docs/api/selection/getitem_method.md
index b58cc60aa..dd6bd2f78 100644
--- a/docs/api/selection/getitem_method.md
+++ b/docs/api/selection/getitem_method.md
@@ -60,7 +60,7 @@ const item = diagram.selection.getItem({ id: "4" });
**Related articles**:
-- [diagram.config.select](../../../api/diagram/select_property/)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [diagram.config.select](api/diagram/select_property.md)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
**Related samples**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7)
diff --git a/docs/api/selection/includes_method.md b/docs/api/selection/includes_method.md
index 6e4f353c0..47e874a76 100644
--- a/docs/api/selection/includes_method.md
+++ b/docs/api/selection/includes_method.md
@@ -47,7 +47,7 @@ diagram.selection.includes({ id: "4" }) // returns false
**Related articles**:
-- [diagram.config.select](../../../api/diagram/select_property/)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [diagram.config.select](api/diagram/select_property.md)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
**Related samples**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7)
diff --git a/docs/api/selection/remove_method.md b/docs/api/selection/remove_method.md
index 1371f7b19..a5ea9f0ff 100644
--- a/docs/api/selection/remove_method.md
+++ b/docs/api/selection/remove_method.md
@@ -67,7 +67,7 @@ console.log(diagram.selection.getIds()); // -> []
**Related articles**:
-- [diagram.config.select](../../../api/diagram/select_property/)
-- [Selecting items](../../../guides/manipulating_items/#selecting-items)
+- [diagram.config.select](api/diagram/select_property.md)
+- [Selecting items](guides/manipulating_items.md#selecting-items)
**Related samples**: [Diagram. Selection. Item selection](https://snippet.dhtmlx.com/jyoxn5h7)
diff --git a/docs/editor_overview.md b/docs/editor_overview.md
index 4b6c0c8d3..bbba2d3e1 100644
--- a/docs/editor_overview.md
+++ b/docs/editor_overview.md
@@ -4,6 +4,8 @@ title: Editor Overview
description: You can have an overview of DHTMLX JavaScript Diagram library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# DHTMLX Diagram Editor overview
The DHTMLX Diagram component provides you with Editor that allows you to try and apply your designer skills in building neat and nice-looking diagrams.
@@ -12,28 +14,28 @@ The DHTMLX Diagram component provides you with Editor that allows you to try and
The interface of the editor initialized in the default mode consists of four functional parts:
-- [toolbar](../guides/diagram_editor/toolbar/)
-- [shapebar](../guides/diagram_editor/shapebar/)
-- [grid area](../guides/diagram_editor/grid_area/)
-- [editbar](../guides/diagram_editor/editbar/)
+- [toolbar](guides/diagram_editor/toolbar.md)
+- [shapebar](guides/diagram_editor/shapebar.md)
+- [grid area](guides/diagram_editor/grid_area.md)
+- [editbar](guides/diagram_editor/editbar.md)
To build a diagram, you need either to drag the necessary items from the shapebar or create a copy of the items via the shape toolbar.
-You can adjust the attributes of the items via [sidebar options of the editbar](../guides/diagram_editor/editbar/). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items.
+You can adjust the attributes of the items via [sidebar options of the editbar](guides/diagram_editor/editbar.md). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items.
-
+
**Related sample:** [Diagram Editor. Default mode. Wide flowchart](https://snippet.dhtmlx.com/4d4k3o8p?text=diagram&mode=wide)
-You may customize the [shapebar](../guides/diagram_editor/shapebar/) and, if you have added a custom shape, [configure the editbar](/api/diagram_editor/editbar/config/properties_property/) according to the attributes of your shape.
+You may customize the [shapebar](guides/diagram_editor/shapebar.md) and, if you have added a custom shape, [configure the editbar](api/diagram_editor/editbar/config/properties_property.md) according to the attributes of your shape.
### Editor in the org chart mode
The interface of the editor initialized in the org chart mode consists of three functional parts:
-- [toolbar](../guides/diagram_editor/toolbar/)
-- [grid area](../guides/diagram_editor/grid_area/)
-- [editbar](../guides/diagram_editor/editbar/)
+- [toolbar](guides/diagram_editor/toolbar.md)
+- [grid area](guides/diagram_editor/grid_area.md)
+- [editbar](guides/diagram_editor/editbar.md)
:::note
Note, the editor in this mode does not have the shapebar
@@ -41,18 +43,18 @@ Note, the editor in this mode does not have the shapebar
To build a diagram in the org chart mode of the editor, you need to select a shape and add a new child for it. You can drag the shapes from one parent item to another. The moved item is being dragged with all its child items.
-You can adjust the attributes of the shapes via the available [sidebar options of the editbar](../guides/diagram_editor/editbar/). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items.
+You can adjust the attributes of the shapes via the available [sidebar options of the editbar](guides/diagram_editor/editbar.md). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items.
-
+
**Related sample:** [Diagram Editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja?text=diagram&mode=wide)
-If you've added a custom shape to the editor in the org chart mode, you can [configure the editbar](/api/diagram_editor/editbar/config/properties_property/) to be able to edit custom properties of the shape.
+If you've added a custom shape to the editor in the org chart mode, you can [configure the editbar](api/diagram_editor/editbar/config/properties_property.md) to be able to edit custom properties of the shape.
-You can add the **assistant** or **partner** items for a parent shape of any level. The assistant or partner items can't be the parent items.
+You can add the `assistant` or `partner` items for a parent shape of any level. The assistant or partner items can't be the parent items.
.default})
@@ -62,9 +64,9 @@ The connection between the parent shape and its partner is always horizontal. Al
The interface of the editor initialized in the mindmap mode consists of three parts:
-- [toolbar](../guides/diagram_editor/toolbar/)
-- [grid area](../guides/diagram_editor/grid_area/)
-- [editbar](../guides/diagram_editor/editbar/)
+- [toolbar](guides/diagram_editor/toolbar.md)
+- [grid area](guides/diagram_editor/grid_area.md)
+- [editbar](guides/diagram_editor/editbar.md)
:::note
Note, the editor in this mode does not have the shapebar
@@ -72,14 +74,14 @@ Note, the editor in this mode does not have the shapebar
To build a diagram in the mindmap mode of the editor, you need to select a shape and add a new child for it. You can drag the shapes from one parent item to another. The moved item is being dragged with all its child items.
-You can adjust the attributes of the shapes via the available [sidebar options of the editbar](../guides/diagram_editor/editbar/). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items.
+You can adjust the attributes of the shapes via the available [sidebar options of the editbar](guides/diagram_editor/editbar.md). To accelerate the styling process, use `Alt (Option) + Ctrl (Cmd) + С` combination to copy styles of an item and `Alt (Option) + Ctrl (Cmd) + V` to apply these styles to the chosen items.
- 
+ 
**Related sample:** [Diagram Editor. Mindmap mode. Emotions mind map](https://snippet.dhtmlx.com/lo1vm0e8?text=diagram&mode=wide)
-If you've added a custom shape to the editor in the mindmap mode, you can [configure the editbar](/api/diagram_editor/editbar/config/properties_property/) to be able to edit custom properties of the shape.
+If you've added a custom shape to the editor in the mindmap mode, you can [configure the editbar](api/diagram_editor/editbar/config/properties_property.md) to be able to edit custom properties of the shape.
## What's next
-That's all. Now you can start working with diagrams or keep exploring the inner world of JavaScript Diagram and Diagram Editor in the [guides](../guides/overview/).
+That's all. Now you can start working with diagrams or keep exploring the inner world of JavaScript Diagram and Diagram Editor in the [guides](guides/overview.md).
diff --git a/docs/groups/configuration_properties.md b/docs/groups/configuration_properties.md
index 0d4734d42..cb8aaa444 100644
--- a/docs/groups/configuration_properties.md
+++ b/docs/groups/configuration_properties.md
@@ -73,7 +73,7 @@ A group object contains a list of configuration properties which allow you to co
- `groupChildren` - (optional) an array with ids of the first-level child items of the group
- `open` - (optional) - defines whether the group is initialized in the expanded (*true*, default) or collapsed (*false*) state
:::tip
-The **open** property works when a **header** is initialized with the **closable** attribute
+The `open` property works when a `header` is initialized with the `closable` attribute
:::
- `fixed` - (optional) enables/disables the ability to move and resize the group; *false* by default
- `style` - (optional) an object with the style settings of the group. The object can contain the following attributes:
@@ -81,15 +81,15 @@ The **open** property works when a **header** is initialized with the **closable
- `stroke` - (optional) the color of the border of the group, "#DEDEDE" by default
- `fill` - (optional) the background color of the group
- `overFill` - (optional) the background color of the group when the user is holding the item and moving it into/outside the group *providing that the whole item is inside the group*
- - `partiallyFill` - (optional) the background color of the group when the user is holding the item and moving it into/outside the group *providing that a part of the item is out of the group and other settings are not defined via the **exitArea** attribute*
+ - `partiallyFill` - (optional) the background color of the group when the user is holding the item and moving it into/outside the group *providing that a part of the item is out of the group and other settings are not defined via the `exitArea` attribute*
- `exitArea` - (optional) an object with the settings which will be applied to the item when the user is dragging it out of the group (*is applied only to the first-level children of the group*). The object can contain the following attributes:
- `groupBehavior` - (optional) the behavior of the child item of the group when the user is moving it out of the group:
- - *"unbound"* (by default) - the user can move an item into or outside the group
- - *"boundNoBorderExtension"* - the user can move an item into the group but cannot drag the item outside the group if the item has been dropped inside the group. The item won't expand the borders of the group when trying to drag the item outside the group
+ - `"unbound"` (by default) - the user can move an item into or outside the group
+ - `"boundNoBorderExtension"` - the user can move an item into the group but cannot drag the item outside the group if the item has been dropped inside the group. The item won't expand the borders of the group when trying to drag the item outside the group
- *"boundBorderExtension"* - the user can move an item into the group but cannot drag the item outside the group if the item has been dropped inside the group. The item will expand the borders of the group when trying to drag the item outside the group
**Related sample**: [Diagram editor. Default mode. Groups and shapes interaction](https://snippet.dhtmlx.com/4gxy38ek)
- `padding` - (optional) defines the padding between the group and the edge of the item when moving the item inside the group
:::tip
- The **padding** attribute is available if *groupBehavior: "boundNoBorderExtension" | "boundBorderExtension"*
+ The `padding` attribute is available if *groupBehavior: `"boundNoBorderExtension"` | `"boundBorderExtension"`*
:::
- `header` - (optional) an object with configuration attributes of the header of the group. The attributes are:
- `height` - (optional) the height of the header, 40 by default
@@ -97,13 +97,13 @@ The **open** property works when a **header** is initialized with the **closable
- `text` - (optional) the text to be rendered in the header
- `fontSize` - (optional) the size of the font in pixels, 14 by default
- `lineHeight` - (optional) the height of a line, 14 by default
- - `textAlign` - (optional) the alignment of text in the header: "left", "center"(default), "right"
- - `textVerticalAlign` - (optional) the vertical alignment of text in the header: "top", "center"(default), "bottom"
- - `fontStyle` - (optional) the style of the text font: "normal" (default), "italic", "oblique"
+ - `textAlign` - (optional) the alignment of text in the header: `"left"`, `"center"`(default), `"right"`
+ - `textVerticalAlign` - (optional) the vertical alignment of text in the header: `"top"`, `"center"`(default), `"bottom"`
+ - `fontStyle` - (optional) the style of the text font: `"normal"` (default), `"italic"`, `"oblique"`
- `fontColor` - (optional) the color of the text font, "#4C4C4C" by default
- - `fontWeight` - (optional) the text font weight, possible values are: "normal", "bold", "bolder", "lighter", values "100"-"900", where "400" is the same as normal, and "600"+ is the boldest font; "500" by default
+ - `fontWeight` - (optional) the text font weight, possible values are: `"normal"`, `"bold"`, `"bolder"`, `"lighter"`, values `"100"`-`"900"`, where `"400"` is the same as normal, and `"600"`+ is the boldest font; `"500"` by default
- `iconColor` - (optional) the color of the icon of the header, "#808080" by default
- - `position` - (optional) the positioning of the group header: "top" (default) | "bottom" | "left" | "right"
+ - `position` - (optional) the positioning of the group header: `"top"` (default) | `"bottom"` | `"left"` | `"right"`
- `editable` - (optional) enables/disables the ability to edit the text of the header by double-clicking on it; *true* by default
- `closable` - (optional) shows/hides an icon intended to expand/collapse a group; *false* by default
- `enable` - (optional) shows/hides the header of the group; *true* by default
@@ -137,11 +137,11 @@ const data = [
];
~~~
-**Related article**: [Configuring groups](../../groups/)
+**Related article**: [Configuring groups](/groups/)
## Properties specific for "project" object
-The "project" object is used as a container for tasks and milestones. It works as a [group](/diagram/groups/), allows creating PERT charts of various nesting levels, and provides visual grouping.
+The "project" object is used as a container for tasks and milestones. It works as a [group](/groups/), allows creating PERT charts of various nesting levels, and provides visual grouping.
### Usage
@@ -180,9 +180,9 @@ const data = [
### Description
-When preparing a data set for a "project" object, you can use the following configuration properties:
+When preparing a data set for a `"project"` object, you can use the following configuration properties:
-- `type` - (required) the type of an element, set it to "project"
+- `type` - (required) the type of an element, set it to `"project"`
- `id` - (optional) the unique id of a project
- `parent` - (optional) the id of a project parent
- `text` - (optional) the description of a project
diff --git a/docs/groups/index.md b/docs/groups/index.md
index 2fa8b0ecb..f7e1bf75f 100644
--- a/docs/groups/index.md
+++ b/docs/groups/index.md
@@ -11,14 +11,14 @@ description: You can learn about Groups in the documentation of the DHTMLX JavaS
A group is a separate kind of the Diagram items. You can draw simple or more complicated schemes by grouping shapes or other groups in different ways. It is possible to create as one-level groups as nested groups, to configure their appearance and behavior.
:::note
-Groups are available only in the default mode of Diagram/Diagram Editor (type: "default").
+Groups are available only in the default mode of Diagram/Diagram Editor (type: `"default"`).
:::
## Creating groups
-To create a group, specify *"$group"* as a value of the **type** attribute inside the group object while preparing a related JSON structure to load into the diagram:
+To create a group, specify *"$group"* as a value of the `type` attribute inside the group object while preparing a related JSON structure to load into the diagram:
~~~jsx
const data = [
@@ -57,7 +57,7 @@ diagram.data.parse(data);
### Properties
-See [the full list of configuration properties of a `group` object](/groups/configuration_properties/) which allow you to configure the positioning and appearance of the group.
+See [the full list of configuration properties of a `group` object](groups/configuration_properties.md) which allow you to configure the positioning and appearance of the group.
## Grouping shapes in the PERT mode
@@ -98,11 +98,11 @@ const data = [
### Properties
-See [the full list of configuration properties of a `"project"` object](/groups/configuration_properties/#properties-specific-for-project-object) which allow you to configure the positioning and appearance of tasks and milestones in the project.
+See [the full list of configuration properties of a `"project"` object](groups/configuration_properties.md#properties-specific-for-project-object) which allow you to configure the positioning and appearance of tasks and milestones in the project.
## Configuring the group header
-The header of the group is disabled by default. To create a group with the header, you should specify the **header** property in the configuration object of the group.
+The header of the group is disabled by default. To create a group with the header, you should specify the `header` property in the configuration object of the group.
~~~jsx
const data = [
@@ -123,11 +123,11 @@ For example, you can define the height of the header and its position, specify t
-Check [the full list of API properties of the group object](/groups/configuration_properties/).
+Check [the full list of API properties of the group object](groups/configuration_properties.md).
### A header icon
-To be able to collapse/expand a group, you need to enable the **closable** attribute of the [header](/groups/configuration_properties/) property. As a result, an icon, which allows a user to expand/collapse a group, will be added to the header.
+To be able to collapse/expand a group, you need to enable the `closable` attribute of the [header](groups/configuration_properties.md) property. As a result, an icon, which allows a user to expand/collapse a group, will be added to the header.
~~~jsx
const data = [
@@ -146,24 +146,24 @@ const data = [
];
~~~
-You can change the color of the icon via the **iconColor** attribute of the [group object](/groups/configuration_properties/).
+You can change the color of the icon via the `iconColor` attribute of the [group object](groups/configuration_properties.md).
## Configuring the behavior of group items
By default, you can drag any child item of the group out of the group and drag it into another group.
-To change the behavior of the group items you need to use the **groupBehavior** and **padding** attributes of the **exitArea** property of the [group object](/groups/configuration_properties/).
+To change the behavior of the group items you need to use the `groupBehavior` and `padding` attributes of the `exitArea` property of the [group object](groups/configuration_properties.md).
:::note
-The **exitArea** property defines the behavior of the first-level children of the configurable group only.
+The `exitArea` property defines the behavior of the first-level children of the configurable group only.
:::
-The *"unbound"* and *"boundBorderExtension"* values of the **groupBehavior** attribute allows you to define whether the child items can be moved out of the group, and to make the group borders expand when a user is trying to drag an item outside. If needed you can also disable the ability to drag items outside the group via the *"boundNoBorderExtension"* value.
+The `"unbound"` and `"boundBorderExtension"` values of the `groupBehavior` attribute allows you to define whether the child items can be moved out of the group, and to make the group borders expand when a user is trying to drag an item outside. If needed you can also disable the ability to drag items outside the group via the `"boundNoBorderExtension"` value.
-
+
-If *groupBehavior: "boundNoBorderExtension" | "boundBorderExtension"* is set, you can specify the padding between the group and the edge of the item when moving the item inside the group. For this purpose, use the **padding** attribute:
+If *groupBehavior: `"boundNoBorderExtension"` | `"boundBorderExtension"`* is set, you can specify the padding between the group and the edge of the item when moving the item inside the group. For this purpose, use the `padding` attribute:
~~~jsx
const data = [
diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md
index a87ca3c26..6f15caca0 100644
--- a/docs/guides/ai-integrations/mcp-server.md
+++ b/docs/guides/ai-integrations/mcp-server.md
@@ -6,9 +6,9 @@ description: Connect AI coding assistants to live DHTMLX Diagram documentation v
# Using DHTMLX MCP server with AI coding assistants
-Building diagram applications requires precise control over shapes, connections, layout, and editor configuration. When an AI tool generates [DHTMLX Diagram](/diagram/) code from outdated training data, the result is mismatched APIs, missing properties, and configuration options that no longer exist.
+Building diagram applications requires precise control over shapes, connections, layout, and editor configuration. When an AI tool generates [DHTMLX Diagram](/) code from outdated training data, the result is mismatched APIs, missing properties, and configuration options that no longer exist.
-The DHTMLX Model Context Protocol (MCP) server solves this by giving AI tools direct access to the live Diagram documentation. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](/shapes/custom_shape/), the [Diagram Editor](/guides/diagram_editor/initialization/), or any other part of the library, the assistant retrieves the current reference material before generating a response.
+The DHTMLX Model Context Protocol (MCP) server solves this by giving AI tools direct access to the live Diagram documentation. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](shapes/custom_shape.md), the [Diagram Editor](guides/diagram_editor/initialization.md), or any other part of the library, the assistant retrieves the current reference material before generating a response.
**MCP endpoint**
@@ -24,14 +24,14 @@ The DHTMLX MCP server covers all major DHTMLX products, not only DHTMLX Diagram.
The MCP server indexes the full DHTMLX Diagram documentation. Common scenarios where the MCP server is useful:
-- Looking up the current API for [shapes](/shapes/default_shapes/), [lines](/lines/), [groups](/groups/), or [swimlanes](/swimlanes/).
+- Looking up the current API for [shapes](shapes/default_shapes.md), [lines](/lines/), [groups](/groups/), or [swimlanes](/swimlanes/).
- Generating ready-to-run Diagram code based on a description.
-- Exploring [Editor](/guides/diagram_editor/initialization/) configuration options, toolbar controls, and event handling.
-- Checking [export](/guides/data_export/) options and understanding how to produce PDF or PNG output.
-- Configuring auto-layout options for default-mode diagrams using the [diagram configuration](/guides/diagram/configuration/).
-- Loading diagram data and serializing it back with the available [data methods](/guides/loading_data/).
-- Handling [Diagram and Editor events](/guides/event_handling/) to respond to user interactions.
-- Exploring [TypeScript support](/guides/using_typescript/) and framework integration for React, Vue, Angular and Svelte.
+- Exploring [Editor](guides/diagram_editor/initialization.md) configuration options, toolbar controls, and event handling.
+- Checking [export](guides/data_export.md) options and understanding how to produce PDF or PNG output.
+- Configuring auto-layout options for default-mode diagrams using the [diagram configuration](guides/diagram/configuration.md).
+- Loading diagram data and serializing it back with the available [data methods](guides/loading_data.md).
+- Handling [Diagram and Editor events](guides/event_handling.md) to respond to user interactions.
+- Exploring [TypeScript support](guides/using_typescript.md) and framework integration for React, Vue, Angular and Svelte.
## How DHTMLX MCP server works
diff --git a/docs/guides/customization.md b/docs/guides/customization.md
index 442e02adb..b0a67a1db 100644
--- a/docs/guides/customization.md
+++ b/docs/guides/customization.md
@@ -16,7 +16,7 @@ A shape object provides a wide range of properties that you can use to modify th
-A good way to style all the shapes of the same type at once is to specify the styling settings for the shapes via the [`defaults`](/api/diagram/defaults_property/) property of the diagram:
+A good way to style all the shapes of the same type at once is to specify the styling settings for the shapes via the [`defaults`](api/diagram/defaults_property.md) property of the diagram:
~~~jsx
const defaults = {
@@ -36,7 +36,7 @@ const defaults = {
};
~~~
-[See the full list of the shape object properties](../../shapes/configuration_properties/).
+[See the full list of the shape object properties](shapes/configuration_properties.md).
### Styling lines
@@ -55,7 +55,7 @@ const data = [
];
~~~
-[See the full list of the line object properties](../../lines/configuration_properties/).
+[See the full list of the line object properties](lines/configuration_properties.md).
Check the example:
@@ -63,7 +63,7 @@ Check the example:
## Defining the shape's template
-You can create a customized diagram by adding new types of shapes into the diagram and defining templates for them. For this purpose, use the [](../api/diagram/addshape_method.md) method of the diagram object.
+You can create a customized diagram by adding new types of shapes into the diagram and defining templates for them. For this purpose, use the [`addShape()`](api/diagram/addshape_method.md) method of the diagram object.
### Example in the default mode
@@ -104,13 +104,13 @@ The stylization doesn't work with the parent item of the moved item and with the
### Styling the group
-To specify a custom style for a group, you can use the `style` property of the [group object](../../groups/configuration_properties/). For example:
+To specify a custom style for a group, you can use the `style` property of the [group object](groups/configuration_properties.md). For example:
### Styling the group header
-You can change the default style of the group header via the attributes of the `header` property of the [group object](../../groups/configuration_properties/).
+You can change the default style of the group header via the attributes of the `header` property of the [group object](groups/configuration_properties.md).
@@ -118,7 +118,7 @@ You can change the default style of the group header via the attributes of the `
### Styling the swimlane
-You can customize the `strokeWidth`, `stroke`, and `fill` settings of a swimlane via the `style` property of the [swimlane object](../../swimlanes/configuration_properties/#properties-of-a-swimlane):
+You can customize the `strokeWidth`, `stroke`, and `fill` settings of a swimlane via the `style` property of the [swimlane object](swimlanes/configuration_properties.md#properties-of-a-swimlane):
~~~jsx
const data = [
@@ -148,7 +148,7 @@ const data = [
### Styling the swimlane headers/sub-headers
-The `header`, `subHeaderRows`, and `subHeaderCols` properties of a [swimlane object](../../swimlanes/configuration_properties/#properties-of-a-swimlane) include sets of additional attributes for customizing the header and subheaders of the swimlane.
+The `header`, `subHeaderRows`, and `subHeaderCols` properties of a [swimlane object](swimlanes/configuration_properties.md#properties-of-a-swimlane) include sets of additional attributes for customizing the header and subheaders of the swimlane.
For example, you can change the background colors of the top subheaders of the swimlane via the `subHeaderCols` property:
@@ -196,7 +196,7 @@ Check the full example:
### Styling swimlane cells
-If you need to customize a separate cell of the swimlane, use the `style` property of the [swimlane cell object](../../swimlanes/configuration_properties/#properties-of-a-swimlane-cell) (`type:"$sgroup"`).
+If you need to customize a separate cell of the swimlane, use the `style` property of the [swimlane cell object](swimlanes/configuration_properties.md#properties-of-a-swimlane-cell) (`type:"$sgroup"`).
~~~jsx
const data = [
diff --git a/docs/guides/data_export.md b/docs/guides/data_export.md
index ce32f08ae..ba774105a 100644
--- a/docs/guides/data_export.md
+++ b/docs/guides/data_export.md
@@ -6,7 +6,7 @@ description: You can learn about exporting Diagram in the documentation of the D
# Exporting Diagram
-You can easily export a diagram into the PDF or PNG format via the related [pdf()](../../api/export/pdf_method/)/[png()](../../api/export/png_method/) methods of the Export object:
+You can easily export a diagram into the PDF or PNG format via the related [pdf()](api/export/pdf_method.md)/[png()](api/export/png_method.md) methods of the Export object:
@@ -14,8 +14,8 @@ To adjust the export settings, pass an object with configuration options to the
Check the list of available settings:
-- for the [pdf()](../../api/export/pdf_method/) method
-- for the [png()](../../api/export/png_method/) method
+- for the [pdf()](api/export/pdf_method.md) method
+- for the [png()](api/export/png_method.md) method
## Exporting styles
@@ -24,7 +24,7 @@ By default, all css styles included to the Diagram page are sent to the export s
The library allows you:
- to prevent all styles from being sent to the export service via setting
-the [](../api/diagram/exportstyles_property.md) configuration property of the Diagram object to *false*:
+the [`exportStyles`](api/diagram/exportstyles_property.md) configuration property of the Diagram object to *false*:
~~~jsx
const diagram = new dhx.Diagram("diagram_container", {
@@ -32,7 +32,7 @@ const diagram = new dhx.Diagram("diagram_container", {
});
~~~
-- to define a set of styles that you want to be exported via setting absolute paths to the desired styles to the [](../api/diagram/exportstyles_property.md) array:
+- to define a set of styles that you want to be exported via setting absolute paths to the desired styles to the [`exportStyles`](api/diagram/exportstyles_property.md) array:
diff --git a/docs/guides/diagram/configuration.md b/docs/guides/diagram/configuration.md
index 775f79845..addc4e9ae 100644
--- a/docs/guides/diagram/configuration.md
+++ b/docs/guides/diagram/configuration.md
@@ -10,7 +10,7 @@ DHTMLX Diagram provides a wide range of options for configuration. You can chang
### Setting the Diagram mode
-There are the following Diagram modes you can choose from: **"default"**, **"org"**, **"mindmap"**, **"pert"**. Their detailed description is given in the [Diagram overview](/diagram) article. You can specify the necessary type via the [type](/api/diagram/type_property/) configuration option, as follows:
+There are the following Diagram modes you can choose from: `"default"`, `"org"`, `"mindmap"`, `"pert"`. Their detailed description is given in the [Diagram overview](/) article. You can specify the necessary type via the [type](api/diagram/type_property.md) configuration option, as follows:
~~~jsx
const diagram = new dhx.Diagram("diagram_container", {
@@ -21,7 +21,7 @@ diagram.data.parse(data);
### Setting the default shape type
-It is possible to set the default type for all the shapes via the [](../../api/diagram/defaultshapetype_property.md) attribute of the diagram configuration object:
+It is possible to set the default type for all the shapes via the [`defaultShapeType`](api/diagram/defaultshapetype_property.md) attribute of the diagram configuration object:
~~~jsx {3}
const diagram = new dhx.Diagram("diagram_container", {
@@ -35,14 +35,14 @@ This value will be applied, if the configuration object of the shape doesn't con
The default types of shapes are:
-- *"rectangle"* - for the diagram in the default mode
-- *"card"* - for the diagram in the default mode or the org chart mode
-- *"topic"* - for the diagram in the mindmap mode
-- *"task"* - for the diagram in the PERT mode
+- `"rectangle"` - for the diagram in the default mode
+- `"card"` - for the diagram in the default mode or the org chart mode
+- `"topic"` - for the diagram in the mindmap mode
+- `"task"` - for the diagram in the PERT mode
## Setting the default line type
-You can set a common type for all the connector lines of the diagram via the `lineType` parameter of the [](../../api/diagram/lineconfig_property.md) property of the diagram configuration object:
+You can set a common type for all the connector lines of the diagram via the `lineType` parameter of the [`lineConfig`](api/diagram/lineconfig_property.md) property of the diagram configuration object:
~~~jsx {3-5}
const diagram = new dhx.Diagram("diagram_container", {
@@ -60,7 +60,7 @@ This value is applied, if the line object doesn't contain the `type` property.
There is a great possibility to escape operating with a big data set while preparing it for loading into the diagram. You can specify the default configuration for all shapes and lines of the necessary types and, therefore, reduce the amount of records in your code.
-For this purpose, use the [](../../api/diagram/defaults_property.md) property of the diagram configuration object:
+For this purpose, use the [`defaults`](api/diagram/defaults_property.md) property of the diagram configuration object:
@@ -70,12 +70,12 @@ The `defaults` object contains a number of `key:value` pairs where the *key* is
The `type` and `id` attributes can not be defined in the default configuration of a shape/line
:::
-Check the full list of configuration properties of a [shape](../../../shapes/configuration_properties/) and [line](../../../lines/configuration_properties/).
+Check the full list of configuration properties of a [shape](shapes/configuration_properties.md) and [line](lines/configuration_properties.md).
## Arranging shapes in the mindmap mode of Diagram
In the mindmap mode of Diagram, the arrangement of child shapes relative to the root shape is defined automatically by the main algorithm.
-To change the default direction of the child shapes, use the [](../../api/diagram/typeconfig_property.md) configuration property on initialization of the diagram.
+To change the default direction of the child shapes, use the [`typeConfig`](api/diagram/typeconfig_property.md) configuration property on initialization of the diagram.
:::note
The `typeConfig` configuration property is not available in the Diagram Editor
@@ -88,13 +88,13 @@ The property allows you to:
### Setting direction for all child shapes
-To set the child shapes to the right/left of the root shape, use the `direction` attribute of the [](../../api/diagram/typeconfig_property.md) property:
+To set the child shapes to the right/left of the root shape, use the `direction` attribute of the [`typeConfig`](api/diagram/typeconfig_property.md) property:
### Setting direction for individual child shape
-You can set the mandatory direction for specific child shapes via the `side` attribute of the [](../../api/diagram/typeconfig_property.md) property. The attribute is an object that contains a set of `key:value` pairs where *key* is the direction of the shapes (left, right) and *value* is an array with the ids of the shapes.
+You can set the mandatory direction for specific child shapes via the `side` attribute of the [`typeConfig`](api/diagram/typeconfig_property.md) property. The attribute is an object that contains a set of `key:value` pairs where *key* is the direction of the shapes (left, right) and *value* is an array with the ids of the shapes.
@@ -102,7 +102,7 @@ Other child shapes that are not set in the side option will be arranged automati
## Setting date format in the PERT mode of Diagram
-In the PERT mode of Diagram, you can specify the necessary format of rendering dates in the shapes of the **task** type. For this, use the `dateFormat` attribute of the [](../../api/diagram/typeconfig_property.md) property:
+In the PERT mode of Diagram, you can specify the necessary format of rendering dates in the shapes of the `task` type. For this, use the `dateFormat` attribute of the [`typeConfig`](api/diagram/typeconfig_property.md) property:
~~~jsx {3-5}
const diagram = new dhx.Diagram("diagram_container", {
@@ -115,13 +115,13 @@ const diagram = new dhx.Diagram("diagram_container", {
## Positioning Diagram and shapes
-You can specify the position of a diagram on a page and set margins for shapes inside the [](../../api/diagram/margin_property.md) attribute of the diagram configuration object:
+You can specify the position of a diagram on a page and set margins for shapes inside the [`margin`](api/diagram/margin_property.md) attribute of the diagram configuration object:
## 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 [`autoplacement`](/api/diagram/autoplacement_property/) 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.md) 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", {
@@ -141,39 +141,39 @@ diagram.autoPlace();
The property can contain the following options:
-- `mode` - (*string*) optional, the mode of connecting shapes, *"direct"* (by default) or *"edges"*
+- `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"*
+- `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
-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.
+Autoplacement will be applied only after the [`autoPlace()`](api/diagram/autoplace_method.md) 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.
:::
-
+
**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.
+If necessary, you can scale a diagram to fit your application. It can be done with the help of the [`scale`](api/diagram/scale_property.md) option.
By default, its value is set to 1. So, to zoom in on a diagram, set the option to a value larger than 1 and to zoom out - smaller than 1, correspondingly.
## Setting toolbar for shapes
-DHTMLX Diagram allows you to specify a toolbar with icons for Diagram shapes to simplify interaction with them. You can enable the shape toolbar via the [](../../api/diagram/toolbar_property.md) option of the diagram configuration object:
+DHTMLX Diagram allows you to specify a toolbar with icons for Diagram shapes to simplify interaction with them. You can enable the shape toolbar via the [`toolbar`](api/diagram/toolbar_property.md) option of the diagram configuration object:
## Enabling items selection
-It is possible to activate selection of items in a diagram. You need to make use of the [](../../api/diagram/select_property.md) attribute of the diagram configuration object. Once you've enabled selection in a diagram, you can make use of the Selection object API to [work with the items selection](/guides/manipulating_items/#selecting-items).
+It is possible to activate selection of items in a diagram. You need to make use of the [`select`](api/diagram/select_property.md) attribute of the diagram configuration object. Once you've enabled selection in a diagram, you can make use of the Selection object API to [work with the items selection](guides/manipulating_items.md#selecting-items).
:::note
-[The predefined set of events](../../../api/selection/#events) of the selection object can help you to define the way of processing the behavior of the diagram during selecting/unselecting items
+[The predefined set of events](/api/selection/#events) of the selection object can help you to define the way of processing the behavior of the diagram during selecting/unselecting items
:::
diff --git a/docs/guides/diagram/initialization.md b/docs/guides/diagram/initialization.md
index e0b8574b6..adc2af52e 100644
--- a/docs/guides/diagram/initialization.md
+++ b/docs/guides/diagram/initialization.md
@@ -82,7 +82,7 @@ You can initialize a Diagram in a container, in the document body, or in a layou
To initialize a diagram in a container, use the `dhx.Diagram` constructor and pass the following two parameters to the constructor function:
-- a container to place a Diagram into, let's give it the *"diagram_container"* id:
+- a container to place a Diagram into, let's give it the `"diagram_container"` id:
~~~html title="index.html"
@@ -127,7 +127,7 @@ layout.getCell("diagram").attach(diagram);
### Configuration properties
-To change the [configuration of a diagram](/guides/diagram/configuration/), you can specify the desired property in the config object passed as a second parameter of the constructor function.
+To change the [configuration of a diagram](guides/diagram/configuration.md), you can specify the desired property in the config object passed as a second parameter of the constructor function.
~~~jsx
const diagram = new dhx.Diagram("diagram_container", {
@@ -136,11 +136,11 @@ const diagram = new dhx.Diagram("diagram_container", {
});
~~~
-See [the full list of configuration properties of Diagram](../../../api/diagram/api_overview/#diagram-properties).
+See [the full list of configuration properties of Diagram](api/diagram/api_overview.md#diagram-properties).
**Related sample**: [Diagram Editor. Default mode. Wide flowchart](https://snippet.dhtmlx.com/4d4k3o8p)
-Alternatively, you can get access to some option and set/modify its value via the diagram **config** object. Don't forget to call the [](../../api/diagram/paint_method.md) method to re-render the diagram with a new configuration:
+Alternatively, you can get access to some option and set/modify its value via the diagram `config` object. Don't forget to call the [`paint()`](api/diagram/paint_method.md) method to re-render the diagram with a new configuration:
~~~jsx
const diagram = new dhx.Diagram("diagram_container");
@@ -152,4 +152,4 @@ diagram.paint();
## Loading data into Diagram
-Detailed information on loading data into DHTMLX Diagram is given in the [Loading and Storing Data](../../../guides/loading_data/) article.
+Detailed information on loading data into DHTMLX Diagram is given in the [Loading and Storing Data](guides/loading_data.md) article.
diff --git a/docs/guides/diagram/scrolling_diagram.md b/docs/guides/diagram/scrolling_diagram.md
index d3c8a83e9..67ae19a44 100644
--- a/docs/guides/diagram/scrolling_diagram.md
+++ b/docs/guides/diagram/scrolling_diagram.md
@@ -10,17 +10,17 @@ By default the component's size is set automatically to fit the content. If nece
## Scrolling diagram
-You can scroll a diagram to the area where the necessary item is situated via the [](../../api/diagram/showitem_method.md) method of the diagram object.
+You can scroll a diagram to the area where the necessary item is situated via the [`showItem()`](api/diagram/showitem_method.md) method of the diagram object.
-As an alternative way, you can scroll to the necessary position on the diagram by using the [](../../api/diagram/scrollto_method.md) method.
+As an alternative way, you can scroll to the necessary position on the diagram by using the [`scrollTo()`](api/diagram/scrollto_method.md) method.
## Getting scroll state
-The Diagram API allows you to get the current position of the scroll via the related [](../../api/diagram/getscrollstate_method.md) method:
+The Diagram API allows you to get the current position of the scroll via the related [`getScrollState()`](api/diagram/getscrollstate_method.md) method:
~~~jsx
// returning the initial scroll position
@@ -31,9 +31,9 @@ It returns an object with the horizontal and vertical scroll position.
## Catching diagram scrolling
-You can catch the start of Diagram scrolling using the [](../../api/diagram/scroll_event.md) event. The handler function takes the position of the scroll as a parameter:
+You can catch the start of Diagram scrolling using the [`scroll`](api/diagram/scroll_event.md) event. The handler function takes the position of the scroll as a parameter:
-- **pos** - (*object*) the position of a scroll as an object with x and y attributes
+- `pos` - (*object*) the position of a scroll as an object with x and y attributes
~~~jsx
diagram.events.on("Scroll", (position) => {
diff --git a/docs/guides/diagram_editor/editbar.md b/docs/guides/diagram_editor/editbar.md
index 589724ffd..0508297bf 100644
--- a/docs/guides/diagram_editor/editbar.md
+++ b/docs/guides/diagram_editor/editbar.md
@@ -6,7 +6,7 @@ description: You can learn about the Editbar of editor in the documentation of t
# Editbar
-You can configure Editbar controls for each Diagram element separately and for a [group of elements](/guides/items_index) taking into account various conditions. For this purpose, use the Editbar [`properties`](api/diagram_editor/editbar/config/properties_property.md) config.
+You can configure Editbar controls for each Diagram element separately and for a [group of elements](guides/items_index.md) taking into account various conditions. For this purpose, use the Editbar [`properties`](api/diagram_editor/editbar/config/properties_property.md) config.
If you want to configure Editbar controls for an individual [shape](/category/shapes), you need to specify the corresponding **shape type** within the [`properties`](api/diagram_editor/editbar/config/properties_property.md) config as shown in the example below:
@@ -27,14 +27,14 @@ const editor = new dhx.DiagramEditor("editor_container", {
});
~~~
-To configure a [group of elements](/guides/items_index), you need to use the following service properties within the [`properties`](api/diagram_editor/editbar/config/properties_property.md) config:
+To configure a [group of elements](guides/items_index.md), you need to use the following service properties within the [`properties`](api/diagram_editor/editbar/config/properties_property.md) config:
- [`$default`](#configure-editbar-for-the-grid-area) - allows configuring Editbar controls if no elements are selected, or more than one element is selected
- [`$shape`](#configure-editbar-for-shapes) - allows configuring Editbar controls for [all shapes including custom shapes](/category/shapes)
-- [`$group`](#configure-editbar-for-group-elements) - allows configuring Editbar controls for all elements with the [**group**](/groups/) type
-- [`$swimlane`](#configure-editbar-for-swimlanes) - allows configuring Editbar controls for all elements with the [**swimlane**](/swimlanes/) type
-- [`$line`](#configure-editbar-for-lines) allows configuring Editbar controls for all elements with the [**line**](/lines/) type
-- [`$lineTitle`](#configure-editbar-for-line-titles) - allows configuring Editbar controls for all elements with the [**lineTitle**](/line_titles/) type
+- [`$group`](#configure-editbar-for-group-elements) - allows configuring Editbar controls for all elements with the [`group`](/groups/) type
+- [`$swimlane`](#configure-editbar-for-swimlanes) - allows configuring Editbar controls for all elements with the [`swimlane`](/swimlanes/) type
+- [`$line`](#configure-editbar-for-lines) allows configuring Editbar controls for all elements with the [`line`](/lines/) type
+- [`$lineTitle`](#configure-editbar-for-line-titles) - allows configuring Editbar controls for all elements with the [`lineTitle`](/line_titles/) type
@@ -54,7 +54,7 @@ properties: {
}
~~~
-**Related complex controls:** [Grid step](/api/diagram_editor/editbar/complex_controls/gridstep/), [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/)
+**Related complex controls:** [Grid step](api/diagram_editor/editbar/complex_controls/gridstep.md), [Border](api/diagram_editor/editbar/complex_controls/border.md), [Arrange](api/diagram_editor/editbar/complex_controls/arrange.md)
## Configure Editbar for shapes
@@ -75,11 +75,11 @@ properties: {
}
~~~
-**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/), [Position](/api/diagram_editor/editbar/complex_controls/position/), [Size](/api/diagram_editor/editbar/complex_controls/size/), [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/)
+**Related complex controls:** [Border](api/diagram_editor/editbar/complex_controls/border.md), [Arrange](api/diagram_editor/editbar/complex_controls/arrange.md), [Position](api/diagram_editor/editbar/complex_controls/position.md), [Size](api/diagram_editor/editbar/complex_controls/size.md), [Text align](api/diagram_editor/editbar/complex_controls/textalign.md), [Text style](api/diagram_editor/editbar/complex_controls/textstyle.md)
## Configure Editbar for group elements
-The `$group` service property allows configuring Editbar controls for all elements with the [**group**](/groups/) type.
+The `$group` service property allows configuring Editbar controls for all elements with the [`group`](/groups/) type.
~~~jsx
properties: {
@@ -93,11 +93,11 @@ properties: {
}
~~~
-**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/), [Header](/api/diagram_editor/editbar/complex_controls/header/), [Header common](/api/diagram_editor/editbar/complex_controls/headercommon/), [Header position](/api/diagram_editor/editbar/complex_controls/headerposition/), [Size](/api/diagram_editor/editbar/complex_controls/size/), [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/)
+**Related complex controls:** [Border](api/diagram_editor/editbar/complex_controls/border.md), [Arrange](api/diagram_editor/editbar/complex_controls/arrange.md), [Header](api/diagram_editor/editbar/complex_controls/header.md), [Header common](api/diagram_editor/editbar/complex_controls/headercommon.md), [Header position](api/diagram_editor/editbar/complex_controls/headerposition.md), [Size](api/diagram_editor/editbar/complex_controls/size.md), [Text align](api/diagram_editor/editbar/complex_controls/textalign.md), [Text style](api/diagram_editor/editbar/complex_controls/textstyle.md)
## Configure Editbar for swimlanes
-The `$swimlane` service property allows configuring Editbar controls for all elements with the [**swimlane**](/swimlanes/) type.
+The `$swimlane` service property allows configuring Editbar controls for all elements with the [`swimlane`](/swimlanes/) type.
~~~jsx
properties: {
@@ -111,11 +111,11 @@ properties: {
}
~~~
-**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Arrange](/api/diagram_editor/editbar/complex_controls/arrange/), [Header](/api/diagram_editor/editbar/complex_controls/header/), [Header common](/api/diagram_editor/editbar/complex_controls/headercommon/), [Header position](/api/diagram_editor/editbar/complex_controls/headerposition/), [Size](/api/diagram_editor/editbar/complex_controls/size/), [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/)
+**Related complex controls:** [Border](api/diagram_editor/editbar/complex_controls/border.md), [Arrange](api/diagram_editor/editbar/complex_controls/arrange.md), [Header](api/diagram_editor/editbar/complex_controls/header.md), [Header common](api/diagram_editor/editbar/complex_controls/headercommon.md), [Header position](api/diagram_editor/editbar/complex_controls/headerposition.md), [Size](api/diagram_editor/editbar/complex_controls/size.md), [Text align](api/diagram_editor/editbar/complex_controls/textalign.md), [Text style](api/diagram_editor/editbar/complex_controls/textstyle.md)
## Configure Editbar for lines
-The `$line` service property allows configuring Editbar controls for all elements with the [**line**](/lines/) type.
+The `$line` service property allows configuring Editbar controls for all elements with the [`line`](/lines/) type.
~~~jsx
properties: {
@@ -129,11 +129,11 @@ properties: {
}
~~~
-**Related complex controls:** [Border](/api/diagram_editor/editbar/complex_controls/border/), [Line shape](/api/diagram_editor/editbar/complex_controls/lineshape/), [Pointer view](/api/diagram_editor/editbar/complex_controls/pointerview/)
+**Related complex controls:** [Border](api/diagram_editor/editbar/complex_controls/border.md), [Line shape](api/diagram_editor/editbar/complex_controls/lineshape.md), [Pointer view](api/diagram_editor/editbar/complex_controls/pointerview.md)
## Configure Editbar for line titles
-The `$lineTitle` service property allows configuring Editbar controls for all elements with the [**lineTitle**](/line_titles/) type.
+The `$lineTitle` service property allows configuring Editbar controls for all elements with the [`lineTitle`](/line_titles/) type.
~~~jsx
properties: {
@@ -148,7 +148,7 @@ properties: {
}
~~~
-**Related complex controls:** [Text align](/api/diagram_editor/editbar/complex_controls/textalign/), [Text style](/api/diagram_editor/editbar/complex_controls/textstyle/)
+**Related complex controls:** [Text align](api/diagram_editor/editbar/complex_controls/textalign.md), [Text style](api/diagram_editor/editbar/complex_controls/textstyle.md)
## Create and configure custom Editbar controls
diff --git a/docs/guides/diagram_editor/grid_area.md b/docs/guides/diagram_editor/grid_area.md
index 09e6d9bc9..5c1d80e1b 100644
--- a/docs/guides/diagram_editor/grid_area.md
+++ b/docs/guides/diagram_editor/grid_area.md
@@ -11,7 +11,7 @@ Grid area is an area intended for editing a diagram. You can easily add new item
In this section you will find what interface elements are available for each diagram item depending on the mode the editor is initialized in. The section also explains how to facilitate ease of designing a diagram by using keyboard shortcuts or operating several selected items at once.
:::note
-Distance between points in the Grid area depends on the value of the [grid step](/api/diagram_editor/editor/config/gridstep_property/)
+Distance between points in the Grid area depends on the value of the [grid step](api/diagram_editor/editor/config/gridstep_property.md)
:::
## Managing shapes
@@ -20,18 +20,18 @@ Distance between points in the Grid area depends on the value of the [grid step]
You can drag shapes from the shapebar into the grid area to place them at the desired positions and connect them.
-
+
When you click on any shape, it becomes editable and gets personal interface elements:
- a toolbar with controls:
- - *"copy"* - to create a copy of the shape (except for the shape placed inside a group or a swimlane)
- - *"connect"* - to activate the mode for setting connections to a different shape
- - *"remove"* - to delete the selected shape
+ - `"copy"` - to create a copy of the shape (except for the shape placed inside a group or a swimlane)
+ - `"connect"` - to activate the mode for setting connections to a different shape
+ - `"remove"` - to delete the selected shape
- resizing handles (pull the handles of the editable shape to change its sizes)
- a rotate icon (press the icon to rotate the shape)
-When the connection mode is enabled for a shape, you can set links to other shapes, adjust their position and form, as well as delete unnecessary links via the "remove" toolbar control.
+When the connection mode is enabled for a shape, you can set links to other shapes, adjust their position and form, as well as delete unnecessary links via the `"remove"` toolbar control.
Double-click the text of a shape to edit it.
@@ -41,25 +41,25 @@ You can drag shapes to place them at the desired positions relative to the root
You can drag shapes from one parent item to another. The moved item is dragged with all its children.
-
+
-
+
When you click on any shape, it becomes editable and gets personal interface elements:
- a toolbar that may include the following controls:
- - *"add"* - to add a new child for the selected shape
+ - `"add"` - to add a new child for the selected shape
- *"add assistant"* - to add an assistant for the selected shape
- *"add partner"* - to add a partner for the selected shape
- *"align vertically"* - to arrange children of the shape vertically
- *"align horizontally"* - to arrange children of the shape horizontally
- - *"remove"* - to delete the selected shape (except for the root one) with its children
+ - `"remove"` - to delete the selected shape (except for the root one) with its children
- resizing handles (pull the handles of the editable shape to change its sizes)
- an icon to collapse/expand child shapes (if there are any)
When you click on an assistant or partner shape, it becomes editable and gets personal interface elements:
-- *"remove"* - to delete the selected shape
+- `"remove"` - to delete the selected shape
Double-click the text of a shape to edit it.
@@ -67,15 +67,15 @@ Double-click the text of a shape to edit it.
You can drag shapes to place them at the desired positions relative to the root shape, or drag the root shape to move the whole diagram. If you drag the parent shape, the shape will be moved with all its child shapes. To add a new shape, select a shape and add a new child for it. The shapes can be dragged from one parent item to another. The moved item is dragged with all its children.
-
+
When you click on any shape, it becomes editable and gets personal interface elements:
- a toolbar with controls:
- - *"add"* - to add a new child for the selected shape (except for the root one)
- - *"addLeft"* - to add a new child to the left of the root shape
- - *"addRight"* - to add a new child to the right of the root shape
- - *"remove"* - to delete the selected shape (except for the root one) with its children
+ - `"add"` - to add a new child for the selected shape (except for the root one)
+ - `"addLeft"` - to add a new child to the left of the root shape
+ - `"addRight"` - to add a new child to the right of the root shape
+ - `"remove"` - to delete the selected shape (except for the root one) with its children
- resizing handles (pull the handles of the editable shape to change its sizes)
- an icon to collapse/expand child shapes
@@ -85,23 +85,23 @@ Double-click the text of a shape to edit it.
In the default mode, you can set links to other shapes, adjust their position and form, as well as add text to the line and delete unnecessary links.
-
+
In the default mode, you can also add a text to the line by double-clicking on it. Click the text to define its direction or delete it. Double-click the text to edit it.
-
+
## Managing groups
You can drag groups from the shapebar into the grid area to place them at the desired positions. You can put several shapes or other groups into a group and move them as a unit, copy, or delete.
-
+
When you click on any group, it becomes editable and gets personal interface elements:
- a toolbar with controls:
- - *"copy"* - to create a copy of the group (except for the group placed inside another group or a swimlane);
- - *"remove"* - to delete the selected group;
+ - `"copy"` - to create a copy of the group (except for the group placed inside another group or a swimlane);
+ - `"remove"` - to delete the selected group;
- resizing handles (pull the handles of the editable group to change its sizes).
Double-click the text in the header of the group to edit it.
@@ -110,30 +110,30 @@ Double-click the text in the header of the group to edit it.
You can drag a swimlane from the shapebar into the grid area to place it at the desired position.
-
+
When you click on any swimlane, it becomes editable and gets personal interface elements:
- a toolbar with controls:
- - *"addRowLast"* - to add a new row at the end of the swimlane
- - *"addColumnLast"* - to add a new column at the end of the swimlane
- - *"copy"* - to create a copy of the swimlane
- - *"remove"* - to delete the selected swimlane
+ - `"addRowLast"` - to add a new row at the end of the swimlane
+ - `"addColumnLast"` - to add a new column at the end of the swimlane
+ - `"copy"` - to create a copy of the swimlane
+ - `"remove"` - to delete the selected swimlane
- resizing handles (pull the handles of the editable swimlane to change its sizes)
Besides, there are the abilities to add, move, or remove columns or rows of the swimlane via the options of the context menu. The context menu will appear after the user clicks on the icon of a swimlane subheader.
-
+
Note, that some options of moving the first/last columns and rows are deactivated by internal settings of a swimlane.
## Editing attributes of an item
-After selecting an item in the grid area, you can update its attributes [via the sidebar options in the editbar of the editor](../../../guides/diagram_editor/editbar/).
+After selecting an item in the grid area, you can update its attributes [via the sidebar options in the editbar of the editor](guides/diagram_editor/editbar.md).
## Configuring the toolbar of an item
-You can customize the personal toolbar of shapes, groups, swimlanes according to your needs via the [shapeToolbar](../../../api/diagram_editor/editor/config/shapetoolbar_property/) property of the editor.
+You can customize the personal toolbar of shapes, groups, swimlanes according to your needs via the [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) property of the editor.
## Enabling/disabling snap lines
@@ -143,7 +143,7 @@ The feature is available only in the default mode of Editor
From v5.0, the Grid area is equipped with snap lines which will simplify the process of placing shapes symmetrically to each other.
-If you need to change the width and color of the lines, or to hide them at all, use the [magnetic](../../../api/diagram_editor/editor/config/magnetic_property/) property of Editor.
+If you need to change the width and color of the lines, or to hide them at all, use the [magnetic](api/diagram_editor/editor/config/magnetic_property.md) property of Editor.
## Manipulating multiple items
@@ -178,4 +178,4 @@ From v5.0, you can align or distribute a group of items by selecting them and cl
| **Align vertical centers** | Align items to the center along the y-axis |
| **Align bottom** | Align items to the bottom along the y-axis |
-
+
diff --git a/docs/guides/diagram_editor/hot_keys.md b/docs/guides/diagram_editor/hot_keys.md
index 85cd4db71..38aa2b61b 100644
--- a/docs/guides/diagram_editor/hot_keys.md
+++ b/docs/guides/diagram_editor/hot_keys.md
@@ -6,7 +6,7 @@ description: You can learn about the Hotkeys of editor in the documentation of t
# Hotkey list
-In this section you will find a set of standard hotkeys you can use while creating a diagram in the editor, descriptions of the actions performed by these hotkeys and key string parameters for those hotkeys that can be overridden. Apply the [`hotkeys`](/api/diagram_editor/editor/config/hotkeys_property/) property for managing keyboard hotkeys within the editor.
+In this section you will find a set of standard hotkeys you can use while creating a diagram in the editor, descriptions of the actions performed by these hotkeys and key string parameters for those hotkeys that can be overridden. Apply the [`hotkeys`](api/diagram_editor/editor/config/hotkeys_property.md) property for managing keyboard hotkeys within the editor.
| Hotkey combination | Description | Parameter key string |
|--------------------------------|------------------------------------------------------|-------------------------|
@@ -31,7 +31,7 @@ In this section you will find a set of standard hotkeys you can use while creati
## Inline text editor shortcuts
-The following hotkeys are available when the [inline text editor](/guides/inline_editing/) is active. They cannot be configured via the `hotkeys` property.
+The following hotkeys are available when the [inline text editor](guides/inline_editing.md) is active. They cannot be configured via the `hotkeys` property.
| Hotkey | Description |
|--------|-------------|
diff --git a/docs/guides/diagram_editor/initialization.md b/docs/guides/diagram_editor/initialization.md
index 190bf161f..2cb7f5a65 100644
--- a/docs/guides/diagram_editor/initialization.md
+++ b/docs/guides/diagram_editor/initialization.md
@@ -84,7 +84,7 @@ You can initialize a Diagram Editor in a container, in the document body, or in
To initialize Diagram Editor in a container, use the `dhx.DiagramEditor` constructor and pass the following two parameters to the constructor function:
-- a container to place Diagram Editor into, let's give it the *"editor_container"* id:
+- a container to place Diagram Editor into, let's give it the `"editor_container"` id:
~~~html title="index.html"
@@ -141,10 +141,10 @@ const editor = new dhx.DiagramEditor("editor_container", {
### Properties
-Check [the full list of configuration properties of Editor](/api/diagram_editor/editor/config/overview/).
+Check [the full list of configuration properties of Editor](api/diagram_editor/editor/config/overview.md).
## Loading data into Diagram Editor
-It is possible to load an [appropriate data set](../../../guides/loading_data/#preparing-data-to-load) into the editor via the [parse()](../../../api/diagram_editor/editor/methods/parse_method/) method of the editor.
+It is possible to load an [appropriate data set](guides/loading_data.md#preparing-data-to-load) into the editor via the [parse()](api/diagram_editor/editor/methods/parse_method.md) method of the editor.
diff --git a/docs/guides/diagram_editor/shapebar.md b/docs/guides/diagram_editor/shapebar.md
index 4e8568283..e39b65ca2 100644
--- a/docs/guides/diagram_editor/shapebar.md
+++ b/docs/guides/diagram_editor/shapebar.md
@@ -9,7 +9,7 @@ description: You can learn about the Shapebar of editor in the documentation of
Shapebar is a part of the editor that renders previews of Diagram items. You can choose the necessary items and drag them from the shapebar into the grid area.
:::note
-The shapebar is available only in the editor initialized in the default mode (type: "default").
+The shapebar is available only in the editor initialized in the default mode (type: `"default"`).
:::
## Default sections
@@ -21,7 +21,7 @@ The *Groups* and *Swimlanes* sections contain basic sets of the items.
## Custom sections
-To customize the structure of the shapebar, you should use the [`sections`](../../../api/diagram_editor/shapebar/config/sections_property/) property. It allows you to specify your own sections in the necessary order and put the items into the corresponding sections.
+To customize the structure of the shapebar, you should use the [`sections`](api/diagram_editor/shapebar/config/sections_property.md) property. It allows you to specify your own sections in the necessary order and put the items into the corresponding sections.
The `sections` property is an object with a set of *key:value* pairs where `key` is the name of a section and `value` is an array with the list of items which should be rendered in the section.
@@ -141,11 +141,11 @@ The library allows you to add several identical items (i.e. items of the same ty
To do that, you need to:
- create separate objects with different configurations for the items of the necessary type. You can create as many objects as you need
-- use the *names* of the created objects as the *types* of the items and add them into the sections of the shapebar using the [`sections`](../../../api/diagram_editor/shapebar/config/sections_property/) property
+- use the *names* of the created objects as the *types* of the items and add them into the sections of the shapebar using the [`sections`](api/diagram_editor/shapebar/config/sections_property.md) property
## Setting the preview of shapes
-To configure the preview of items rendered in the shapebar of the editor, make use of the [`preview`](../../../api/diagram_editor/shapebar/config/preview_property/) property. It is an object that contains two attributes:
+To configure the preview of items rendered in the shapebar of the editor, make use of the [`preview`](api/diagram_editor/shapebar/config/preview_property.md) property. It is an object that contains two attributes:
- `scale` - (optional) defines the scale of items rendered in the shapebar of the editor, 0.5 by default
- `gap` - (optional) specifies the space between the items rendered in the shapebar, "6px 8px" by default
@@ -167,12 +167,12 @@ const editor = new dhx.DiagramEditor("editor_container", {
### Customizing a shape preview
-To customize the appearance of a particular shape, you can apply the [preview](/shapes/configuration_properties/#properties-specific-for-the-default-mode) configuration property of a shape object.
+To customize the appearance of a particular shape, you can apply the [preview](shapes/configuration_properties.md#properties-specific-for-the-default-mode) configuration property of a shape object.
The property can be applied in two cases:
-- when setting the default configuration of a default shape via the [`defaults`](/api/diagram_editor/editor/config/defaults_property/) property of the editor object
-- when setting the default configuration of a custom shape via the `defaults` attribute of the [`addShape()`](/api/diagram/addshape_method/) method
+- when setting the default configuration of a default shape via the [`defaults`](api/diagram_editor/editor/config/defaults_property.md) property of the editor object
+- when setting the default configuration of a custom shape via the `defaults` attribute of the [`addShape()`](api/diagram/addshape_method.md) method
Let's consider three examples of configuring a shape preview:
@@ -252,7 +252,7 @@ editor.diagram.addShape("personalCard", {
## Setting the width of shapebar
-The default width of the shapebar is 300. You can change it and set any other width via the [`width`](/api/diagram_editor/shapebar/config/width_property/) property, e.g.:
+The default width of the shapebar is 300. You can change it and set any other width via the [`width`](api/diagram_editor/shapebar/config/width_property.md) property, e.g.:
~~~jsx
const editor = new dhx.DiagramEditor("editor_container", {
@@ -267,7 +267,7 @@ const editor = new dhx.DiagramEditor("editor_container", {
## Showing/hiding the Shapebar
-Whenever you need to control the visibility of a shapebar, you can use the [`show`](/api/diagram_editor/shapebar/config/show_property/) property. It allows you to hide the shapebar with particular settings on initialization of the Diagram Editor and show it later, when needed. By default the shapebar is shown.
+Whenever you need to control the visibility of a shapebar, you can use the [`show`](api/diagram_editor/shapebar/config/show_property.md) property. It allows you to hide the shapebar with particular settings on initialization of the Diagram Editor and show it later, when needed. By default the shapebar is shown.
~~~jsx
const editor = new dhx.DiagramEditor("editor_container", {
@@ -282,7 +282,7 @@ const editor = new dhx.DiagramEditor("editor_container", {
## Shapebar and shapes appearance
-You can provide the desired look and feel for the shapebar with the [`css`](/api/diagram_editor/shapebar/config/css_property/) property. It allows specifying custom CSS classes to stylize items presentation in the shapebar in your own way.
+You can provide the desired look and feel for the shapebar with the [`css`](api/diagram_editor/shapebar/config/css_property.md) property. It allows specifying custom CSS classes to stylize items presentation in the shapebar in your own way.
~~~html {6}