How to Dynamically Create and Connect Diagram Nodes with Annotations via Ports in Syncfusion Blazor Diagram?

This article demonstrates how to configure the Syncfusion® SfDiagramComponent to generate a set of nodes and connectors with annotations upon a button click.

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 and define spacing, gridlines, and the data source settings.

   protected override void OnInitialized()
   {
       nodes = new DiagramObjectCollection<Node>
       {
           CreateNode("node1", 100, 100, "port1", 1, 0.5),
           CreateNode("node2", 300, 300, "port2", 0, 0.5)
       };

       connectors.Add(CreateConnector("connector1", "node1", "port1", "node2", "port2"));
   }

Step 2: Define Helper Methods for Node and Connector Creation
Create the methods that will help instantiate and configure nodes and connectors. These methods ensure each node and connector has the appropriate styling, position, and ports.

   // Helper method to create a node
   private Node CreateNode(string id, double offsetX, double offsetY, string portId, double portOffsetX, double portOffsetY)
   {
       return new Node
       {
           ID = id,
           OffsetX = offsetX,
           OffsetY = offsetY,
           Height = 50,
           Width = 100,
           Style = nodeStyle,
           Shape = new BasicShape { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle },
           Ports = new DiagramObjectCollection<PointPort>
           {
               new PointPort
               {
                   ID = portId,
                   Visibility = PortVisibility.Visible,
                   Offset = new DiagramPoint { X = portOffsetX, Y = portOffsetY },
                   Height = 10,
                   Width = 10,
                   Style = portStyle
               }
           },
           Annotations = new DiagramObjectCollection<ShapeAnnotation>()
           {
               new ShapeAnnotation()
               {
                   Content = id,
                   Style = new TextStyle()
                   {
                       Color = "white",
                   }
               }
           }
       };
   }

   // Helper method to create a connector
   private Connector CreateConnector(string id, string sourceId, string sourcePortId, string targetId, string targetPortId)
   {
       return new Connector
       {
           ID = id,
           SourceID = sourceId,
           SourcePortID = sourcePortId,
           TargetID = targetId,
           TargetPortID = targetPortId,
           TargetDecorator = new DecoratorSettings
           {
               Style = new ShapeStyle { Fill = "#6495ED", StrokeColor = "#6495ED" }
           },
           Style = new ShapeStyle { Fill = "#6495ED", StrokeColor = "#6495ED" },
           Type = ConnectorSegmentType.Straight
       };
   }

Step 3: Implement Dynamic Content Loading
Leverage the button click event to dynamically generate nodes and connectors, laying them out in a structured format. This step effectively builds the diagram structure in response to user interaction.

public async void Load()
   {
       diagram.Clear();


       var root = CreateNode("Root", 400, 50, "PortRoot", 0.5, 1);
       var nodeA = CreateNode("NodeA", 250, 150, "PortA", 0.5, 1);
       var nodeB = CreateNode("NodeB", 550, 150, "PortB", 0.5, 1);
       var nodeC = CreateNode("NodeC", 150, 250, "PortC", 0.5, 1);
       var nodeD = CreateNode("NodeD", 350, 250, "PortD", 0.5, 1);
       var nodeE = CreateNode("NodeE", 450, 250, "PortE", 0.5, 1);
       var nodeF = CreateNode("NodeF", 650, 250, "PortF", 0.5, 1);

       var connector1 = CreateConnector("connector1", "Root", "PortRoot", "NodeA", "PortA");
       var connector2 = CreateConnector("connector2", "Root", "PortRoot", "NodeB", "PortB");
       var connector3 = CreateConnector("connector3", "NodeA", "PortA", "NodeC", "PortC");
       var connector4 = CreateConnector("connector4", "NodeA", "PortA", "NodeD", "PortD");
       var connector5 = CreateConnector("connector5", "NodeB", "PortB", "NodeE", "PortE");
       var connector6 = CreateConnector("connector6", "NodeB", "PortB", "NodeF", "PortF");

       nodeBase.Add(root);
       nodeBase.Add(nodeA);
       nodeBase.Add(nodeB);
       nodeBase.Add(nodeC);
       nodeBase.Add(nodeD);
       nodeBase.Add(nodeE);
       nodeBase.Add(nodeF);
       nodeBase.Add(connector1);
       nodeBase.Add(connector2);
       nodeBase.Add(connector3);
       nodeBase.Add(connector4);
       nodeBase.Add(connector5);
       nodeBase.Add(connector6);

       await diagram.AddDiagramElementsAsync(nodeBase);
   }

Explanation:

• Diagram Initialization: The SfDiagramComponent is initialized with event callbacks and collections for nodes and connectors.
• Node & Connector Creation: Helper methods CreateNode and CreateConnector are used to instantiate nodes and connectors, respectively. Styling and annotations are applied to enhance visualization.
• Graph Loading: The Load method, triggered by button click, clears existing diagram elements and dynamically adds new nodes and connectors in a structured manner.

Output:

You can download the complete working sample from here.

Conclusion:

I hope you enjoyed learning how to dynamically generate and render nodes and connectors in a Syncfusion® Blazor Diagram component.

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

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries 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!