Chalaki

MSAGL (Microsoft Automatic Graph Layout) is a .NET library and tools created by Microsoft Research for creating hierarchical graphs, viewing them and saving them to bitmaps. MSAGL is built on the principle of the Sugiyama scheme. MSAGL can be used to create layered or hierarchical graph layouts. These layered graphs can be used to represent data with some flow of information in a graphical format. A flow chart graph of a algorithm, a state machine or a C# class or business management tree, manufacturing process or network analysis as well as phylogenetic trees which are used in bioinformatics research can be graphically represented using one of these graphs. The MSAGL library is also called the MS GLEE library.

Automatic Graph Layout includes three integrated components:

• An automatic layout engine that enables creating hierarchical graphs
• A drawing layer that helps you modify the attributes of the graphical components, such as the shape of nodes and the style of edges.
• A Windows-based viewer that uses the engine and drawing layer to create interactive graphs.

Creating a hierarchical graph takes just few steps:

1. Create the graph object.
2. Set the nodes and edges.
3. Bind the graph object with the viewer.
4. Optionally you can save the resulting image as a bitmap into a .png file

Installing the MSAGL

You can Download MSAGL (GLEE) Libraries free of cost and start using in your .NET based applications for both windows and web. The package contains the following:

• Layout engine (Microsoft.MSAGL.dll) - The core layout functionality. This component can be used standalone in cases when visualization is handled by a tool other than MSAGL. For example, you can just use this DLL to create a Graph and save it to a bitmap file.
• Drawing module (Microsoft.MSAGL.Drawing.dll) – The Definitions of different drawing attributes like shapes, colors, line styles. This module also contains definitions of node class, edge class, and graph class. By using these classes a user can create a graph object and use it later for layout, and rendering.
• Viewer control (Microsoft.MSAGL.GraphViewerGDIGraph.dll) – The viewer control can show the graph in a windows form. Some other rendering functionality is also part of this DLL.

Once downloaded, simply run the glee.msi file which uses windows installer to install the files to your hard disk. Typically all the files will be saved under C:\Program Files (x86)\Microsoft Research\GLEE directory on windows 7 and C:\Program Files\Microsoft Research\GLEE folder in 32 bit windows systems such as XP or Vista. Verify the contents of the above folder and make sure the three DLLs mentioned above are saved under bin folder. Also the samples folder contains Visual C# solution, project, code files to create an example graph. Now that the MSAGL is installed we are ready to create our first sample program to create simple graph layout.

Creating your first program in C# to use MSAGL

Step 1: create a solution and project and add MSAGL DLL References

Using Visual C# Express 2010, I created a new project. I chose Windows forms EXE template. I saved the solution with the name GleeTest. The main program, I renamed to GleeViewerSample.cs. Next thing I need to to do is add references to the MSAGL DLLs. To do this, simply right click on the references node of the solution explorer and choose “Add Reference”. The following dialog shows up:

Use the browse tab and point to the location where you installed MSAGL library. Choose all the three MSAGL DLLs and click OK. They will now be added as references to the GleeTest project. The solution now looks like:

Step 2: Creating the C# sample program to make a Graph that uses MSAGL

The following code shows how to create a simple class called  GleeViewSample. In this class there is one Main() function. First thing you do in the Main() function is to create Form() class object.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Imaging;
using System.Text;
using System.Windows.Forms;
using Microsoft.Glee.Drawing;

class GleeViewerSample {

    public static void Main()   {

        //create a form
        System.Windows.Forms.Form form = new System.Windows.Forms.Form();

The next step is to create a GViewer class object and a Graph class object.

//create a viewer object
        Microsoft.Glee.GraphViewerGdi.GViewer viewer = new Microsoft.Glee.GraphViewerGdi.GViewer();

        //create a graph object
        Microsoft.Glee.Drawing.Graph graph = new Microsoft.Glee.Drawing.Graph("graph");

Next you create Edges by calling Graph.AddEdge (StartNode, EndNode) function. There is no function to create Nodes. Instead you simply call AddEdge to create two nodes and a line from the first node pointing to the second node. So by calling Addedge once, you are creating two nodes and one edge. Nodes names are unique in a graph and if you call Graph.AddEdge (StartNode, EndNode) again, it simply creates another edge but not the nodes as they are already created. You are allowed to have multiple edges between two nodes. You can even have an edge from a node pointing back to itself.

//create the graph content
        string strNode1 = "Circle";
        string strNode2 = "Home";
        string strNode3 = "Diamond";
        string strNode4 = "Standard";

        graph.AddEdge(strNode1, strNode2);
        graph.AddEdge(strNode2, strNode1);
        graph.AddEdge(strNode2, strNode2);
        graph.AddEdge(strNode1, strNode3);
        graph.AddEdge(strNode1, strNode4);
        graph.AddEdge(strNode4, strNode1);

        graph.AddEdge(strNode2, "Node 0");
        for (int i = 0; i < 3; i++) graph.AddEdge("Node " + i.ToString(), "Node " + (i + 1).ToString());
        for (int i = 0; i < 3; i++) graph.AddEdge("Node " + (i+1).ToString(), "Node " + i.ToString());

Once the nodes are created, you can modify the attributes of the nodes and change the look and feel. Graph.FindNode (node-name) function returns the node. You can use the Attr property to set various attributes such as FillColor, Shape etc. as shown below.

        Microsoft.Glee.Drawing.Node n1 = graph.FindNode(strNode1);
        n1.Attr.Fillcolor = Microsoft.Glee.Drawing.Color.SeaGreen;
        n1.Attr.Shape = Microsoft.Glee.Drawing.Shape.DoubleCircle;

        Microsoft.Glee.Drawing.Node n2 = graph.FindNode(strNode2);
        n2.Attr.Fillcolor = Microsoft.Glee.Drawing.Color.Azure;
        n2.Attr.Shape = Microsoft.Glee.Drawing.Shape.House;

        Microsoft.Glee.Drawing.Node n3 = graph.FindNode(strNode3);
        n3.Attr.Fillcolor = Microsoft.Glee.Drawing.Color.Brown;
        n3.Attr.Shape = Microsoft.Glee.Drawing.Shape.Diamond;

Now that the nodes are created, you need to assign the Graph object to the viewer. Then you need to add the Viewer control to the control collection of the form using form.Controls.Add (viewer) function. Finally call form.ShowDialog () to display the chart.

        //bind the graph to the viewer
        viewer.Graph = graph;

        //associate the viewer with the form
        form.SuspendLayout();
        viewer.Dock = System.Windows.Forms.DockStyle.Fill;
        form.Controls.Add(viewer);
        form.ResumeLayout();

        //show the form
        form.ShowDialog();

How to save the image to the disk

Now that you know how to create the graph and show it inside a form, you should learn how to save the image to the hard disk so that it can be used by other programs. If you like to show the image on a ASP.NET web page, you can simply include the image file path inside HTML IMG tag and dynamically generate the HTML from the aspx code.

        // save the bitmap to a png file
        Microsoft.Glee.GraphViewerGdi.GraphRenderer renderer = new Microsoft.Glee.GraphViewerGdi.GraphRenderer(graph);
        renderer.CalculateLayout();
        int width = 900;
        Bitmap bitmap = new Bitmap(width, (int)(graph.Height * (width / graph.Width)), PixelFormat.Format32bppPArgb);
        renderer.Render(bitmap);
        bitmap.Save("test.png");

The steps involved are pretty straight forward. You need to first create GraphRenderer class object and pass the graph object that you already have in the constructor. Next you call the renderer.CalculateLayout() function. After that you need to create a Bitmap class object with width, height and format. Once you have this Bitmap object, call the renderer.Render() function and pass in the bitmap object. Finally call the bitmap.Save(filepath) function to save it to the appropriate filename at the desired location.

The final output of the program looks as shown below: