Getting Started with Diagram Component in the Blazor Server App.

20 May 202613 minutes to read

This section explains the step-by-step process of integrating the Syncfusion^® Blazor Diagram component into your Blazor Server app using Visual Studio, Visual Studio Code and .NET CLI. We’ll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our GitHub repository.

Ready to streamline your Syncfusion^® Blazor development?
Discover the full potential of Syncfusion^® Blazor components with Syncfusion^® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistants

• Visual Studio
• Visual Studio Code
• .NET CLI

Prerequisites

• System requirements for Blazor components

Create a new Blazor App in Visual Studio

Create a Blazor Server App using the Blazor Web App template in Visual Studio via Microsoft Templates or the Syncfusion^® Blazor Extension. For detailed instructions, refer to the Blazor Server App Getting Started documentation.

NOTE

Configure the Interactive render mode is Server and Choose the appropriate Interactivity location while creating a project.
If you use the Syncfusion^® Blazor Extension, a sample application can be generated automatically.

Prerequisites

• System requirements for Blazor components

Create a new Blazor App in Visual Studio Code

Create a Blazor Server App using Visual Studio Code via Microsoft Templates or the Syncfusion^® Blazor Extension. For detailed instructions, refer to the Blazor Server App Getting Started documentation.

NOTE

Configure the Interactive render mode is Server and Choose the appropriate Interactivity location while creating a project.
If you use the Syncfusion^® Blazor Extension, a sample application can be generated automatically.

Prerequisites

Install the latest version of .NET SDK. If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).

.NET CLI

dotnet --version

Create a Blazor Server App using .NET CLI

Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the Blazor Server App Getting Started documentation.

.NET CLI

dotnet new blazor -o BlazorApp -int Server
cd BlazorApp

This command creates a new Blazor application and places it in a new directory called BlazorApp inside your current location.

NOTE

See the Create a Blazor App, dotnet new CLI command and interactive render mode documentation topics for more details.

Install Syncfusion^® Blazor packages

• Visual Studio
• Visual Studio Code
• .NET CLI

Install Syncfusion.Blazor.Diagram and Syncfusion.Blazor.Themes NuGet packages in your project using the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution → Select the package -> Install).

Alternatively, run the following commands in the Package Manager Console(Tools → NuGet Package Manager → Package Manager Console) to achieve the same.

Package Manager

Install-Package Syncfusion.Blazor.Diagram -Version 33.2.3
Install-Package Syncfusion.Blazor.Themes -Version 33.2.3

Install Syncfusion.Blazor.Diagram and Syncfusion.Blazor.Themes NuGet packages in your project using the C# package management(Right click the “.csproj” file, -> C# package management -> Add nuget package -> Select nuget package and version)

Install Syncfusion.Blazor.Diagram and Syncfusion.Blazor.Themes NuGet packages in your project using the .NET CLI command.

.NET CLI

dotnet add package Syncfusion.Blazor.Diagram --version 33.2.3
dotnet add package Syncfusion.Blazor.Themes --version 33.2.3

NOTE

All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.

Add import namespaces

After the packages are installed, open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Diagram namespaces.

~/_Imports.razor

@using Syncfusion.Blazor;
@using Syncfusion.Blazor.Diagram;

Register Syncfusion^® Blazor service

Register the Syncfusion^® Blazor service in the Program.cs file.

Program.cs

....
using Syncfusion.Blazor;
....
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSyncfusionBlazor();
....

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the ~/Components/App.razor file.

<head>
    ...
    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>
<body>
    ....
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

NOTE

Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in Blazor application.

Configure Render Mode

If your create application uses Per page/component interactivity, add this at the top of Pages/Home.razor:

Home.razor

@* desired render mode define here *@
@rendermode InteractiveServer

NOTE

If the render mode is set to None, the diagram will not render.

If the Interactivity Location is set to Global, this step is not required.

Add Syncfusion^® Blazor Diagram component

Add the DiagramComponent to create an empty diagram.

Home.razor

<SfDiagramComponent Width="100%" Height="600px"/>

Create your first Diagram with nodes and connectors

This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors.

The following example creates a flowchart with four nodes: Start, Process, Decision, and End. It also applies common node and connector settings using the NodeCreating and ConnectorCreating properties.

Home.razor

<SfDiagramComponent Width="100%" Height="600px" Nodes="@nodes" Connectors="@connectors" NodeCreating="@NodeCreating" ConnectorCreating="@ConnectorCreating" />

@code {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>()
        {
            new Node()
            {
               ID = "node1", OffsetX = 300, OffsetY = 100,
               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator },
               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
               {
                  new ShapeAnnotation(){ Content = "Start" }
               }
            },
            new Node()
            {
               ID = "node2", OffsetX = 300, OffsetY = 200,
               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Process },
               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
               {
                  new ShapeAnnotation(){ Content = "Process" }
               }
            },
            new Node()
            { 
               ID = "node3", OffsetX = 300, OffsetY = 300,
               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision },
               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
               {
                  new ShapeAnnotation(){ Content = "Decision?" }
               }
            },
            new Node()
            {
               ID = "node4", OffsetX = 300, OffsetY = 400,
               Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator },
               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
               {
                  new ShapeAnnotation(){ Content = "End" }
               }
            }
        };
        connectors = new DiagramObjectCollection<Connector>()
        {
            new Connector()
            {
                ID = "connector1",
                SourceID = "node1",
                TargetID = "node2",
            },
            new Connector()
            {
                ID = "connector2",
                SourceID = "node2",
                TargetID = "node3",
            },            
            new Connector()
            {
                ID = "connector2",
                SourceID = "node3",
                TargetID = "node4",
            },
        };
    }

    private void NodeCreating(IDiagramObject obj)
    {
        Node node = obj as Node;
        node.Style = new ShapeStyle() { Fill = "#E8F4FF", StrokeColor = "#357BD2" };
        node.Width = 140;
        node.Height = 50;
    }

    private void ConnectorCreating(IDiagramObject obj)
    {
        (obj as Connector).Type = ConnectorSegmentType.Orthogonal;
    }
}

In this example:

• OffsetX and OffsetY define the position of each node.
• Shape defines the node shape configuration, and FlowShape.Shape specifies flowchart shapes such as Terminator, Process, or Decision.
• ShapeAnnotation adds text inside each node using the Content property.
• SourceID and TargetID connect one node to another.
• NodeCreating applies common width, height, fill color, and stroke color to all nodes.
• ConnectorCreating applies common connector settings, such as orthogonal routing.

Run the application

• Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application in Visual Studio.
• Run the application using dotnet run command in Command prompt.
• This will render the Syncfusion^® Blazor Diagram component in the default web browser.

The output will appear as follows: