How to add nodes and connectors at runtime asynchronously in Blazor Diagram Component?

This guide demonstrates how to dynamically create and add nodes and connectors in a Syncfusion® Blazor Diagram using the AddDiagramElementsAsync method. Follow these steps to add elements asynchronously at runtime in your Blazor application.

Steps to Implement:

1. Create a Blazor Server Application

If you haven’t set up a Blazor Server application, refer to this guide to create one.

2. Add the Diagram Component

Include the SfDiagramComponent in your Blazor page, which acts as the canvas for nodes and connectors:

<SfDiagramComponent @ref="diagram" Height="600px">
    <!-- Configure additional layout and settings as needed -->
</SfDiagramComponent>

3. Initialize Diagram Variables and Collections

Define the necessary collections and variables for your diagram in the @code section:

@code {
    SfDiagramComponent diagram;
    DiagramObjectCollection<NodeBase> NodeCollection = new DiagramObjectCollection<NodeBase>();
}

4. Implement the Logic to Add Elements Asynchronously

Create nodes and connectors in the OnAfterRenderAsync method and add them using AddDiagramElementsAsync:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await AddDiagramElementMethod();
    }
}

public async Task AddDiagramElementMethod()
{
    // Define the first node
    Node node1 = new Node()
    {
        OffsetX = 100,
        OffsetY = 100,
        Height = 50,
        Width = 100,
        ID = "node1",
        Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
        Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle },
        Ports = new DiagramObjectCollection<PointPort>()
        {
            new PointPort()
            {
                ID = "port1",
                Visibility = PortVisibility.Visible,
                Offset = new DiagramPoint() { X = 1, Y = 0.5 },
                Height = 10, Width = 10,
                Style = new ShapeStyle() { Fill = "yellow", StrokeColor = "yellow" }
            }
        }
    };

    // Define the second node
    Node node2 = new Node()
    {
        OffsetX = 300,
        OffsetY = 300,
        Height = 50,
        Width = 100,
        ID = "node2",
        Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
        Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle },
        Ports = new DiagramObjectCollection<PointPort>()
        {
            new PointPort()
            {
                ID = "port2",
                Visibility = PortVisibility.Visible,
                Offset = new DiagramPoint() { X = 0, Y = 0.5 },
                Height = 10, Width = 10,
                Style = new ShapeStyle() { Fill = "yellow", StrokeColor = "yellow" }
            }
        }
    };

    // Define the connector
    Connector connector = new Connector()
    {
        ID = "connector1",
        SourceID = "node1",
        SourcePortID = "port1",
        TargetID = "node2",
        TargetPortID = "port2",
        Type = ConnectorSegmentType.Straight,
        Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
        TargetDecorator = new DecoratorSettings()
        {
            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }
        }
    };

    // Add the elements to the collection
    NodeCollection.Add(node1);
    NodeCollection.Add(node2);
    NodeCollection.Add(connector);

    // Add elements to the diagram asynchronously
    await diagram.AddDiagramElementsAsync(NodeCollection);
}

For a complete working example, download the code from here.

Conclusion:
Following these steps will help you seamlessly add nodes and connectors asynchronously at runtime in your Blazor Diagram component.
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, support portal, or feedback portal. We are always happy to assist you!