Hierarchical Data FlexDiagram

Data-bound diagrams that use hierarchical data allow FlexDiagram to automatically generate diagrams based on hierarchical structures. Each object in the data source contains one or more child objects. FlexDiagram uses these relationships to build a visual hierarchy. This method is effective for representing organizational charts, category hierarchies, and other nested structures.

Create Hierarchical Data FlexDiagram

Define data model by creating a class that represents the hierarchical structure:

public class DataItem 
{
  public string Name { get; set; } 
  public DataItem[] Childs { get; set; }
 }

Define the data model by creating a class that represents the hierarchical structure.

Create a data source based on that structure.

var dataSource = CreateHierarchicalData();

Bind the data to the diagram.

diagram.DataSource = dataSource;
diagram.Binding = "Type";
diagram.ChildItemsPath = "Items";

Hierarchical FlexDiagram Sample

using C1.Diagram;
using C1.Win.Diagram;

namespace FlexDiagramPoC
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            InitializeDiagram();
        }

        private void InitializeDiagram()
        {
            // Create FlexDiagram instance
            var diagram = new FlexDiagram();
            diagram.Dock = DockStyle.Fill;
            this.Controls.Add(diagram);

            diagram.Direction = DiagramDirection.LeftRight;

            var dataSource = CreateHierarchicalData();

            diagram.DataSource = dataSource;
            diagram.Binding = "Type";
            diagram.ChildItemsPath = "Items";
        }

        public class SalesDataItem
        {
            public string? Type { get; set; }
            public double Sales { get; set; }

            public SalesDataItem[]? Items { get; set; }
        }

        public SalesDataItem[] CreateHierarchicalData()
        {
            var data = new SalesDataItem[]
            {
              new SalesDataItem
              {
                  Type = "Electronics",
                  Items = new SalesDataItem[]
                  {
                      new SalesDataItem
                      {
                          Type = "Camera",
                          Items = new SalesDataItem[]
                          {
                              new SalesDataItem { Type = "Digital", Sales = 45 },
                              new SalesDataItem { Type = "Film", Sales = 23 }
                          }
                      },
                      new SalesDataItem
                      {
                          Type = "Headphones",
                          Items = new SalesDataItem[]
                          {
                              new SalesDataItem { Type = "Earbud", Sales = 67 },
                              new SalesDataItem { Type = "Over-ear", Sales = 89 },
                              new SalesDataItem { Type = "On-ear", Sales = 34 }
                          }
                      }
                  }
              },
              new SalesDataItem
              {
                  Type = "Computers & Tablets",
                  Items = new SalesDataItem[]
                  {
                      new SalesDataItem
                      {
                          Type = "Desktops",
                          Items = new SalesDataItem[]
                          {
                              new SalesDataItem { Type = "All-in-ones", Sales = 56 },
                              new SalesDataItem { Type = "Minis", Sales = 42 }
                          }
                      },
                      new SalesDataItem
                      {
                          Type = "Laptops",
                          Items = new SalesDataItem[]
                          {
                              new SalesDataItem { Type = "2 in 1", Sales = 78 },
                              new SalesDataItem { Type = "Traditional", Sales = 91 }
                          }
                      }
                  }
              }
            };

            return data;
        }
    }
}