Getting Started with .NET MAUI Diagram

This guide shows how to add the Syncfusion .NET MAUI Diagram control to an application and create a simple diagram with two connected nodes.

Prerequisites

Before you begin, make sure that you have:

Note: Review the release notes for the package version that you plan to install to confirm the supported .NET, .NET MAUI, Visual Studio, and target-platform versions.

Step 1: Create a .NET MAUI project

  1. Open Visual Studio.
  2. Select Create a new project.
  3. Choose .NET MAUI App, and then select Next.
  4. Enter a project name and location, and then select Create.

Step 2: Install the Diagram NuGet package

Install the Syncfusion.Maui.Diagram package in the project. You can use the NuGet Package Manager or run the following command in the Package Manager Console:

Install-Package Syncfusion.Maui.Diagram

Step 3: Register Syncfusion controls

In MauiProgram.cs, add the Syncfusion hosting namespace and call ConfigureSyncfusionCore when building the application:

using Syncfusion.Maui.Core.Hosting;

namespace DiagramDemo;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore();

        return builder.Build();
    }
}

Important: The Syncfusion core handler must be registered before the application uses Syncfusion controls.

Step 4: Register the license key

Register the license key during application startup, before the controls are used. Follow the instructions in the Syncfusion licensing guide.

Do not commit a license key to source control. Use the registration method and namespace required by the Syncfusion release used by your project.

Step 5: Add the Diagram control

Open MainPage.xaml and add the Diagram namespace and control:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:diagram="clr-namespace:Syncfusion.Maui.Diagram;assembly=Syncfusion.Maui.Diagram"
             x:Class="DiagramDemo.MainPage">
    <diagram:SfDiagram x:Name="diagram" />
</ContentPage>

The x:Name value makes the control available from MainPage.xaml.cs.

Step 6: Add nodes and a connector

Open MainPage.xaml.cs. Add the required namespaces and assign the nodes and connector in the page constructor after InitializeComponent:

using System.Collections.ObjectModel;
using Syncfusion.Maui.Diagram;

namespace DiagramDemo;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        Node node1 = new Node
 {
     Id = "node1",
     OffsetX = 300,
     OffsetY = 60,
     Width = 120,
     Height = 40,
     Shape = new BasicShape()
     {
         Shape = NodeBasicShapes.Ellipse
     },
 };
 ShapeStyle style = new ShapeStyle();
 style.Fill = Colors.CornflowerBlue;
 style.StrokeColor = Colors.Black;
 style.StrokeWidth = 2;
 style.StrokeDashArray = "0,0";

 node1.Style = style;

 node1.Annotations.Add(
  new ShapeAnnotation
  {
      Id = "Begin",
      Content = "Begin",
     
  });
 diagram.Nodes.Add(node1);


 Node node2 = new Node
 {
     Id = "node2",
     OffsetX = 300,
     OffsetY = 160,
     Width = 120,
     Height = 60,
     Shape = new FlowShape()
     {
         Shape = NodeFlowShapes.PreDefinedProcess
     },
 };


 node2.Style = style;

 node2.Annotations.Add(
  new ShapeAnnotation
  {
      Id = "Process",
      Content = "Process",

  });

 diagram.Nodes.Add(node2);


 Node node3 = new Node
 {
     Id = "node3",
     OffsetX = 300,
     OffsetY = 245,
     Width = 40,
     Height = 40,
     Shape = new BasicShape()
     {
         Shape = NodeBasicShapes.Ellipse
     },
 };

 node3.Style = style;

 node3.Annotations.Add(
  new ShapeAnnotation
  {
      Id = "End",
      Content = "End",

  });

 diagram.Nodes.Add(node3);

 Connector connector1 = new Connector
 {
     Id = "connector1",
     SourceID = "node1",
     TargetID = "node2",

     
 };
 diagram.Connectors.Add(connector1);

 Connector connector2 = new Connector
 {
     Id = "connector2",
     SourceID = "node2",
     TargetID = "node3",


 };
 diagram.Connectors.Add(connector2);
    }
}

Add nodes and a connector

OffsetX and OffsetY position the nodes on the diagram surface. SourceID and TargetID connect the connector to the corresponding node IDs.

Troubleshooting

The Diagram control is not displayed

  • Confirm that the Syncfusion.Maui.Diagram package is installed in the startup project.
  • Confirm that ConfigureSyncfusionCore is called in MauiProgram.cs.
  • Confirm that the XAML namespace uses the Syncfusion.Maui.Diagram assembly.
  • Clean and rebuild the project after changing package or startup configuration.

The nodes are not visible

  • Confirm that the nodes are assigned to diagram.Nodes.
  • Check that the node offsets place them inside the visible diagram area.
  • Confirm that every node has a unique ID.

Next steps