All docs
V22.2
23.1 (CTP)
22.2
22.1
21.2
21.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.
Box
Map
Vue

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

See Also

orientation

Specifies the diagram layout orientation.

Type:

String

Accepted Values: 'horizontal' | 'vertical'

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.