Tutorial 5: Loading hierarhical data

This tutorial shows how to load hierarchical data recursively from XML and create diagram items corresponding to the hierarchy.

1. Create a new ASP.NET MVC Application and add a DiagramView control to the page

Follow steps 1-4 from Tutorial 1: Getting started.

2. Create the XML file

From the project's context menu choose Add -> New Item. Create a new XML file called SampleTree.xml and add the following markup to its content.

XML

<?xml version="1.0" encoding="utf-8" ?> 
<Project>
    <Activity Name="Activity 1">
        <Activity  Name="sub-activity 1">
            <Activity  Name="sub-activity 1-1" />
            <Activity  Name="sub-activity 1-2" />
        </Activity>
        <Activity  Name="sub-activity 2">
            <Activity  Name="sub-activity 2-1" />
            <Activity  Name="sub-activity 2-2" />
            <Activity  Name="sub-activity 2-3" />
        </Activity>
        <Activity  Name="sub-activity 3">
            <Activity  Name="sub-activity 3-1" />
            <Activity  Name="sub-activity 3-2" />
        </Activity>
    </Activity>
    <Activity Name="Activity 2">
        <Activity  Name="sub-activity 1">
            <Activity  Name="sub-activity 1-1" />
            <Activity  Name="sub-activity 1-2" />
            <Activity  Name="sub-activity 1-3" />
        </Activity>
        <Activity  Name="sub-activity 2">
            <Activity  Name="sub-activity 2-1" />
            <Activity  Name="sub-activity 2-2" />
        </Activity>
    </Activity>
    <Activity Name="Activity 3">
        <Activity  Name="sub-activity 1">
            <Activity  Name="sub-activity 1-1" />
            <Activity  Name="sub-activity 1-2" />
            <Activity  Name="sub-activity 1-3" />
            <Activity  Name="sub-activity 1-4" />
        </Activity>
        <Activity  Name="sub-activity 2" />
        <Activity  Name="sub-activity 3">
            <Activity  Name="sub-activity 3-1" />
            <Activity  Name="sub-activity 3-2" />
        </Activity>
    </Activity>
</Project>

Set the file's "Build Action" property to "Content" and "Copy to Output Directory" to "Copy if newer".

3. Load the XML document

Open HomeController.cs file and and the following references:

C#

using System.Xml.Linq;
using Microsoft.Maui.Graphics;
using MindFusion.Diagramming;
using MindFusion.Diagramming.Mvc;
using MindFusion.Diagramming.Layout;
using SolidBrush = MindFusion.Drawing.SolidBrush;
using LinearGradientBrush = MindFusion.Drawing.LinearGradientBrush;

Add the following member to the page class to hold the default node size:

C#

var nodeBounds = new Rect(0, 0, 30, 10);

Add the diagram's initialization code to the body of the Index method.

C#

DiagramView view = new DiagramView("diagramView1");

Diagram diagram = view.Diagram;
diagram.LinkHeadShape = ArrowHeads.Triangle;
diagram.LinkHeadShapeSize = 3;

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

ViewBag.DiagramView = view;
return View();

4. Define CreateChildren method

Define CreateChildren as follows. It takes as parameters the parent DiagramNode and parent XML element, iterates the child XML elements to build the next level of the hierarchy, and creates corresponding diagram items by calling CreateShapeNode and CreateDiagramLink.

C#

private void CreateChildren(Diagram diagram, DiagramNode parentDiagNode, XElement parentXmlElement)
{
    foreach (var element in parentXmlElement.Elements("Activity"))
    {
        var node = diagram.Factory.CreateShapeNode(nodeBounds);
        node.Text = element.Attribute("Name").Value;
        diagram.Factory.CreateDiagramLink(parentDiagNode, node);
        CreateChildren(diagram, node, element);
    }
}

Add the following block to the Index method to create the tree root node, and add a call to the CreateChildren method, which builds the tree recursively.

C#

var root = diagram.Factory.CreateShapeNode(nodeBounds);
root.Text = "Project";
var path = env.WebRootFileProvider.GetFileInfo("js//SampleTree.xml")?.PhysicalPath;
var document = XDocument.Load(path);
CreateChildren(diagram, root, document.Element("Project"));

5. Arrange the diagram

Use TreeLayout to arrange the diagram. Add the following code to the end of the Index method.

C#

var layout = new TreeLayout();
layout.Type = TreeLayoutType.Cascading;
layout.Direction = TreeLayoutDirections.LeftToRight;
layout.LinkStyle = TreeLayoutLinkType.Cascading2;
layout.NodeDistance = 5;
layout.LevelDistance = -25; // let horizontal positions overlap
layout.Arrange(diagram);

Call the Diagram's ResizeToFitItems method to ensure that its bounds will fit all diagram items. Set the ZoomFactor property of the view to 70.

C#

diagram.ResizeToFitItems(5);

6. Run the application

Build and run the project. If everything is fine, you should see this representation of the hierarchy: