Getting Started with the Diagram Component in the Blazor MAUI App

10 Oct 202524 minutes to read

This guide walks through the step-by-step process of integrating the Syncfusion^® Blazor Diagram component into a Blazor MAUI application using either Visual Studio or Visual Studio Code.

A complete working example is available in the GitHub repository.

Prerequisites

To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to here or the Syncfusion® Blazor Extension.

Step 1: How to Create a New Blazor MAUI App in Visual Studio

Create a Blazor MAUI App using Visual Studio via Microsoft Templates. For detailed instructions, refer to this Blazor MAUI App Getting Started documentation.

Step 2: How to Install Diagram NuGet Package in Blazor MAUI App

To add the Blazor Diagram component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install Syncfusion.Blazor.Diagram and Syncfusion.Blazor.Themes.

Package Manager
Install-Package Syncfusion.Blazor.Diagram -Version 31.2.2
Install-Package Syncfusion.Blazor.Themes -Version 31.2.2

NOTE

Syncfusion^® Blazor components are available on nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.

Step 3: Add Import Namespaces

Open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Diagram namespace.

~/_Imports.razor

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

Step 4: How to Register Syncfusion^® Blazor Service

~/MauiProgram.cs
using Microsoft.Extensions.Logging;
using MauiBlazorWindow.Data;
using Syncfusion.Blazor;

namespace MauiBlazorWindow;

    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            builder.Services.AddMauiBlazorWebView();
            builder.Services.AddSyncfusionBlazor();
#if DEBUG
            builder.Services.AddBlazorWebViewDeveloperTools();
    		builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }

Step 5: How to Add Stylesheet and Script Resources

Add the following stylesheet and script to the head section of the ~/wwwroot/index.html file.

If using Syncfusion.Blazor && Syncfusion.Blazor.Themes NuGet package in your application, refer to the following script.

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

If using Syncfusion.Blazor.Diagram && Syncfusion.Blazor.Themes NuGet package in your application, refer to the following script.

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

Step 6: How to Add the Diagram Component

Add the Syncfusion^® Diagram component in the ~/Pages/Index.razor file.

RAZOR
@page "/"

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="@diagram" Connectors="@connectors" Height="700px" Nodes="@nodes" />

@code
{
    SfDiagramComponent diagram;
    int connectorCount = 0;
    //Defines Diagram's nodes collection.
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    //Defines Diagram's connectors collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();

    protected override void OnInitialized()
    {
        InitDiagramModel();
    }

    private void InitDiagramModel()
    {
        CreateNode("Start", 300, 50, NodeFlowShapes.Terminator, "Start");
        CreateNode("Init", 300, 140, NodeFlowShapes.Process, "var i = 0");
        CreateNode("Condition", 300, 230, NodeFlowShapes.Decision, "i < 10?");
        CreateNode("Print", 300, 320, NodeFlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
        CreateNode("Increment", 300, 410, NodeFlowShapes.Process, "i++;");
        CreateNode("End", 300, 500, NodeFlowShapes.Terminator, "End");
        // Creates orthogonal connector.
        OrthogonalSegment segment1 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Direction = Direction.Right,
            Length = 30,
        };
        OrthogonalSegment segment2 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Length = 300,
            Direction = Direction.Bottom,
        };
        OrthogonalSegment segment3 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Length = 30,
            Direction = Direction.Left,
        };
        OrthogonalSegment segment4 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Length = 200,
            Direction = Direction.Top,
        };
        CreateConnector("Start", "Init");
        CreateConnector("Init", "Condition");
        CreateConnector("Condition", "Print");
        CreateConnector("Condition", "End", "Yes", segment1, segment2);
        CreateConnector("Print", "Increment", "No");
        CreateConnector("Increment", "Condition", null, segment3, segment4);
    }

    // Method to create connector.
    private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null)
    {
        Connector diagramConnector = new Connector()
        {
            // Represents the unique id of the connector.
            ID = string.Format("connector{0}", ++connectorCount),
            SourceID = sourceId,
            TargetID = targetId,
        };
        if (label != default(string))
        {
            // Represents the annotation of the connector.
            PathAnnotation annotation = new PathAnnotation()
            {
                Content = label,
                Style = new TextStyle() { Fill = "white" }
            };
            diagramConnector.Annotations = new DiagramObjectCollection<PathAnnotation>() { annotation };
        }
        if (segment1 != null)
        {
            // Represents the segment type of the connector.
            diagramConnector.Type = ConnectorSegmentType.Orthogonal;
            diagramConnector.Segments = new DiagramObjectCollection<ConnectorSegment> { segment1, segment2 };
        }
        connectors.Add(diagramConnector);
    }

    // Method to create node.
    private void CreateNode(string id, double x, double y, NodeFlowShapes shape, string label)
    {
        Node diagramNode = new Node()
        {
            //Represents the unique id of the node.
            ID = id,
            // Defines the position of the node.
            OffsetX = x,
            OffsetY = y,
            // Defines the size of the node.
            Width = 145,
            Height = 60,
            // Defines the style of the node.
            Style = new ShapeStyle { Fill = "#357BD2", StrokeColor = "White" },
            // Defines the shape of the node.
            Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = shape },
            // Defines the annotation collection of the node.
            Annotations = new DiagramObjectCollection<ShapeAnnotation>
            {
                new ShapeAnnotation
                {
                    Content = label,
                    Style = new TextStyle()
                    {
                        Color="White",
                        Fill = "transparent"
                    }
                }
            }
        };
        nodes.Add(diagramNode);
    }
}

NOTE

View Sample in GitHub.

How to Run the Sample on Windows

Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.

Run Windows machine

When the application is successfully launched, the Diagram component will seamlessly render the specified diagram page.

Run Windows machine

How to Run the Sample on Android

To run the Blazor DiagramComponent in a Blazor Android MAUI application using the Android emulator, follow these steps:

Run Windows machine

Refer here to install and launch Android emulator.

NOTE

If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidanceTroubleshooting Android Emulator.

Blazor Diagram Component

Prerequisites

To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to here or the Syncfusion® Blazor Extension.

Step 1: How to Create a New Blazor MAUI App Using Visual Studio Code

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

Step 2: How to Install Diagram NuGet Packages in a Blazor MAUI App

Package Manager
dotnet add package Syncfusion.Blazor.Diagram -v 31.2.2
dotnet add package Syncfusion.Blazor.Themes -v 31.2.2
dotnet restore

NOTE

Syncfusion^® Blazor components are available on nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.

Step 3: Add Import Namespaces

Open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Diagram namespace.

~/_Imports.razor

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

Step 4: How to Register Syncfusion^® Blazor Service

~/MauiProgram.cs
using Microsoft.Extensions.Logging;
using MauiBlazorWindow.Data;
using Syncfusion.Blazor;

namespace MauiBlazorWindow;

    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            builder.Services.AddMauiBlazorWebView();
            builder.Services.AddSyncfusionBlazor();
#if DEBUG
            builder.Services.AddBlazorWebViewDeveloperTools();
    		builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }

Step 5: How to Add Stylesheet and Script Resources

Add the following stylesheet and script to the head section of the ~/wwwroot/index.html file.

If using Syncfusion.Blazor && Syncfusion.Blazor.Themes NuGet package in your application, refer to the following script.

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

If using Syncfusion.Blazor.Diagram && Syncfusion.Blazor.Themes NuGet package in your application, refer to the following script.

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

Step 6: How to Add the Diagram Component

Add the Syncfusion^® Diagram component in the ~/Pages/Index.razor file.

RAZOR
@page "/"

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="@diagram" Connectors="@connectors" Height="700px" Nodes="@nodes" />

@code
{
    SfDiagramComponent diagram;
    int connectorCount = 0;
    //Defines Diagram's nodes collection.
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    //Defines Diagram's connectors collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();

    protected override void OnInitialized()
    {
        InitDiagramModel();
    }

    private void InitDiagramModel()
    {
        CreateNode("Start", 300, 50, NodeFlowShapes.Terminator, "Start");
        CreateNode("Init", 300, 140, NodeFlowShapes.Process, "var i = 0");
        CreateNode("Condition", 300, 230, NodeFlowShapes.Decision, "i < 10?");
        CreateNode("Print", 300, 320, NodeFlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
        CreateNode("Increment", 300, 410, NodeFlowShapes.Process, "i++;");
        CreateNode("End", 300, 500, NodeFlowShapes.Terminator, "End");
        // Creates orthogonal connector.
        OrthogonalSegment segment1 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Direction = Direction.Right,
            Length = 30,
        };
        OrthogonalSegment segment2 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Length = 300,
            Direction = Direction.Bottom,
        };
        OrthogonalSegment segment3 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Length = 30,
            Direction = Direction.Left,
        };
        OrthogonalSegment segment4 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Length = 200,
            Direction = Direction.Top,
        };
        CreateConnector("Start", "Init");
        CreateConnector("Init", "Condition");
        CreateConnector("Condition", "Print");
        CreateConnector("Condition", "End", "Yes", segment1, segment2);
        CreateConnector("Print", "Increment", "No");
        CreateConnector("Increment", "Condition", null, segment3, segment4);
    }

    // Method to create connector.
    private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null)
    {
        Connector diagramConnector = new Connector()
        {
            // Represents the unique id of the connector.
            ID = string.Format("connector{0}", ++connectorCount),
            SourceID = sourceId,
            TargetID = targetId,
        };
        if (label != default(string))
        {
            // Represents the annotation of the connector.
            PathAnnotation annotation = new PathAnnotation()
            {
                Content = label,
                Style = new TextStyle() { Fill = "white" }
            };
            diagramConnector.Annotations = new DiagramObjectCollection<PathAnnotation>() { annotation };
        }
        if (segment1 != null)
        {
            // Represents the segment type of the connector.
            diagramConnector.Type = ConnectorSegmentType.Orthogonal;
            diagramConnector.Segments = new DiagramObjectCollection<ConnectorSegment> { segment1, segment2 };
        }
        connectors.Add(diagramConnector);
    }

    // Method to create node.
    private void CreateNode(string id, double x, double y, NodeFlowShapes shape, string label)
    {
        Node diagramNode = new Node()
        {
            //Represents the unique id of the node.
            ID = id,
            // Defines the position of the node.
            OffsetX = x,
            OffsetY = y,
            // Defines the size of the node.
            Width = 145,
            Height = 60,
            // Defines the style of the node.
            Style = new ShapeStyle { Fill = "#357BD2", StrokeColor = "White" },
            // Defines the shape of the node.
            Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = shape },
            // Defines the annotation collection of the node.
            Annotations = new DiagramObjectCollection<ShapeAnnotation>
            {
                new ShapeAnnotation
                {
                    Content = label,
                    Style = new TextStyle()
                    {
                        Color="White",
                        Fill = "transparent"
                    }
                }
            }
        };
        nodes.Add(diagramNode);
    }
}

NOTE

View the Sample in GitHub.

How to Run the Sample on Windows

Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.

Run Windows machine

When the application is successfully launched, the Diagram component will seamlessly render the specified diagram page.

Run Windows machine

How to Run the Sample on Android

To run the Blazor Diagram Component in a Blazor Android MAUI application using the Android emulator, follow these steps:

Run Windows machine

Refer here to install and launch Android emulator.

NOTE

If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidanceTroubleshooting Android Emulator.

Blazor Diagram Component

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Getting Started with the Diagram Component in the Blazor MAUI App

Prerequisites

Step 1: How to Create a New Blazor MAUI App in Visual Studio

Step 2: How to Install Diagram NuGet Package in Blazor MAUI App

Step 3: Add Import Namespaces

Step 4: How to Register Syncfusion^® Blazor Service

Step 5: How to Add Stylesheet and Script Resources

Step 6: How to Add the Diagram Component

How to Run the Sample on Windows

How to Run the Sample on Android

Prerequisites

Step 1: How to Create a New Blazor MAUI App Using Visual Studio Code

Step 2: How to Install Diagram NuGet Packages in a Blazor MAUI App

Step 3: Add Import Namespaces

Step 4: How to Register Syncfusion^® Blazor Service

Step 5: How to Add Stylesheet and Script Resources

Step 6: How to Add the Diagram Component

How to Run the Sample on Windows

How to Run the Sample on Android

See also

Getting Started with the Diagram Component in the Blazor MAUI App

Prerequisites

Step 1: How to Create a New Blazor MAUI App in Visual Studio

Step 2: How to Install Diagram NuGet Package in Blazor MAUI App

Step 3: Add Import Namespaces

Step 4: How to Register Syncfusion® Blazor Service

Step 5: How to Add Stylesheet and Script Resources

Step 6: How to Add the Diagram Component

How to Run the Sample on Windows

How to Run the Sample on Android

Prerequisites

Step 1: How to Create a New Blazor MAUI App Using Visual Studio Code

Step 2: How to Install Diagram NuGet Packages in a Blazor MAUI App

Step 3: Add Import Namespaces

Step 4: How to Register Syncfusion® Blazor Service

Step 5: How to Add Stylesheet and Script Resources

Step 6: How to Add the Diagram Component

How to Run the Sample on Windows

How to Run the Sample on Android

See also

Step 4: How to Register Syncfusion^® Blazor Service

Step 4: How to Register Syncfusion^® Blazor Service