How to generate a hierarchical layout with annotation at runtime?

This guide explains how to dynamically generate a hierarchical layout with annotations on each node in Blazor using Syncfusion® SfDiagramComponent. Adding annotations to nodes is essential for visual clarity, as it labels each node with relevant information, making the diagram easy to understand and interact with.

Prerequisites:
Before proceeding, ensure you have a Blazor Server application set up. If you need assistance, you can follow the instructions here: Create Blazor Server application

Implementation steps:

Step 1: Define the Diagram Component
To begin, set up the SfDiagramComponent in your Blazor page. Configure it to display nodes in a hierarchical layout and define spacing, gridlines, and the data source settings.

@page "/"
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors" NodeCreating="@OnNodeCreating" ConnectorCreating="@OnConnectorCreating">
   <DataSourceSettings ID="Id" ParentID="Manager" DataSource="DataSource"> </DataSourceSettings>
   <Layout Type="LayoutType.HierarchicalTree" HorizontalSpacing="@HorizontalSpacing" VerticalSpacing="@VerticalSpacing" />
   <SnapSettings>
       <HorizontalGridLines LineColor="white" LineDashArray="2,2" />
       <VerticalGridLines LineColor="white" LineDashArray="2,2" />
   </SnapSettings>
</SfDiagramComponent>

@code {
   int HorizontalSpacing = 40;
   int VerticalSpacing = 40;
   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
   DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
   
   // Sample data source representing a hierarchical structure
   public List<HierarchicalDetails> DataSource = new List<HierarchicalDetails>()
   {
       new HierarchicalDetails()   { Id= "parent", Role= "Board", Color= "#71AF17" },
       new HierarchicalDetails()   { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" },
       new HierarchicalDetails()   { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" },
       new HierarchicalDetails()   { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
       new HierarchicalDetails()   { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" },
       new HierarchicalDetails()   { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
       new HierarchicalDetails()   { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
       new HierarchicalDetails()   { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" },
       new HierarchicalDetails()   { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" }
   };
} 

Step 2: Define the Node Data Structure
Create a class, HierarchicalDetails, to represent the hierarchical data structure, including properties like Id, Role, Manager, and Color.

public class HierarchicalDetails
{
   public string Id { get; set; }
   public string Role { get; set; }
   public string Manager { get; set; }
   public string Color { get; set; }
} 

Step 3: Customize the NodeCreating Method to Add Annotations
The NodeCreating method is called whenever a new node is created. This method initializes each node’s size, color, and annotations dynamically. Annotations are added to display the role associated with each node.

private void OnNodeCreating(IDiagramObject obj)
{
   Node node = obj as Node;

   // Deserialize node data if it's in JsonElement format
   if (node.Data is System.Text.Json.JsonElement)
   {
       node.Data = System.Text.Json.JsonSerializer.Deserialize<HierarchicalDetails>(node.Data.ToString());
   }

   HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails;
   
   // Set node properties
   node.Width = 150;
   node.Height = 50;
   node.ID = hierarchicalData.Id;
   node.Style.Fill = hierarchicalData.Color;

   // Add annotation to the node
   if (node.Annotations.Count == 0)
   {
       node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
       {
           new ShapeAnnotation()
           {
               Content = hierarchicalData.Role,
               Style = new TextStyle() { Color = "white" }
           }
       };
   }
} 

Explanation of the Annotation Process

• Deserializing Node Data: The NodeCreating method deserializes node data from JSON, if necessary, to access the HierarchicalDetails properties easily.
• Setting Node Properties: Each node is configured with a width, height, unique ID, and color based on the HierarchicalDetails data.
• Adding Annotations: Annotations display the Role of each node. A ShapeAnnotation object is added to each node’s Annotations collection, with a white font for contrast against the node background.

Output:

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning how to generate a hierarchical layout with annotations at runtime.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac,, or feedback portal. We are always happy to assist you!