{ "$schema": "https://ai.syncfusion.com/schema/registry-item.json", "name": "diagram-organization-chart", "framework": "blazor", "type": "registry:component", "component": "Diagram", "variant": "organization-chart", "dependencies": [ "Syncfusion.Blazor.Diagram" ], "description": "Organization chart demonstrates hierarchical nodes with custom node and connector creation plus zoom and pan interaction.", "meta": { "essentialStudioRelease": "2026 Volume 2 (v34.1.29)", "license": "commercial-or-community", "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md", "requiresLicenseKey": true, "requiresServerEndpoint": false, "platformIndex": "https://ai.syncfusion.com/blazor/llms.txt", "skillPack": "syncfusion/blazor-ui-components-skills", "docs": "https://ai.syncfusion.com/gallery/blazor/diagram-organization-chart.md" }, "files": [ { "target": "src/components/diagram-organization-chart/Diagram.razor", "content": "@page \"/diagram/organization-model\"\n@using Syncfusion.Blazor.Diagram\n\n\n\n
\n
\n \n \n \n \n \n \n \n \n \n @{\n Node node1 = (context as Node);\n string Name = (node1.Data as OrganizationalDetails)!.Name!;\n string Role = (node1.Data as OrganizationalDetails)!.Role!;\n
\n
\n

@Name

\n

@Role

\n
\n
\n }\n \n \n \n
\n
\n@code\n {\n ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Diagram;\n private Syncfusion.Blazor.Diagram.Orientation subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;\n private SubTreeAlignmentType subTreeAlignment = SubTreeAlignmentType.Right;\n private int rows = 0;\n private string? pattern;\n private double offset = 20;\n public SfDiagramComponent? Diagram;\n public LayoutOrientation OrientationType = LayoutOrientation.TopToBottom;\n public int? HorizontalValue { get; set; } = 30;\n public int? VerticalValue { get; set; } = 30;\n public LayoutType Type = LayoutType.OrganizationalChart;\n public HorizontalAlignment HorizontalAlignment = HorizontalAlignment.Auto;\n public VerticalAlignment VerticalAlignment = VerticalAlignment.Auto;\n public int HorizontalSpacing = 30;\n public int VerticalSpacing = 30;\n public double Top = 50;\n public double Bottom = 50;\n public double Right = 50;\n public double Left = 50;\n // Defines default values for Node object\n private void OnNodeCreating(IDiagramObject obj)\n {\n Node? node = obj as Node;\n if (node!.Data is System.Text.Json.JsonElement)\n {\n node.Data = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString()!);\n }\n OrganizationalDetails? organizationData = node.Data as OrganizationalDetails;\n node.Width = 177;\n node.Height = 54;\n node.Shape = new Shape()\n {\n Type = Syncfusion.Blazor.Diagram.NodeShapes.HTML,\n };\n }\n // Defines default values for Connector object\n private void OnConnectorCreating(IDiagramObject connector1)\n {\n Connector? connector = (connector1 as Connector);\n connector!.Type = ConnectorSegmentType.Orthogonal;\n connector.CornerRadius = 10;\n connector.Style = new ShapeStyle()\n {\n StrokeWidth = 1,\n StrokeDashArray = \"1,1\"\n };\n connector.TargetDecorator!.Shape = DecoratorShape.None;\n connector.SourceDecorator!.Shape = DecoratorShape.None;\n }\n public class OrganizationalDetails\n {\n public string? Id { get; set; }\n public string? Role { get; set; }\n public string? Color { get; set; }\n public string? Manager { get; set; }\n public string? ChartType { get; set; }\n public string? Name { get; set; }\n }\n //DataSource Items.\n public List DataSource = new List()\n {\n new OrganizationalDetails() { Id= \"parent\", Role= \"CEO\", Color = \"#71AF17\", Manager = \"\", ChartType = \"\", Name=\"Liam James\" },\n new OrganizationalDetails() { Id = \"2\", Role= \"Product Manager\", Color = \"#1859B7\", Manager = \"parent\", ChartType = \"right\", Name=\"Maria Andres\"},\n new OrganizationalDetails() { Id = \"3\", Role= \"Software Engineer\", Color = \"#2E95D8\", Manager = \"2\", ChartType =\"\", Name=\"John Steel\"},\n new OrganizationalDetails() { Id = \"19\", Role= \"Software Engineer\", Color = \"#2E95D8\", Manager = \"14\", ChartType =\"\", Name=\"Yoshi Kenna\"},\n new OrganizationalDetails() { Id = \"20\", Role= \"Product Manager\", Color = \"#1859B7\", Manager = \"parent\", ChartType =\"right\", Name=\"Joseph Kaff\"},\n };\n private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)\n {\n if (rows == 0)\n {\n if (rows == 0 && options.Rows != null)\n options.Rows = null;\n Node? node = obj as Node;\n if (pattern == \"LeftOrientationVertical50\" || pattern == \"RightOrientationVertical50\")\n {\n options.Offset = -50;\n }\n if (!options.HasSubTree)\n {\n options.AlignmentType = subTreeAlignment;\n options.Orientation = subTreeOrientation;\n options.AlignmentType = subTreeAlignment;\n }\n }\n else\n {\n if (!options.HasSubTree)\n {\n options.AlignmentType = subTreeAlignment;\n options.Orientation = subTreeOrientation;\n options.Offset = offset;\n }\n }\n return options;\n }\n public void LeftToRight()\n {\n OrientationType = LayoutOrientation.LeftToRight;\n }\n public class ImageFields\n {\n public string? Text { get; set; }\n }\n private void HSpacingChange(Syncfusion.Blazor.Inputs.ChangeEventArgs args)\n {\n HorizontalValue = (int)args.Value!;\n HorizontalSpacing = int.Parse(args.Value.ToString()!);\n }\n private void VSpacingChange(Syncfusion.Blazor.Inputs.ChangeEventArgs args)\n {\n VerticalValue = (int)args.Value!;\n VerticalSpacing = int.Parse(args.Value.ToString()!);\n }\n private void ToptoBottomClick()\n {\n OrientationType = LayoutOrientation.TopToBottom;\n }\n private void LefttoRightClick()\n {\n OrientationType = LayoutOrientation.LeftToRight;\n }\n private void RighttoLeftClick()\n {\n OrientationType = LayoutOrientation.RightToLeft;\n }\n private void BottomtoTopClick()\n {\n OrientationType = LayoutOrientation.BottomToTop;\n }\n private async Task AlternateOrientationVertical20()\n {\n pattern = \"AlternateOrientationVertical20\";\n Diagram!.BeginUpdate();\n subTreeAlignment = SubTreeAlignmentType.Alternate;\n subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;\n offset = 20;\n _ = Diagram.EndUpdateAsync();\n await Diagram.DoLayoutAsync();\n }\n private async Task LeftOrientationVertical20()\n {\n pattern = \"LeftOrientationVertical20\";\n Diagram!.BeginUpdate();\n subTreeAlignment = SubTreeAlignmentType.Left;\n subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;\n offset = 20;\n _ = Diagram.EndUpdateAsync();\n await Diagram.DoLayoutAsync();\n }\n private async Task LeftOrientationVertical50()\n {\n pattern = \"LeftOrientationVertical50\";\n Diagram!.BeginUpdate();\n subTreeAlignment = SubTreeAlignmentType.Left;\n subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;\n offset = -50;\n _ = Diagram.EndUpdateAsync();\n await Diagram.DoLayoutAsync();\n }\n private async Task RightOrientationVertical50()\n {\n pattern = \"RightOrientationVertical50\";\n Diagram!.BeginUpdate();\n subTreeAlignment = SubTreeAlignmentType.Right;\n subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;\n offset = -50;\n _ = Diagram.EndUpdateAsync();\n await Diagram.DoLayoutAsync();\n }\n private async Task RightOrientationVertical20()\n {\n pattern = \"RightOrientationVertical20\";\n Diagram!.BeginUpdate();\n subTreeAlignment = SubTreeAlignmentType.Right;\n subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Vertical;\n offset = 20;\n _ = Diagram.EndUpdateAsync();\n await Diagram.DoLayoutAsync();\n }\n private async Task BalancedOrientationHorizontal20()\n {\n pattern = \"BalancedOrientationHorizontal20\";\n Diagram!.BeginUpdate();\n subTreeAlignment = SubTreeAlignmentType.Balanced;\n subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Horizontal;\n offset = 20;\n _ = Diagram.EndUpdateAsync();\n await Diagram.DoLayoutAsync();\n }\n private async Task CenterOrientationHorizontal50()\n {\n pattern = \"CenterOrientationHorizontal50\";\n Diagram!.BeginUpdate();\n subTreeAlignment = SubTreeAlignmentType.Center;\n subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Horizontal;\n offset = -50;\n _ = Diagram.EndUpdateAsync();\n await Diagram.DoLayoutAsync();\n }\n private async Task LeftOrientationHorizontal20()\n {\n pattern = \"LeftOrientationHorizontal20\";\n Diagram!.BeginUpdate();\n subTreeAlignment = SubTreeAlignmentType.Left;\n subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Horizontal;\n offset = 20;\n _ = Diagram.EndUpdateAsync();\n await Diagram.DoLayoutAsync();\n }\n private async Task RightOrientationHorizontal20()\n {\n pattern = \"RightOrientationHorizontal20\";\n Diagram!.BeginUpdate();\n subTreeAlignment = SubTreeAlignmentType.Right;\n subTreeOrientation = Syncfusion.Blazor.Diagram.Orientation.Horizontal;\n offset = 20;\n await Diagram.EndUpdateAsync();\n await Diagram.DoLayoutAsync();\n }\n}" } ] }