React Diagram - nodes.autoLayout

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

Selector: AutoLayout
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: '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.