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.

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 "Content" and "Copy to Output Directory" to "Copy if newer".

3. Add an OnLoad override to the form:

C#

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
}

Visual Basic

Protected Overrides Sub OnLoad(ByVal e As EventArgs)

    MyBase.OnLoad(e)

End Sub

4. Add the following variables to the Loaded handler. "nodeMap" maps diagram nodes to their identifiers, and "bounds" contains the default node size.

C#

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

Visual Basic

Dim nodeMap As New Dictionary(Of String, DiagramNode)()
Dim bounds As New RectangleF(0, 0, 18, 6)

5. Load the XML document using the XML DOM API:

C#

// Load the graph xml
XmlDocument document = new XmlDocument();
document.Load("SampleGraph.xml");

Visual Basic

' Load the graph xml
Dim document As New XmlDocument()
document.Load("SampleGraph.xml")

6. 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
XmlNodeList nodes = document.SelectNodes("/Graph/Nodes/Node");
foreach (XmlElement node in nodes)
{
    ShapeNode diagramNode = diagram.Factory.CreateShapeNode(bounds);
    nodeMap[node.GetAttribute("id")] = diagramNode;
    diagramNode.Text = node.GetAttribute("name");
}

Visual Basic

' Load node data
Dim nodes As XmlNodeList = document.SelectNodes("/Graph/Nodes/Node")
For Each node As XmlElement In nodes

    Dim diagramNode As ShapeNode = diagram.Factory.CreateShapeNode(bounds)
    nodeMap(node.GetAttribute("id")) = diagramNode
    diagramNode.Text = node.GetAttribute("name")

Next

7. 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
XmlNodeList links = document.SelectNodes("/Graph/Links/Link");
foreach (XmlElement link in links)
{
    diagram.Factory.CreateDiagramLink(
        nodeMap[link.GetAttribute("origin")],
        nodeMap[link.GetAttribute("target")]);
}

Visual Basic

' Load link data
Dim links As XmlNodeList = document.SelectNodes("/Graph/Links/Link")
For Each link As XmlElement In links
    diagram.Factory.CreateDiagramLink(nodeMap(link.GetAttribute("origin")), nodeMap(link.GetAttribute("target")))
Next

8. Arrange the diagram using the LayeredLayout class.

C#

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

Visual Basic

' Arrange the graph
Dim layout As New LayeredLayout()
layout.LayerDistance = 12
layout.Arrange(diagram)

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