Tutorial 1: Loading graph data

This tutorial shows how to load graph data from XML and create diagram objects corresponding to the graph nodes and edges. It assumes you have already integrated the diagram library into your project, as shown in Getting Started guide.

1. Right-click the project in Solution Explorer and choose Add -> New Item from the context menu. Create a new XML file called SampleGraph.xml and add to it content in the following form:

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>

2. Set the file's "Build Action" property to "Embedded resource".

3. Add the following variables to page's constructor. "nodeMap" maps diagram nodes to their identifiers, and "bounds" contains the default node size.

C#

var nodeMap = new Dictionary<string, DiagramNode>();
var bounds = new Rect(0, 0, 18, 6);

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

C#

var assembly = typeof(App).GetTypeInfo().Assembly;
Stream stream = assembly.GetManifestResourceStream("Tutorial1.SampleGraph.xml");

string text;
using (var reader = new StreamReader(stream))
{
    text = reader.ReadToEnd();
}
XDocument document = XDocument.Parse(text);

5. 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#

// load node data
var nodes = document.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;
}

6. 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#

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

7. Arrange the diagram using the LayeredLayout class.

C#

// arrange the graph
var layout = new LayeredLayout();
layout.LayerDistance = 12;
layout.Arrange(diagram);

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

Complete sample project is available in Samples/Tutorial1 folder from distribution.