Diagram Layouts
The Kendo UI for Angular Diagram provide automatic layout algorithms that arrange shapes and connections in a visually appealing and organized manner. Layouts automatically position shapes and route connections without requiring manual coordinate specification, with each algorithm suited for different types of data structures and visualization requirements.
When using layouts, you typically don't need to specify the x and y coordinates for shapes, as the layout algorithm will calculate optimal positions automatically.
The following example demonstrates all available layout algorithms in action.
Available Layout Types
The Diagram supports the following layout algorithms:
- Tree layout—Arranges shapes in a hierarchical tree structure.
- Layered layout—Organizes shapes in horizontal or vertical layers.
- Force-Directed layout—Uses physics simulation to position shapes.
Tree Layout
The tree layout arranges shapes in a hierarchical structure, making it ideal for organizational charts, decision trees, and other hierarchical data.
The Tree layout has the following subtypes:
down—The root shape is at the top and all descendants are arranged below it.up—The root shape is at the bottom and all descendants are arranged above it.left—The root shape is on the right and descendants are arranged to the left.right—The root shape is on the left and descendants are arranged to the right.mindmapHorizontal—The root shape is at the center and all descendants are arranged to the left and right in a balanced way.mindmapVertical—The root shape is at the center and all descendants are arranged above and below it in a balanced way.radial—The root shape is at the center and all descendants are arranged around it in a circle.tipOver—A variation of thedownsubtype where the root shape is at the top, direct children are arranged horizontally in a row, and grandchildren are arranged vertically in columns.
Configuration options:
horizontalSeparation—The horizontal distance between shapes at the same level.verticalSeparation—The vertical distance between levels.underneathHorizontalOffset—Horizontal offset for shapes underneath their parent.underneathVerticalSeparation—Vertical separation for underneath positioning.
The following example demonstrates hierarchical tree layout with the down subtype.
Layered Layout
The Layered Diagram layout organizes shapes into distinct horizontal or vertical layers, making it suitable for process flows, network diagrams, and workflow representations.
The Layered Diagram layout has the following sub types. Each subtype name signifies the direction in which descendant nodes are positioned with regard to their ancestor.
down—The root shape is at the top and all descendants are arranged below it.left—The root shape is on the right and descendants are arranged to the left.right—The root shape is on the left and descendants are arranged to the right.up—The root shape is at the bottom and all descendants are arranged above it.
The Layered layout has the following configuration options:
nodeDistance—The distance between nodes in the same layer.layerDistance—The distance between layers.iterations—Number of iterations for the algorithm to optimize the layout.
The following example demonstrates a process flow layered layout Diagram.
Force-Directed Layout
The Force-directed Diagram layout (also known as the spring-embedder algorithm) is based on a physical simulation of forces acting on the Diagram nodes (shapes), whereby the connections define whether two nodes act upon each other. Each link is like a spring embedded in the Diagram. The simulation attempts to find a minimum energy state, so that the springs are in their base state and do not pull or push any linked node.
The force-directed Diagram layout is non-deterministic. Each layout pass is unique, unpredictable, and not reproducible.
The following example demonstrates a force-directed layout Diagram.
Layout Grid Settings
A single Diagram instance may display multiple subgraphs, which are disconnected groups of linked shapes. Such separate subgraphs are called components.
The Diagram layout grid settings allow you to control the spacing and alignment of these components within the Diagram area. The grid settings include:
componentSpacingX—The horizontal spacing between each component inside the Diagram.componentSpacingY—The vertical spacing between each component inside the Diagram.offsetX—The left offset of the grid layout.offsetY—The top offset of the grid layout.width—The maximum width of the grid layout. When the available width is sufficient, components are arranged horizontally in a single row. When width is limited, components are stacked vertically.
The following example demonstrates the grid layout settings in action.