Saveen Reddy's blog

Visio: Leveraging a graph layout engine (GLEE) to automatically draw nice network diagrams

I draw a lot diagrams with computers talking to each other. I'll draw one now that I'll use to help explain my motivation. So, 1 minute in Visio yields this:

 

Simple observations

• The diagram is accurate it terms of entities (the machines) and relationships (which are connected)
• but it simply doesn't look good. The connectors cross. There's some unpleasant asymmetry.
• One could fix the visual appearance, but that means more work. And the point of it all is to do he least work and get the best looking results.

 

What is desired

• Specify the entities and the relationships between them in the diagram, press a button, get a nice result. In other words, provide as input only the meaningful parts of the diagram and leave the layout to the computer.

 

Can it be done?

• Yes. For a specific kind of diagram, all we need to do is (1) make it simple to specify the high-level input, (2) find a layout engine that does something reasonably attractive, and (3) render the output to Visio.
• As evidence of my claim, I added a new demo project to VisioAutoExt called DemoGLEEToVisio.

 

GLEE

GLEE is a graph layout engine released by Microsoft Research in 2006. You can download version 1.0 it here. The demo project builds up a graph using GLEE and renders it via the extension methods inthe AutoVisioExt library.

 

An example

Here is a snippet of the source code to specify the diagram

-----

            MG.Node a = graph.CreateBox("a", 30, 40, ServerMasters.None);
            MG.Node b = graph.CreateBox("b", 30, 40, ServerMasters.Server);
            MG.Node c = graph.CreateBox("c", 30, 40, ServerMasters.WebServer); 
            MG.Node d = graph.CreateBox("d", 30, 40, ServerMasters.None);
            MG.Node e = graph.CreateBox("e", 30, 40, ServerMasters.FileServer);
            MG.Node f = graph.CreateBox("f", 30, 40, ServerMasters.Server);


            graph.CreateEdge(a, b, false);
            graph.CreateEdge(a, f, true);
            graph.CreateEdge(b, d, false);
            graph.CreateEdge(d, a, false);
            graph.CreateEdge(e, a, false);
            graph.CreateEdge(c, a, false);
            graph.CreateEdge(f, c, true);
            graph.CreateEdge(e, c, false);
            graph.CreateEdge(d, f, false);
-----

 

The Output

 

 

Very nice. Given the limited data provided, GLEE did a fantastic job in the layout of the nodes and the curves.

Planned improvements

• Add the text label to the computer shape, not to the box
• Add more machine types
• Provide a more complex example that demonstrates the power.

 

Issues

• GLEE is no longer supported. Instead we should be using MSAGL: Microsoft Automatic Graph Layout. MSAGL is superior to GLEE in every way except one: it's not free. It has to be purchased on Windows Marketplace. That doesn't help me in my quest to provide automatic graph layout for visio for everyone. For the time being, I will continue to use GLEE or switch to GraphViz.
• The diagram is "frozen". Moving shapes around in visio will not re-draw the connectors.
• The edges connect to the boxes not to the shapes.

 

A Fantasy of Axonometric Projection

• Wouldn't it be great if there were a way to draw the graph in a way such that the entire graph match the axonometric angles of the shapes? Actually, that's not so hard and I already implemented it, but removed it from the demo code because I wanted to fix the basic problems before I tackled that feature. If you are curious though, here's the output.
• For the record, drawing this way is not "for free" in terms of the code. For example the arrowheads and rectangles have to be manually drawn as polylines instead of visio shapes. Re-implementing the rendering of these pieces is the reason I pulled the example in the first place.