Automatic Layout in Diagram Component

13 Oct 202516 minutes to read

The Diagram component includes a set of built-in automatic layout algorithms that arrange nodes within the diagram area based on predefined layout logic. This feature, referred to as Layout, simplifies organizing nodes and their connections, providing a clear and visually appealing structure for diagrams. The Diagram component supports the following layout algorithms:

  • Organizational chart layout
  • Flowchart layout
  • Mind map tree layout
  • Radial tree layout
  • Hierarchical tree layout
  • Complex hierarchical tree layout

Defining layout

To implement an automatic layout in a diagram, configure the layout settings within the SfDiagramComponent. The layout Type, spacing, and other properties control how nodes and connectors are arranged in the diagram.

The following code illustrates how to configure an automatic layout:

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating">
    <Layout Type="LayoutType.HierarchicalTree" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing">
    </Layout>
    <SnapSettings>
        <HorizontalGridLines LineColor="white">
        </HorizontalGridLines>
        <VerticalGridLines LineColor="white">
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>

@code
{
    //Defines diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    //Defines diagram's node collection.
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    LayoutType type = LayoutType.ComplexHierarchicalTree;
    int HorizontalSpacing = 50;
    int VerticalSpacing = 50;

    private void OnNodeCreating(IDiagramObject obj)
    {
        Node node = obj as Node;
        node.Height = 60;
        node.Width = 110;
        node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeWidth = 2, StrokeColor = "none" };
    }

    private void OnConnectorCreating(IDiagramObject connector)
    {
        (connector as Connector).Type = ConnectorSegmentType.Orthogonal;
        (connector as Connector).CornerRadius = 5;
        (connector as Connector).TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6CA0DC", StrokeColor = "#6CA0DC" } };
        (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6CA0DC" };
    }

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>()
        {
            new Node() { ID="node1", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="CEO"} } },
            new Node() { ID="node2", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="COO"} } },
            new Node() { ID="node3", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="Marketing Head"} } },
            new Node() { ID="node4", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="Product Head"} } },
            new Node() { ID="node5", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="Customer Support Lead"} } },
            new Node() { ID="node6", Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation{Content="Warehouse Manager"} } },
        };
        connectors = new DiagramObjectCollection<Connector>()
        {
            new Connector() { ID="connector1", SourceID="node1", TargetID="node2" },
            new Connector() { ID="connector2", SourceID="node1", TargetID="node3" },
            new Connector() { ID="connector3", SourceID="node1", TargetID="node4" },
            new Connector() { ID="connector4", SourceID="node1", TargetID="node5" },
            new Connector() { ID="connector5", SourceID="node1", TargetID="node6" }
        };
    }
}

A complete working sample can be downloaded from GitHub

Blazor Diagram hierarchical layout example

How to Update Layout

Use the DoLayoutAsync function to re-arrange nodes in the diagram when any of the following occur:

  • Add
  • Remove
  • Move
  • Resize
  • Spacing
  • Orientation
  • Layout Type
  • Alignment

This function refreshes the layout to reflect recent updates. Invoking this method ensures that the diagram remains visually consistent and properly aligned following changes to its structure or properties. It offers an efficient mechanism for updating the diagram layout in response to user interactions or programmatic modifications, thereby maintaining smooth transitions and an organized appearance.

The function can be called on-demand, making it flexible for use in scenarios where automatic layout updates are required only at specific times, such as after multiple changes or interactions.

How to Configure Spacing in Layouts

The HorizontalSpacing and VerticalSpacing properties customize the space between successive nodes in the diagram, both horizontally and vertically. These properties help control the overall layout and visual organization of nodes, ensuring clear and consistent spacing across the diagram.

  • HorizontalSpacing: Space between nodes along the horizontal axis. Useful for flowcharts, organizational charts, or radial layouts.

  • VerticalSpacing: Space between nodes along the vertical axis. It ensures a balanced distribution of nodes in layouts such as hierarchical trees or mind maps.

Default values: HorizontalSpacing is 30 and VerticalSpacing is 30. Modify these to achieve the required layout density.

<SfDiagramComponent @ref="diagram" Width="900px" Height="800px">
    <Layout Type="LayoutType.ComplexHierarchicalTree" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing"/>
</SfDiagramComponent>

@code
{
    // Initializing the Horizontal and Vertical value.
    int HorizontalSpacing = 60;
    int VerticalSpacing = 70;

    // Update the spacing.
    public void UpdateSpacing()
    {
        Diagram.BeginUpdate();
        HorizontalSpacing += 10;
        VerticalSpacing += 10;
        Diagram.EndUpdateAsync();
    }
}

Blazor Complex Hierarchical Diagram

How to Configure Layout Orientation

Orientation is used to arrange the layout based on the direction. It determines how the nodes are aligned in the diagram. The default value for orientation is TopToBottom, which arranges the nodes vertically with the root placed at the top.

Orientation Type Description
TopToBottom Aligns the layout from top to bottom. The root node is placed at the top of the diagram.
BottomToTop Aligns the layout from bottom to top. The root node is placed at the bottom of the diagram.
LeftToRight Aligns the layout from left to right. The root node is placed on the left side of the diagram.
RightToLeft Aligns the layout from right to left. The root node is placed on the right side of the diagram.
<SfDiagramComponent @ref="diagram" Width="900px" Height="800px">
    <Layout Type="LayoutType.ComplexHierarchicalTree" @bind-Orientation="@orientation"/>
</SfDiagramComponent>

@code
{
    // Initializing the orientation value.
    LayoutOrientation orientation = LayoutOrientation.LeftToRight;
}

Blazor Complex Hierarchical Diagram

Note: Orientation is not applicable to the RadialTree layout. For the Flowchart layout, only TopToBottom and LeftToRight orientations are supported.

How to Configure Layout Alignments

HorizontalAlignment and VerticalAlignment control how the layout is positioned or stretched along the horizontal and vertical axes, respectively. These settings determine the positioning of the diagram elements (nodes and connectors) within the available space.

The HorizontalAlignment property defines horizontal alignment within the container. The default value is Auto, which aligns automatically based on content.

The possible values for HorizontalAlignment are:

Horizontal Alignment Description
Stretch Stretches the diagram element horizontally to its immediate parent, filling the available space.
Left Aligns the diagram element to the left side of its immediate parent.
Right Aligns the diagram element to the right side of its immediate parent.
Center Aligns the diagram element horizontally to the center of its immediate parent.
Auto Aligns the diagram element based on its immediate parent’s horizontal alignment property (default behavior).
<SfDiagramComponent @ref="diagram" Width="900px" Height="800px">
    <Layout Type="LayoutType.ComplexHierarchicalTree" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing" @bind-HorizontalAlignment="@horizontalAlignment"></Layout>
</SfDiagramComponent>

@code
{
    int HorizontalSpacing = 40;
    int VerticalSpacing = 40;
    // Initializing the HorizontalAlignment value.
    HorizontalAlignment horizontalAlignment = HorizontalAlignment.Center;
}

Blazor Diagram layout horizontal alignment centered

The VerticalAlignment property defines how the layout is aligned vertically within the container. The default value is Auto, which means the layout adjusts based on its content.

The possible values for VerticalAlignment are:

Vertical Alignment Description
Stretch Stretches the diagram element vertically to its immediate parent, filling the available space.
Top Aligns the diagram element to the top side of its immediate parent.
Bottom Aligns the diagram element to the bottom side of its immediate parent.
Center Aligns the diagram element vertically to the center of its immediate parent.
Auto Aligns the diagram element based on its immediate parent’s vertical alignment property (default behavior).
<SfDiagramComponent @ref="diagram" Width="900px" Height="800px">
    <Layout Type="LayoutType.ComplexHierarchicalTree" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-VerticalSpacing="@VerticalSpacing" @bind-VerticalAlignment="@verticalAlignment"></Layout>
</SfDiagramComponent>

@code
{
    int HorizontalSpacing = 40;
    int VerticalSpacing = 40;
    // Initializing the VerticalAlignment value.
    VerticalAlignment verticalAlignment = VerticalAlignment.Bottom;
}

Blazor Complex Hierarchical Diagram

How to Configure Layout Margins

The LayoutMargin property defines the space between the viewport and the layout, creating padding around the diagram. The default margin values are Left: 50, Top: 50, Right: 0, Bottom: 0.

You can customize the margin for each side (top, right, bottom, left) using the LayoutMargin object:

<SfDiagramComponent Height="600px">
    <Layout Type="LayoutType.OrganizationalChart">
        <LayoutMargin Top="@top" Bottom="@bottom" Right="@right" Left="@left"></LayoutMargin>
    </Layout>
</SfDiagramComponent>

@code
{
    // Initializing the Margin.
    int left = 60;
    int top = 50;
    int bottom = 50;
    int right = 60;
}

How to Handle Connector Segment Overlap in Layout

The SamePoint property controls whether connectors in the layout should be arranged to avoid overlapping other connectors. Setting this property to true, ensures connectors are spaced out properly to avoid any overlap, making the layout more readable and visually clear.

  • true: Connectors are arranged to avoid overlapping with other connectors (default).
  • false: Connectors can overlap with each other.

Here’s an example of how to use this property:

<SfDiagramComponent @ref="diagram" Width="900px" Height="800px">
    <Layout Type="LayoutType.ComplexHierarchicalTree" SamePoint="false"></Layout>
</SfDiagramComponent>

Blazor Diagram layout with SamePoint disabled

See also