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
SimpleFlowDiagramLib.Demo.TopToBottom

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
SimpleFlowDiagramLib.Demo.LeftToRight

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

Advertisements

2 comments

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s