Create DiagramView in WebAssembly Project

After following the previous topic, you should be able to add a DiagramView component to your Blazor UI.

1. Open the razor page file.
2. Import MindFusion.Diagramming and MindFusion.Diagramming.Blazor namespaces.
3. Add a <DiagramView> tag to the razor markup.
4. Customize the diagram and attach event handlers from page's OnAfterRender method:

C#

@using MindFusion.Diagramming;
@using MindFusion.Diagramming.Blazor;

<DiagramView @ref="diagramView" />

DiagramView diagramView;
Diagram diagram;

@code {
protected override void OnAfterRender(bool firstRender)
{
    base.OnAfterRender(firstRender);

    if (firstRender)
    {
        diagram = diagramView.Diagram;
        diagram.Bounds = new Microsoft.Maui.Graphics.Rect(0, 0, 2000, 2000);
        diagram.NodeCreated += OnNodeCreated;
        .....
    }
}

Customize the diagram properties

Now you can set the properties of the Diagram and the DiagramView.

• Choose a value for the Behavior property of DiagramView, which defines how the view must interpret actions done with the mouse by users of your application. The default value LinkShapes specifies that users can draw shape nodes and connect them with links. Another value - LinkTables - allow drawing tables and relations. Modify prevents users from drawing new items, but allows them to modify existing ones.
• Customize the appearance of the diagram by setting properties such as ShowGrid or BackBrush.
• Customize common appearance of diagram items by setting style properties, such as ShapeNodeStyle and DiagramLinkStyle.

You are now ready to write code. A good place to start is in event handlers - either events raised by the Diagram component whose handlers let you run business logic for diagram modifications, or events raised by other user interface elements in your application whose handlers modify the diagram or view.

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 or create custom item types.