Visualization of ideas during brainstorming the easy (for a geek) way

At peaky, the cottages all have a modern LCD telly, while I didn't check this year, I'd be surprised if they didn't have a HDMI input .

This could be used so a laptop user could show some sort of ouT of visualization or similar to help during the early stages of game development - for myself I like to see the connections between character visually and for a number of years have been using the graphviz tools for this and similar tasks.

In fact I've been experimenting drawing these graphs for the game we wrote at peaky this year. Firstly I was surprised how easy it was, you can easily create a graphviz file - and it are relatively self explanatory.

You need a text editor, and be to happy using one, and there is a little bit of header and footer for the file.

So open notepad an type: (or use an online website such as http://graphviz-dev.appspot.com/ or http://www.webgraphviz.com/ )

graph  {

}

And that all you need as a header an footer for an empty diagram (technically they are called graphs but I'm ignoring that for now ).

Then you literally just need to write in each connection like this:-

So if Alice shares plot with Bob we just write :-

Alice -- Bob

We have created a diagram with a line between Alice and Bob, it that simple so we can now add some bad guys.

Eve -- Trent
Bob -- Trent
Alice -- Trent

Put this together we would end up with a file like

graph {

Alice -- Bob
Eve -- Trent
Bob -- Trent
Alice -- Trent

}

The indentations not important , but it can make the file easier to read, and is second nature to most geeks to add it like this.

This produces a graph like so:

And this is where I found a few extra tools to make these super-easy on linux, but I'd be surprised if there weren't equivalent windows tools, or you can use the web tools above which do the whole lot automatically.

The first tool is graphviz itself, if you doing this directly on your computer you need to ensure it is installed. It adds a command called 'circo' which arranges the characters in a circle , and draws the links between them. There a couple of different programs included with graphviz which place the characters according to different
rules - but I've found circo works best for character links in games.

cicro and the other graphviz tools will output many different image formats, including SVG , PNG and JPG - to name the ones I find most useful.


I needed one final piece to put all his together in a manner which made the process simple for use during group plot development. I needed
way to trigger the image file to be regenerating from the dot file whenever it is updated . There a number routine which I found for this
entr for linux or when_changed and folder monitor for windows.

Since I use linux as a matter of course, entr was the utility I needed. Running the follow rather convoluted command then put into place a
few programs which would keet the image file updated.

ls character_connection_new.dot | 
entr  bash -c 'circo ./character_connection_new.dot -Tpng > character_connection_new.png '

Since I had already established eog would update the screen with these pieces in place I can open the image view full screen on the tv (secondary display) and edit the text file adding and removing connections. Every time I save the file the diagram updates on the screen automatically.

My aim is that given that it is a simple line to add a connection between characters, this can be added during a brainstorming sessions for immediately visible to everybody involved.

Here is a fuller example from the game we wrote at peaky, I've made some minor changes and removed the actual character names to prevent spoilers, (the game won't be run in the form shown here ) .

From looking at this I can see that J is really no involved with much of the game, and I'd be worried about H,D,K and especially G not having enough to do. The other thing here is I've made use of some additional; features allowing me to colour the nodes. Links etc, can also be given colour.