All docs
V20.1
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.
Box
Map
Vue

autoLayout

Specifies an auto-layout algorithm that the widget uses to build a diagram.

Type:

String

|

Object

Default Value: 'auto'
Accepted Values: 'auto' | 'off' | 'tree' | 'layered'

The layout option is in effect when a diagram is bound to a data source using the nodes option.

View Demo

orientation

Specifies the diagram layout orientation.

Type:

String

Accepted Values: 'auto' | 'vertical' | 'horizontal'

Use the DiagramDataLayoutOrientation enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Auto, Vertical, Horizontal.

type

Specifies an auto-layout algorithm that is used to automatically arrange shapes.

Type:

String

Accepted Values: 'auto' | 'off' | 'tree' | 'layered'

  • auto. The equivalent of the off value when both shape coordinates (leftExpr and topExpr) are specified; otherwise, the auto value is equivalent to layered.

  • off. The auto-layout is not applied.

  • tree. This algorithm is used to draw hierarchical diagrams. It arranges shapes in a tree structure and aligns them evenly based on their hierarchical level.

    Diagram - Tree Layout

  • layered (Sugiyama-style). This algorithm is used to draw layered graphs. It minimizes the number of connector crossings and spreads shapes evenly.

    Diagram - Layered Layout

NOTE
When the type option is set to layered or tree, predefined shape coordinates (leftExpr and topExpr) and edge points (pointsExpr) are ignored.

Use the DiagramDataLayoutType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Auto, Off, Tree, Layered.