# diagram-local-data

> Hierarchical tree diagram binds local species data and configures node and connector creation with zoom and pan interaction.

**Framework:** blazor  **Component:** Diagram  **Variant:** local-data

## 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-local-data.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-local-data/Diagram.razor

```razor
@page "/diagram/local-data"
@using Syncfusion.Blazor.Diagram

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