Search
Tutorial 1: Getting started

This tutorial will show you how to set up your project to use MvcDiagram.

1. Creating an ASP.NET Core Application

Go to File->New->Project. From the list of installed templates, choose ASP.NET Core Web App (Model-View-Controller) and hit Next. Enter "Tutorial1" as name of the application and press Next. On the next screen just press Create.

2. Installing the package

From Solution Explorer menu -> Dependencies -> Manage NuGet Packages, install the MindFusion.Diagramming.Mvc package.

3. Referencing the client scripts

The client script MindFusion.Diagramming.js should appear automatically in the wwwroot/js subfolder once the project is built. If you need to change the location of the MindFusion.Diagramming.js script, set the ClientScriptLocation property to configure the control:

C#  Copy Code

view.ClientScriptLocation = "/SomeFolder/MindFusion.Diagramming.js";

4. Adding a DiagramView to the page

Open the Index.cshtml page, which is located below the Views->Home node in the Solution Explorer tree. Add references to the MindFusion.Diagramming.Mvc namespace:

HTML  Copy Code
@using MindFusion.Diagramming.Mvc

Add a call to the HTML helper's DiagramView method by typing the following line:

HTML  Copy Code

@Html.DiagramView((DiagramView)ViewBag.DiagramView, new { style = "width:800px; height:700px;" })

5. Creating the diagram

Open the controller class HomeController.cs, which is located in the Controllers node in the Solution Explorer tree. On top add the following references:

C#  Copy Code

using Microsoft.Maui.Graphics;
using MindFusion.Diagramming;
using MindFusion.Diagramming.Mvc;
using SolidBrush = MindFusion.Drawing.SolidBrush;
using LinearGradientBrush = MindFusion.Drawing.LinearGradientBrush;

In the body of the Index method add

C#  Copy Code

DiagramView view = new DiagramView("diagramView1");

The code above creates a new DiagramView object with Id set to "diagramView1".

Change some properties of the view's Diagram object:

C#  Copy Code

Diagram diagram = view.Diagram;
diagram.BackBrush = new SolidBrush(Colors.White);
diagram.LinkHeadShape = ArrowHeads.Triangle;
diagram.LinkHeadShapeSize = 3;

DiagramStyle style = new DiagramStyle();
style.FontFamily = "Verdana";
style.Brush = new LinearGradientBrush(Colors.LightBlue, Colors.Blue, 90);
style.Stroke = new SolidBrush(Colors.Black);
diagram.Style = style;

Diagram's BackBrush property defines the default color with which the interior of the diagram will be filled. Diagram's LinkHeadShape and LinkHeadShapeSize properties define the default base shape and size for links' ending arrowhead. Additional styles can be applied to the diagram items by using the diagram's Style property.

Add the following code to add some ShapeNodes to the diagram. ShapeNode objects can be drawn as various geometric shapes, as set through their Shape property. There are over 100 predefined shapes exposed as static members of the Shapes class. The Shape property can be set to one of the predefined shapes: RoundRect, Rectangle, Ellipse, Process, Procedure, Delay and much more.

C#  Copy Code

// add some nodes and links to the view's Diagram
ShapeNode node1 = diagram.Factory.CreateShapeNode(new Rect(55, 10, 40, 15));
node1.Shape = Shapes.Terminator;
node1.Text = "Start";
node1.Brush = new LinearGradientBrush(Colors.Yellow, Colors.Orange, 90);

ShapeNode node2 = diagram.Factory.CreateShapeNode(new Rect(50, 40, 50, 20));
node2.Text = "Receive order via e-mail";

ShapeNode node3 = diagram.Factory.CreateShapeNode(new Rect(50, 70, 50, 20));
node3.Text = "Copy and paste e-mail data into database";

ShapeNode node4 = diagram.Factory.CreateShapeNode(new Rect(55, 100, 40, 40));
node4.Shape = Shape.FromId("Decision");
node4.Text = "Shipping involved?";
node4.Brush = new LinearGradientBrush(Colors.White, Colors.Fuchsia, 90);

ShapeNode node5 = diagram.Factory.CreateShapeNode(new Rect(100, 135, 50, 20));
node5.Shape = Shape.FromId("Save");
node5.Text = "Print invoice and UPS label";
node5.Brush = new SolidBrush(Colors.Chartreuse);

ShapeNode node6 = diagram.Factory.CreateShapeNode(new Rect(100, 165, 50, 20));
node6.Text = "Send e-mail to confirm shipping";
diagram.Nodes.Add(node6);

ShapeNode node7 = diagram.Factory.CreateShapeNode(new Rect(100, 195, 50, 20));
node7.Text = "Assemble package and ship";

ShapeNode node8 = diagram.Factory.CreateShapeNode(new Rect(55, 230, 40, 15));
node8.Shape = Shapes.Terminator;
node8.Text = "End";
node8.Brush = new LinearGradientBrush(Colors.Yellow, Colors.Orange, 90);

Add the following code to add some DiagramLinks to the diagram:

C#  Copy Code

diagram.Factory.CreateDiagramLink(node1, node2);
diagram.Factory.CreateDiagramLink(node2, node3);
diagram.Factory.CreateDiagramLink(node3, node4);

DiagramLink link4 = diagram.Factory.CreateDiagramLink(node4, node5);
link4.Text = "Yes";

diagram.Factory.CreateDiagramLink(node5, node6);
diagram.Factory.CreateDiagramLink(node6, node7);
diagram.Factory.CreateDiagramLink(node7, node8);

DiagramLink link8 = diagram.Factory.CreateDiagramLink(node4, node8);
link8.Text = "No";

Finally, store the newly created view in the ViewBag dictionary:

C#  Copy Code

ViewBag.DiagramView = view;

6. Running the application

From the main menu choose Debug->Start without debugging or press CTRL+F5. The image below depicts how the application would look like:

MvcDiagram Programmer's Guide © 2026 MindFusion