React Diagram - nodes.autoLayout

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

Type:

String

|

Object

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

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

View Demo

orientation

Specifies the diagram layout orientation.

Type:

String

Accepted Values: 'vertical' | 'horizontal'

Use the DiagramDataLayoutOrientation enum to specify this property when the UI component 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 property 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 property when the UI component 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.