{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-local-data",
  "framework": "blazor",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "local-data",
  "dependencies": [
    "Syncfusion.Blazor.Diagram"
  ],
  "description": "Hierarchical tree diagram binds local species data and configures node and connector creation with 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-local-data.md"
  },
  "files": [
    {
      "target": "src/components/diagram-local-data/Diagram.razor",
      "content": "@page \"/diagram/local-data\"\n@using Syncfusion.Blazor.Diagram\n\n<div class=\"col-lg-12 control-section content-wrapper\" style=\"width: 100%\">\n    <div>\n        <SfDiagramComponent @ref=\"DiagramInstance\" Created=\"OnCreated\" Height=\"400px\" InteractionController=\"@DiagramInteractions.ZoomPan\" NodeCreating=\"@OnNodeCreating\" ConnectorCreating=\"@OnConnectorCreating\">\n            <SnapSettings Constraints=\"SnapConstraints.None\"></SnapSettings>\n            <DataSourceSettings Id=\"Name\" ParentId=\"Category\" DataSource=\"@DataSource\">\n            </DataSourceSettings>\n            <Layout @bind-Type=\"@DiagramLayoutType\" @bind-HorizontalSpacing=\"@HorizontalSpacing\" @bind-VerticalSpacing=\"@VerticalSpacing\">\n                <LayoutMargin @bind-Left=\"@MarginLeft\" @bind-Right=\"@MarginRight\" @bind-Top=\"@MarginTop\"></LayoutMargin>\n            </Layout>\n        </SfDiagramComponent>\n    </div>\n</div>\n@code\n{\n    public LayoutType DiagramLayoutType { get; set; } = LayoutType.HierarchicalTree;\n    public int HorizontalSpacing { get; set; } = 15;\n    public int VerticalSpacing { get; set; } = 50;\n    public double MarginLeft { get; set; } = 10;\n    public double MarginRight { get; set; } = 10;\n    public double MarginTop { get; set; } = 10;\n    private SfDiagramComponent? DiagramInstance { get; set; }\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<DataModel>(node.Data.ToString()!);\n        }\n        DataModel? data = node.Data as DataModel;\n        node.Width = 95;\n        node.Height = 30;\n        node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle };\n        node.Style = new ShapeStyle() { StrokeWidth = 1, Fill = \"#6A51CB\", StrokeColor = \"#433285\" };\n        node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()\n        {\n            new ShapeAnnotation()\n            {\n                ID = \"label1\",\n                Content = data!.Name,\n                Style = new TextStyle() { Color = \"White\",Fill=\"Transparent\" }\n            }\n        };\n        node.Ports = new DiagramObjectCollection<PointPort>()\n        {\n            new PointPort()\n            {   ID=\"port1\",\n                Offset =new DiagramPoint(){X=0,Y=0.5},\n                Width=10,\n                Height=10,\n                Visibility = PortVisibility.Hidden,\n                Style = new ShapeStyle(){ Fill=\"Black\"}\n            },\n            new PointPort()\n            {\n                ID=\"port2\",\n                Offset =new DiagramPoint(){X=1,Y=0.5},\n                Width=10,\n                Height=10,\n                Visibility = PortVisibility.Hidden,\n                Style = new ShapeStyle(){ Fill=\"Black\"}\n            },\n        };\n    }\n    private void OnCreated()\n    {\n        FitOptions mobileoptions = new FitOptions() { Mode = FitMode.Both, Region = DiagramRegion.Content };\n        DiagramInstance!.FitToPage(mobileoptions);\n    }\n    // Defines default values for Connector object\n    private void OnConnectorCreating(IDiagramObject connector)\n    {\n        (connector as Connector)!.Type = ConnectorSegmentType.Orthogonal;\n        (connector as Connector)!.TargetDecorator!.Shape = DecoratorShape.None;\n        (connector as Connector)!.SourceDecorator!.Shape = DecoratorShape.None;\n        (connector as Connector)!.Style = new ShapeStyle() { StrokeColor = \"#4d4d4d\" };\n    }\n    public class DataModel\n    {\n        public string? Name { get; set; }\n        public string? Category { get; set; }\n        public string? Content { get; set; }\n    };\n    public List<DataModel>? DataSource = new List<DataModel>()\n    {\n        new DataModel{ Name = \"Species\" },\n        new DataModel{ Name = \"Plants\", Category = \"Species\" },\n        new DataModel{ Name = \"Fungi\", Category = \"Species\" },\n        new DataModel{ Name = \"Lichens\", Category = \"Species\" },\n        new DataModel{ Name = \"Animals\", Category = \"Species\" },\n        new DataModel{ Name = \"Mosses\", Category = \"Plants\" },\n        new DataModel{ Name = \"Ferns\", Category = \"Plants\" },\n        new DataModel{ Name = \"Monocotyledens\", Category = \"Plants\" },\n        new DataModel{ Name = \"Invertebrates\", Category = \"Animals\" },\n        new DataModel{ Name = \"Vertebrates\", Category = \"Animals\" },\n    };\n}"
    }
  ]
}