# diagram-organization-chart

> Organization chart demonstrates hierarchical nodes with custom node and connector creation plus zoom and pan interaction.

**Framework:** blazor  **Component:** Diagram  **Variant:** organization-chart

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/diagram-organization-chart.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.Diagram
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/diagram-organization-chart/Diagram.razor

```razor
@page "/diagram/organization-model"
@using Syncfusion.Blazor.Diagram

<style>
    .e-orgchart-template-div-style {
        position: absolute;
        width: 177px;
        height: 54px;
        border: 1px solid #EEEEEE;
        background: #FFFFFF;
        box-sizing: border-box;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .e-orgchart-template-name-style {
        font-family: Roboto;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 14px;
        letter-spacing: 0.1px;
        color: #363636;
        margin-top: 8px;
        height: 8px
    }
    .e-orgchart-template-role-style {
        font-family: Roboto;
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0.1px;
        color: #6b6565;
    }
</style>

<div class="col-lg-9 control-section sb-property-border">
    <div id="diagram-space" class="content-wrapper">
        <SfDiagramComponent @ref="@Diagram" Height="690px" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating" InteractionController="@DiagramInteractions.ZoomPan">
            <ScrollSettings @bind-ScrollLimit="@scrollLimit"></ScrollSettings>
            <DataSourceSettings ID="Id" ParentID="Manager" DataSource="DataSource"></DataSourceSettings>
            <Layout @bind-Type="@Type" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-Orientation="@OrientationType" @bind-VerticalSpacing="@VerticalSpacing" @bind-HorizontalAlignment="@HorizontalAlignment" @bind-VerticalAlignment="@VerticalAlignment" GetLayoutInfo="GetLayoutInfo">
                <LayoutMargin @bind-Top="@Top" @bind-Bottom="@Bottom" @bind-Right="@Right" @bind-Left="@Left"></LayoutMargin>
            </Layout>
            <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
            <DiagramTemplates>
                <NodeTemplate>
                    @{
                        Node node1 = (context as Node);
                        string Name = (node1.Data as OrganizationalDetails)!.Name!;
                        string Role = (node1.Data as OrganizationalDetails)!.Role!;
                        <div class="e-orgchart-template-div-style">
                            <div style="text-align: center">
                                <p class="e-orgchart-template-name-style">@Name</p>
                                <p class="e-orgchart-template-role-style">@Role</p>
                            </div>
                        </div>
                    }
                </NodeTemplate>
            </DiagramTemplates>
        </SfDiagramComponent>
    </div>
</div>
@code
    {
    ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Diagram;
    private Syncfusion.Blazor.Diagram.Orientation subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;
    private SubTreeAlignmentType subTreeAlignment = SubTreeAlignmentType.Right;
    private int rows = 0;
    private string? pattern;
    private double offset = 20;
    public SfDiagramComponent? Diagram;
    public LayoutOrientation OrientationType = LayoutOrientation.TopToBottom;
    public int? HorizontalValue { get; set; } = 30;
    public int? VerticalValue { get; set; } = 30;
    public LayoutType Type = LayoutType.OrganizationalChart;
    public HorizontalAlignment HorizontalAlignment = HorizontalAlignment.Auto;
    public VerticalAlignment VerticalAlignment = VerticalAlignment.Auto;
    public int HorizontalSpacing = 30;
    public int VerticalSpacing = 30;
    public double Top = 50;
    public double Bottom = 50;
    public double Right = 50;
    public double Left = 50;
    // Defines default values for Node object
    private void OnNodeCreating(IDiagramObject obj)
    {
        Node? node = obj as Node;
        if (node!.Data is System.Text.Json.JsonElement)
        {
            node.Data = System.Text.Json.JsonSerializer.Deserialize<OrganizationalDetails>(node.Data.ToString()!);
        }
        OrganizationalDetails? organizationData = node.Data as OrganizationalDetails;
        node.Width = 177;
        node.Height = 54;
        node.Shape = new Shape()
        {
            Type = Syncfusion.Blazor.Diagram.NodeShapes.HTML,
        };
    }
    // Defines default values for Connector object
    private void OnConnectorCreating(IDiagramObject connector1)
    {
        Connector? connector = (connector1 as Connector);
        connector!.Type = ConnectorSegmentType.Orthogonal;
        connector.CornerRadius = 10;
        connector.Style = new ShapeStyle()
        {
            StrokeWidth = 1,
            StrokeDashArray = "1,1"
        };
        connector.TargetDecorator!.Shape = DecoratorShape.None;
        connector.SourceDecorator!.Shape = DecoratorShape.None;
    }
    public class OrganizationalDetails
    {
        public string? Id { get; set; }
        public string? Role { get; set; }
        public string? Color { get; set; }
        public string? Manager { get; set; }
        public string? ChartType { get; set; }
        public string? Name { get; set; }
    }
    //DataSource Items.
    public List<OrganizationalDetails> DataSource = new List<OrganizationalDetails>()
    {
        new OrganizationalDetails() { Id= "parent", Role= "CEO", Color = "#71AF17", Manager = "", ChartType = "", Name="Liam James" },
        new OrganizationalDetails() { Id = "2", Role= "Product Manager", Color = "#1859B7", Manager =  "parent", ChartType = "right", Name="Maria Andres"},
        new OrganizationalDetails() { Id = "3", Role= "Software Engineer", Color = "#2E95D8", Manager = "2", ChartType ="", Name="John Steel"},
        new OrganizationalDetails() { Id = "19", Role= "Software Engineer", Color =  "#2E95D8", Manager = "14", ChartType ="", Name="Yoshi Kenna"},
        new OrganizationalDetails() { Id = "20", Role= "Product Manager", Color = "#1859B7", Manager =  "parent", ChartType ="right", Name="Joseph Kaff"},
    };
    private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
    {
        if (rows == 0)
        {
            if (rows == 0 && options.Rows != null)
                options.Rows = null;
            Node? node = obj as Node;
            if (pattern == "LeftOrientationVertical50" || pattern == "RightOrientationVertical50")
            {
                options.Offset = -50;
            }
            if (!options.HasSubTree)
            {
                options.AlignmentType = subTreeAlignment;
                options.Orientation = subTreeOrientation;
                options.AlignmentType = subTreeAlignment;
            }
        }
        else
        {
            if (!options.HasSubTree)
            {
                options.AlignmentType = subTreeAlignment;
                options.Orientation = subTreeOrientation;
                options.Offset = offset;
            }
        }
        return options;
    }
    public void LeftToRight()
    {
        OrientationType = LayoutOrientation.LeftToRight;
    }
    public class ImageFields
    {
        public string? Text { get; set; }
    }
    private void HSpacingChange(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
    {
        HorizontalValue = (int)args.Value!;
        HorizontalSpacing = int.Parse(args.Value.ToString()!);
    }
    private void VSpacingChange(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
    {
        VerticalValue = (int)args.Value!;
        VerticalSpacing = int.Parse(args.Value.ToString()!);
    }
    private void ToptoBottomClick()
    {
        OrientationType = LayoutOrientation.TopToBottom;
    }
    private void LefttoRightClick()
    {
        OrientationType = LayoutOrientation.LeftToRight;
    }
    private void RighttoLeftClick()
    {
        OrientationType = LayoutOrientation.RightToLeft;
    }
    private void BottomtoTopClick()
    {
        OrientationType = LayoutOrientation.BottomToTop;
    }
    private async Task AlternateOrientationVertical20()
    {
        pattern = "AlternateOrientationVertical20";
        Diagram!.BeginUpdate();
        subTreeAlignment = SubTreeAlignmentType.Alternate;
        subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;
        offset = 20;
        _ = Diagram.EndUpdateAsync();
        await Diagram.DoLayoutAsync();
    }
    private async Task LeftOrientationVertical20()
    {
        pattern = "LeftOrientationVertical20";
        Diagram!.BeginUpdate();
        subTreeAlignment = SubTreeAlignmentType.Left;
        subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;
        offset = 20;
        _ = Diagram.EndUpdateAsync();
        await Diagram.DoLayoutAsync();
    }
    private async Task LeftOrientationVertical50()
    {
        pattern = "LeftOrientationVertical50";
        Diagram!.BeginUpdate();
        subTreeAlignment = SubTreeAlignmentType.Left;
        subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;
        offset = -50;
        _ = Diagram.EndUpdateAsync();
        await Diagram.DoLayoutAsync();
    }
    private async Task RightOrientationVertical50()
    {
        pattern = "RightOrientationVertical50";
        Diagram!.BeginUpdate();
        subTreeAlignment = SubTreeAlignmentType.Right;
        subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;
        offset = -50;
        _ = Diagram.EndUpdateAsync();
        await Diagram.DoLayoutAsync();
    }
    private async Task RightOrientationVertical20()
    {
        pattern = "RightOrientationVertical20";
        Diagram!.BeginUpdate();
        subTreeAlignment = SubTreeAlignmentType.Right;
        subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;
        offset = 20;
        _ = Diagram.EndUpdateAsync();
        await Diagram.DoLayoutAsync();
    }
    private async Task BalancedOrientationHorizontal20()
    {
        pattern = "BalancedOrientationHorizontal20";
        Diagram!.BeginUpdate();
        subTreeAlignment = SubTreeAlignmentType.Balanced;
        subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Horizontal;
        offset = 20;
        _ = Diagram.EndUpdateAsync();
        await Diagram.DoLayoutAsync();
    }
    private async Task CenterOrientationHorizontal50()
    {
        pattern = "CenterOrientationHorizontal50";
        Diagram!.BeginUpdate();
        subTreeAlignment = SubTreeAlignmentType.Center;
        subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Horizontal;
        offset = -50;
        _ = Diagram.EndUpdateAsync();
        await Diagram.DoLayoutAsync();
    }
    private async Task LeftOrientationHorizontal20()
    {
        pattern = "LeftOrientationHorizontal20";
        Diagram!.BeginUpdate();
        subTreeAlignment = SubTreeAlignmentType.Left;
        subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Horizontal;
        offset = 20;
        _ = Diagram.EndUpdateAsync();
        await Diagram.DoLayoutAsync();
    }
    private async Task RightOrientationHorizontal20()
    {
        pattern = "RightOrientationHorizontal20";
        Diagram!.BeginUpdate();
        subTreeAlignment = SubTreeAlignmentType.Right;
        subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Horizontal;
        offset = 20;
        await Diagram.EndUpdateAsync();
        await Diagram.DoLayoutAsync();
    }
}
```