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).


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.


Parent nodes are vertically-center aligned

Source code:

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!




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s