Listening to the Mobile Orchard podcast, I heard an interview with Glen Low who was discussing his app “InstaViz“, a diagramming tool for the iPhone.

As I learned from the interview, InstaViz is based on the diagramming tool GraphViz, an open-source graph visualization system sponsored* by AT&T.

I’ve never been happy with contemporary diagramming tools and do most of my diagram work on paper.  There was once a nice flowcharting app for the (classic) Mac that I liked, but I can’t seem to find it and even if I did, I’d have to run it in an emulator, which is cool but complicated.  Since GraphViz is free, I thought it was at least worth a try.

What makes GraphViz cool is that you don’t use it to “draw” graphs.  You input the graph texturally by defining the objects in the graph and their relationship to each other (using the dot language) and then feed this file to one of the various programs that are part of the GraphViz package.  The app then parses the file, lays out the objects and outputs an image file.  This can be done entirely at the command line or using a GUI application; but the result is the same.

Example “dot” code:

..and resulting diagram:

This might sound counter-intuitive, to use text to define graphs, but for someone like me it’s perfect.  Instead of dragging boxes and arrows around a canvas you type exactly what you want into a text file.  If you decide to add more to the graph, or alter the relationships between objects, you type a few lines in the file and re-render.  If you do this in a visual tool you inevitably have to rearrange the graph to accommodate the new objects and if you alter existing relationships, you often need to move existing objects around as well to ensure that the presentation is done in a way that will make sense to the reader.

GraphViz does this for you, and it does it fast.  You give it the constraints of the page and it will move objects and route connections without overlap and lay things out in ways that best represent their relationships (sometimes in ways that are enlightening even to the author). 

Another reason this text-based-input is cool is that it’s easily machine-generated.  So if you have another system that maintains/generates/etc.  relationships between objects and you’d like to visualize these relationships it’s very easy to write a program (or an extension of the existing program) to output a dot file of these relationships. Feed this file to GraphViz and quickly you are able to “see” your data.  Since this can all be carried out at the command line, you can completely automate the process, embed it in a web app, etc.

Sometimes however you’re using a device where text-based input is less efficient than drawing and that is where InstaViz comes in.  InstaViz for iPhone lets you draw GraphViz-type graphs using your fingers.  What is unique about this is that while you are drawing the shapes, the GraphViz layout engine is used to arrange the resulting graph.  The result is that objects and connections re-arrange themselves magically as you enter them, flowing around the page as you draw their shapes and edit details.  You can then export these graphs as dot file and edit them directly on another machine, combine them with other graphs or just use them as is.  InstaViz can also output the resulting graph as a image file and even email it directly from inside the app.  All this for $9.99, which might seem a bit steep for an iPhone app but compared to other graphical diagramming tools (none of which are as smart or flexible) it’s a steal.

So if you create diagrams you should check out GraphViz, it’s available for most major platforms (Mac, Linux, Windows) and it’s free.  I recommend getting started with “dotguide.pdf” as it will get you up to speed quickly and provides examples of simple and somewhat complex diagrams and how to make them (and it prints nicely).

Once you’ve learned to appreciate what GraphViz can do and you have an iPhone or iPod Touch you should check out InstaViz.  Glen has a nice YouTube video that demonstrates how the app works and it only takes a minute or two to learn how to use it.  So far my favorite use of the app has been to diagram processes in real-time during a meeting and then verify the graph with the others in the meeting when there is a break, validating the design before everyone returns to their desks.  I’ve also been using it to teach my 7-year-old-daughter how to use diagrams to document her ideas and other processes and it took her about 5 minutes before she was doing it herself.

So go check out GraphViz and if you draw something cool, share it with me!

*I don’t know if AT&T officially sponsors the GraphViz project, but alot of their employees are working on it.