Tutorial 4: Loading graph data

This tutorial shows how to load graph data from XML and create diagram objects corresponding to the graph nodes and edges.

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

Follow steps 1-5 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 SampleGraph.xml and add the following markup to its content.

XML

<?xml version="1.0" encoding="utf-8" ?>
<Graph>
    <Nodes>
        <Node id="0" name="start" />
        <Node id="1" name="activity 1" />
        <Node id="2" name="task 1" />
        <Node id="3" name="task 2" />
        <Node id="4" name="activity 2" />
        <Node id="5" name="task 3" />
        <Node id="6" name="task 4" />
        <Node id="7" name="activity 3" />
        <Node id="8" name="task 5" />
        <Node id="9" name="task 6" />
        <Node id="10" name="end" />
    </Nodes>
    <Links>
        <Link origin="0" target="1" />
        <Link origin="1" target="2" />
        <Link origin="1" target="3" />
        <Link origin="2" target="4" />
        <Link origin="3" target="4" />
        <Link origin="4" target="5" />
        <Link origin="4" target="6" />
        <Link origin="5" target="10" />
        <Link origin="6" target="10" />
        <Link origin="0" target="7" />
        <Link origin="7" target="8" />
        <Link origin="8" target="9" />
        <Link origin="1" target="9" />
        <Link origin="9" target="10" />
    </Links>
</Graph>

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 Microsoft.AspNetCore.Hosting;
using System.Xml.Linq;
using MindFusion.Diagramming.Layout;

We will get access to the SampleGraph.xml file, located in the wwwroot/js folder by injecting and querying the IHostingEnvironment service. Add a private variable
and a constructor method to the HomeController class as follows:

C#

private readonly IHostingEnvironment env;public HomeController(IHostingEnvironment hostingEnvironment)
{
    env = hostingEnvironment;
}

Delete the code for creating nodes and links in the code block and add declarations for the following variables. "nodeMap" maps diagram nodes to their identifiers, and "bounds" contains the default node size.

C#

Dictionary<string, DiagramNode> nodeMap = new Dictionary<string, DiagramNode>();
Rect bounds = new Rect(0, 0, 60, 20);

Load the XML document and its root element using the Linq for XML API:

C#

var path = env.WebRootFileProvider.GetFileInfo("js//SampleGraph.xml")?.PhysicalPath;
var xml = XDocument.Load(path);
var graph = xml.Element("Graph");

4. Create the Shape nodes

Load the graph node elements and create their corresponding ShapeNode objects by calling the CreateShapeNode method of the Factory class. CreateShapeNode is just a shortcut to creating a ShapeNode instance using the "new" operator and adding it to the Nodes collection of the diagram. Additionally, this code maps the new node to the "id" attribute of the XML element, and sets the node's Text to the value of the "name" attribute.

C#

var nodes = xml.Descendants("Node");
foreach (var node in nodes)
{
    var diagramNode = diagram.Factory.CreateShapeNode(bounds);
    nodeMap[node.Attribute("id").Value] = diagramNode;
    diagramNode.Text = node.Attribute("name").Value;
}

5. Create the Diagram links

Load the graph links and create corresponding DiagramLink objects. The Origin and Destination of the links are accessed by their ids through the "nodeMap" dictionary.

C#

var links = xml.Descendants("Link");
foreach (var link in links)
{
    diagram.Factory.CreateDiagramLink(
    nodeMap[link.Attribute("origin").Value],
    nodeMap[link.Attribute("target").Value]);
}

6. Arrange the diagram

Arrange the diagram using the LayeredLayout class. Call the Diagram's ResizeToFitItems method to ensure that its bounds will fit all diagram items.

C#

var layout = new LayeredLayout();
layout.NodeDistance = 80;
layout.Arrange(diagram);
diagram.ResizeToFitItems(5);

7. Run the application

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