Remember those Rock Family Trees? Pete Frame drew those fantastic detailed diagrams of how bands changed their line-ups, swapped members with each other, and made up whole scenes. Prints were included in remastered albums, they spawned a John Peel-narrated TV series, you can buy books and posters of them, and someone even created a font from Frame’s distinctive hand-lettered text.
So when I interviewed Flange Circus and their parallel project Zirkus in Episode 18, it was clear that the relationships needed to be documented and diagrammed. I love a good diagram.
Frame’s charts are hand-drawn. That was out, obviously. Then I had the idea to try to use Graphviz to draw the chart. Graphviz is “open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images”. Basically you feed it a simple text description of how things are connected, and the program draws the diagram for you, with the boxes and lines drawn in the most tidy and efficient way.
You can have a play with Graphviz online here. Change the code, and see how the diagram changes.
I started writing the text file for the family tree, but it became clear quite quickly that with this amount of information, writing the text manually wasn’t going to work. Graphviz really shines when you generate the input file from another program, as shown in many of the examples in the gallery.
There are various GUIs for Graphviz, and while I was looking at those, I discovered yEd. I LOVE yEd. I use it for so many things now, at home and at work. yEd is not related to Graphviz, but it does perform a similar function. It’s a free Java app that will run anywhere, and it provides a nice graphical interface for drawing linked diagrams. But the most exciting feature is the automatic layout feature, which arranges your diagrams neatly depending on whether you’re drawing a flowchart, swimlane diagram, hierarchy or other style. you just hit the button, and it makes everything tidy – with some tweaking of settings, and a small amount of compromise (it is free, after all).
So I moved the diagram into yEd. I originally used the Pete Frame font mentioned above, but it didn’t look good at all – not the fonts fault, more that it needs a human touch to pack that amount of information into a diagram and make it look good.
Eventually, after much changing around, adding more branches, linking out to other projects, and emailing for more information, this is the result (click for big, or to download).
Good eh? If you have any further info, let me know. Obviously it’s a bit sparse compared to the dense narrative-packed Frame charts, but I think you should always keep a bit of mystery, don’t you agree?