Simple C# Library to render graph to Flowchart

Simple C# Library to render graph to Flowchart – currently, only render to HTML5 (Intention to support Visio in future).

You can render your graph horizontally (Left to Right), or vertically (Top down) – This is, however, Device Independent, and agnostic of whether you want to render to HTML5, Winform, WPF… The library automatically center parent nodes and calculate Node.x/y and overall canvas size (In case if you want to render it to surfaces other than HTML5 – for example, Visio, WPF, Winform…etc).

Top-to-Bottom

Note that we didn’t scale text to fit the boxes – this is because automatic scaling would make text so small you can’t read it, thereby making things even worse. This said, if it’s absolutely necessary, Also, notice parent nodes are horizontally-center aligned.

Left-to-Right

Parent nodes are vertically-center aligned

Source code: https://github.com/gridwizard/SimpleFlowDiagram

Usage:
Can’t be simpler to use, bulk of code in bottom create dummy data for illustration purpose.
a. Node.x/y calculated after call to DiagramCanvasEngine.GenerateLayout (You can use “Nodes” to render on other non-HTML5 surfaces)
b. Html5Render.RenderGraph renders to HTML5

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using SimpleFlowDiagramLib;

namespace DemoSimpleFlowDiagramLib
{
    class Program
    {
        

        static void Main(string[] args)
        {
            IList Nodes = new List();

            GenerateNodes(Nodes, 3, 3);
            Console.WriteLine("Finished generating dummy nodes, # Nodes: " + Nodes.Count);

            // Node.x/Node.y + Canvas size calculated (You can adjust programmatically as you see fit afterwards)
            CanvasDefinition Canvas = DiagramCanvasEngine.GenerateLayout(
                        Nodes,
                        Node.DEFAULT_NODE_HEIGHT / 2,
                        CanvasDefinition.LayoutDirection.LeftToRight
                        );
            Console.WriteLine("Finished calculating layout");

            GraphDisplayFormatSettings DisplaySettings = new GraphDisplayFormatSettings();
            // You can override display font, fore/back color ...etc
            DisplaySettings.NodeHeaderSettings.ForeColorName = "Black";
            DisplaySettings.NodeDetailSettings.ForeColorName = "Black";

            IGraphRender Html5Render = new Html5GraphRender();
            Html5Render.RenderGraph(Canvas, Nodes, DisplaySettings, "Flowchart.html");

            Console.WriteLine("Finished render to HTML5");
            return;
        }
        

        public static void GenerateNodes(
            IList Nodes,
            int NumRootNodes,
            int MaxTreeDepth
            )
        {
            Node RootNode;
            for (int i = 0; i < NumRootNodes; i++)
            {
                RootNode = new Node();
                RootNode.NodeHeader = "Root_" + i;
                RootNode.NodeDetail = "Some detail ...";
                Nodes.Add(RootNode);
                GenerateSingleGraph(Nodes, RootNode, MaxTreeDepth);
            }

            return;
        }

        public static void GenerateSingleGraph(
            IList Nodes,
            Node RootNode,
            int MaxTreeDepth
            )
        {
            int CurrentDepth = 0;
            RecursiveGenerateGraph(Nodes, RootNode, MaxTreeDepth, ref CurrentDepth);
            return;
        }

        public static void RecursiveGenerateGraph(
            IList Nodes,
            Node Node,
            int MaxTreeDepth,
            ref int CurrentDepth
            )
        {
            CurrentDepth++;

            Random rnd = new Random(DateTime.Now.Second);
            if (CurrentDepth < MaxTreeDepth)
            {
                int NumChildren = rnd.Next(5);
                for (int i = 0; i < NumChildren; i++)
                {
                    Node Child = new Node();
                    Child.NodeHeader = Node.NodeHeader + "." + "Child_Level" + CurrentDepth + "_Num" + i;
                    Child.NodeDetail = "Some detail ...";

                    Child.ParentNodes.Add(Node);
                    Node.ChildNodes.Add(Child);

                    Nodes.Add(Child);

                    int CopyCurrentDepeth = CurrentDepth;
                    RecursiveGenerateGraph(Nodes, Child, MaxTreeDepth, ref CopyCurrentDepeth);
                }
            }

            return;
        }
    }
}

Happy Coding!

Next, SimpleFlowDiagramLib – LIBRARY TO SERIALIZE GRAPH TO XML (AND VICE VERSA) – https://gridwizard.wordpress.com/2015/03/31/simpleflowdiagramlib-simple-c-library-to-serialize-graph-to-xml-and-vice-versa