How to Turn Data Into Interactive C# .NET Diagrams

Visualizing data as a tree-like diagram is one of the most powerful ways to help users understand structure, relationships, and hierarchy. In C# .NET applications, tree diagrams show up everywhere, including file systems, organization charts, product catalogs, workflow states, and decision trees.

In this tutorial, we'll walk through how to turn a file tree system into a fully interactive, collapsible diagram using FlexDiagram, our latest diagramming control for .NET. Instead of relying on a traditional TreeView UI, we'll take those same directory and file structures and transform them into a dynamic visual diagram—complete with expandable branches, zooming, panning, and clickable nodes.

In this tutorial, we will:

• Configure the Diagram Direction and Scaling
• Populate the Diagram from a Hierarchical XML File
• Implement Expand and Collapse of Diagram Nodes

Ready to get started? Download ComponentOne Today!

Configure the Diagram Direction and Scaling

To get started with FlexDiagram, add the C1.Win.Diagram nuget package to your .NET 10 or .NET 4.8+ WinForms application.

Drag and drop the FlexDiagram control to your Form and fill the container. By default, two nodes are initiated at design time. Since we will be generating the diagram from an XML file, we will not need them. You can remove these from the Nodes collection in the property grid, or remove them in code before we populate the control with our data.

In form's code, set the Direction to LeftRight and ScaleMode to ScaleToFit.

// clear nodes from designer
flexDiagram1.Nodes.Clear();

flexDiagram1.Direction = DiagramDirection.LeftRight;
flexDiagram1.ScaleMode = ScaleMode.ScaleToFit;

LoadXmlData(); // see next step

When the diagram's scaling is set to 'ScaleToFit', the diagram will always stretch and fill the available space. When users collapse nodes, the remaining ones will expand as shown below.

Populate the Diagram from a Hierarchical XML File

In this tutorial, we are loading file folder data from an XML file. This file actually comes from our FlexGrid TreeGrid sample.

The XML file represents a hierarchical file structure with folders and files at any level. This C# code loads the XML file from embedded resources and creates diagram nodes one by one as it parses through the file.

using C1.Diagram;
using C1.Win.Diagram;
using System.Xml;

private void LoadXmlData()
{
    // load xml document
    XmlDocument xdoc = new XmlDocument();
    xdoc.LoadXml(GetResourceTextFile("TreeGroups.xml"));
    if (xdoc.ChildNodes.Count > 0)
    {
        GetXMLData(xdoc.ChildNodes[1], 0, null);
    }
}

private void GetXMLData(XmlNode node, int level, Node parent)
{
    // skip comment nodes
    if (node.NodeType == XmlNodeType.Comment)
        return;

    // add new node
    var newNode = new Node();
    if (node.Name.Equals("Property"))
        newNode.Title = node.Attributes["Name"].Value;
    else
        newNode.Title = node.Name;
    if (node.ChildNodes.Count == 1)
    {
        newNode.Content = node.InnerText;
    }

    if (parent != null)
    {
        var newEdge = new Edge();
        newEdge.Source = parent;
        newEdge.Target = newNode;
        newEdge.Style.LinePattern = C1.Chart.LinePatternEnum.Dash;
        flexDiagram1.Edges.Add(newEdge);
    }

    if (node.ChildNodes.Count > 1)
    {
        // set folder style
        newNode.Shape = Shape.House;
        newNode.Style.FillColor = Color.Beige;
    }
    else
    {
        // set folder style
        newNode.Shape = Shape.RoundedRectangle;
        newNode.Style.FillColor = Color.White;
    }
    flexDiagram1.Nodes.Add(newNode);
    

    // if this node has children, get them as well
    if (node.ChildNodes.Count > 1)
    {
        // recurse to get children
        foreach (XmlNode child in node.ChildNodes)
            GetXMLData(child, level + 1, newNode);
    }
}

Note that we assign different shapes and colors of the diagram nodes based on whether the node is a parent or not. If it's a parent in this scenario, that means it's a folder, so we visually represent that with a beige pentagon. The parsing method also calls itself recursively to support the hierarchical nature of the file system. 

Implement Expand and Collapse of Diagram Nodes

At the time of writing this tutorial, FlexDiagram does not have native node collapsing; however, it supports hit testing, selection, and hiding nodes, allowing us to implement it ourselves easily.

There are two approaches to handling user interaction when clicking nodes: Selection or Hit Testing. In this scenario, it's better to use hit testing because we need to support the scenario where the user clicks the same node repeatedly. With selection, the key event—SelectionChanged—will not trigger twice if you click the same node twice.

To handle the hit testing for clicking, listen to the MouseClick event, and then call the FlexDiagram HitTest method to find the closest node.

flexDiagram1.MouseClick += FlexDiagram1_MouseClick;

private void FlexDiagram1_MouseClick(object? sender, MouseEventArgs e)
{
    var info = flexDiagram1.HitTest(e.X, e.Y);
    if (info?.Distance <= 3)
    {
        if (info?.Element is Node clickedNode)
        {
            ToggleChildNodes(clickedNode);
            if (clickedNode.Shape == Shape.House)
            {
                clickedNode.Shape = Shape.Rectangle;
            }
            else if (clickedNode.Shape == Shape.Rectangle)
            {
                clickedNode.Shape = Shape.House;
            } 
        }
    }
}

This code then performs two actions: it toggles the visibility of the child node and the shape of the clicked node, only if the node is a folder. In this scenario, we assume specific shapes are folders and others are files. The ToggleChildNodes method (below) uses the Edges to determine child nodes. It also calls itself recursively only if the 'folder' is open.

The key to collapsing nodes is to set the node's Appearance to 'None'. Setting the Appearance to 'Hidden' will reserve the space for the node. In this scenario, we prefer the diagram to regenerate the layout when nodes are collapsed, and the 'None' option removes it from the visual tree.

private void ToggleChildNodes(Node parent)
{
    foreach (Edge e in flexDiagram1.Edges)
    {
        if (e.Source == parent)
        {
            if (e.Target.Appearance == NodeAppearance.Visible)
            {
                e.Target.Appearance = NodeAppearance.None;

            }
            else
            {
                e.Target.Appearance = NodeAppearance.Visible;
            }
            if (e.Target.Shape != Shape.Rectangle) // if not closed folder
                ToggleChildNodes(e.Target);
        }
    }
}

Other interactive features, such as zooming and panning, are already enabled by default. Users can use the zoom buttons in the bottom corner to better fit the diagram on their screen. Once zoomed in, users can use the mouse to click and drag the diagram.

Download the Complete C# Diagram Sample

Whether you're building developer tools, content management systems, or enterprise dashboards, FlexDiagram provides the flexibility to visualize any hierarchical data model, and with far less code than you might expect.

You can download the complete FlexDiagram File Tree sample, or download the ComponentOne WinForms Edition below to access more samples and additional controls.

Ready to check it out? Download ComponentOne Today!