Integrate Diagramming API into a project

After following the previous topic, you should be able to use MindFusion.Diagramming classes in your project.

Initialize the library

Call the UseMindFusionDiagramming extension from CreateMauiApp to configure the library:

C#

namespace DiagramMauiApp;

using MindFusion.Diagramming;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMindFusionDiagramming()
            .......);

        return builder.Build();
    }
}

Add a DiagramView to Xaml UI

1. Add an xmlns attribute to the root Xaml object and set its value to http://mindfusion.eu/diagramming/maui, which lets you create objects from the Diagramming namespace in Xaml.
2. Add a DiagramView element, and set its Name attribute to a variable name that lets you access the instance from code-behind.

Xaml

<?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:diag="http://mindfusion.eu/diagramming/maui"
    x:Class="DiagramMauiApp.MainPage">

    <Grid>

        <diag:DiagramView x:Name="diagView" />

    </Grid>

</ContentPage>

Create diagram items

You can create nodes and links programmatically either by calling Factory methods, or by instantiating objects of respective class and adding them to Items collection:

C#

public MainPage()
{
    InitializeComponent();

    var df = diagView.Diagram.Factory;

    var node1 = df.CreateShapeNode(10, 10, 30, 30);
    node1.Text = "Hello";

    var node2 = df.CreateShapeNode(60, 25, 30, 30);
    node2.Text = ".NET MAUI";

    df.CreateDiagramLink(node1, node2);
}

DiagramView interaction

Set the value of the Behavior property, which defines how the control interprets touch or mouse input. The default value LinkShapes specifies that users can draw shape nodes and connect them with links. Other Link* and Draw* modes allow drawing different types of nodes (TableNode, ContainerNode, etc). Modes such as Modify, PanAndModify, MoveNodes, SelectOnly allow users to interact with existing items, but not draw new ones on the canvas.

Browse the other sections of this help file to learn more about the functionality provided by the MindFusion.Diagramming classes, methods and properties. Follow the tutorials to learn how to populate the diagram model programmatically.