# diagram-local-data

> Hierarchical tree diagram bound to a local Species/Plants/Animals JSON list.

**Framework:** aspnet-core  **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/aspnet-core/diagram-local-data.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.AspNetCore.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.cshtml

```cshtml
@page
@model EJ2CoreSampleBrowser.Pages.Diagram.LocalDataModel
@using Syncfusion.EJ2;

@{
    var getNodeDefaults = "getNodeDefaults";
    var getConnectorDefaults = "getConnectorDefaults";
}

    <div class="control-section">
        <ejs-diagram id="diagram" width="100%" height="550px" getNodeDefaults="@getNodeDefaults" getConnectorDefaults="@getConnectorDefaults" created="diagramCreated">
            <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
            <e-diagram-datasourcesettings id="Name" parentId="Category" dataSource="new DataManager(){ Data = (List<EJ2CoreSampleBrowser.Pages.Diagram.LocalDataDetails>)@Model.localData }"></e-diagram-datasourcesettings>
            <e-diagram-layout type="HierarchicalTree" horizontalSpacing="15" verticalSpacing="50"></e-diagram-layout>
        </ejs-diagram>
    </div>

    <script>
        function diagramCreated() {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.tool = ej.diagrams.DiagramTools.ZoomPan;
            diagram.dataBind();
            diagram.fitToPage();
        }

        function getNodeDefaults(obj, data, diagram) {
            //Initialize shape
            obj.annotations = [{
                /* tslint:disable:no-string-literal */
                content: obj.data.Name, style: { color: 'black' }
            }];
            obj.style =

                {
                    fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1
                }

                ; obj.shape = {
                    type: 'Basic', shape: 'Rectangle'
                }

                ; obj.width = 95; obj.height = 30; return obj;
        }

        function getConnectorDefaults(connector, diagram) {
            connector.type = 'Orthogonal';
            connector.style.strokeColor = '#4d4d4d';
            connector.targetDecorator.shape = 'None';
            return connector;
        }

    </script>
```

### src/components/diagram-local-data/diagram.cshtml.cs

```cs
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace EJ2CoreSampleBrowser.Pages.Diagram;

public class LocalDataModel : PageModel
{
    public List<LocalDataDetails> localData { get; set; }
    public void OnGet()
    {
        localData = new List<LocalDataDetails>();
        localData.Add(new LocalDataDetails("Species", ""));
        localData.Add(new LocalDataDetails("Plants", "Species"));
        localData.Add(new LocalDataDetails("Animals", "Species"));
        localData.Add(new LocalDataDetails("Vertebrates", "Animals"));
    }
}
public class LocalDataDetails
{
    public string Name { get; set; }
    public string Category { get; set; }
        

    public LocalDataDetails(string id, string category)
    {
        this.Name = id;
        this.Category = category;            
    }
}
```