You can use Sputnik to collaboratively edit graphs. You do this by storing text representation of the graph in the body of a node and telling Sputnik to use Graphviz to generate image files for you on the fly.

What Does This Demo Do?

The Demo consists of two nodes. This node ("Graphviz Demo") is a regular node used for presenting the text of the demo. A separate node - "Raw Dot File" - is used to store dot code, which is converted to SVG on the fly. The default action for "Raw Dot File" (see Raw Dot File) shows the dot code. However, we also add several alternative actions: ".png", ".gif", and ".svg" which will give us the PNG, GIF and SVG representations of the graph. You can see their respective outputs here:

• Raw Dot File - the dot source
• Raw_Dot_File.png -- the graph as a PNG file
• Raw_Dot_File.gif -- the graph as a GIF file
• Raw_Dot_File.svg -- the graph as a SVG file

For PNG and GIF we can simply include the file in a different node as we would with any other image:

<img src="/en/Raw_Dot_File.gif"/>

which would give us:

Note that this image is a wiki node. You can edit it.

SVG

Alternatively, we can generate SVG. We would just need to embed it with the object tag:

<object type="image/svg+xml" data="http://spu.tnik.org/en/Raw_Dot_File.svg" width="500" height="600"/>.

(The SVG image has been removed from the demo to keep our XSS Filter happy. This could be easy to fix with an exception, except that this site is running straight from git, which makes adding exceptions complicated.)

How Does this Work?

First, we create a new action, which we save into ~/sputnik/share/lua/5.1/sputnik/actions/graphviz.lua:

module(..., package.seeall)
require"lfs"

function dot(source, format)
    local tempfile = "/tmp/"..math.random()
    local f = io.open(tempfile, "w")
    f:write(source)
    f:close()
    local pipe = io.popen("dot -T"..format.." "..tempfile)
    return pipe:read("*all")
end

actions = {}
actions.dot2svg = function(node, request, sputnik)
    return dot(node.content, "svg"), "image/svg+xml"
end
actions.dot2png = function(node, request, sputnik)
    return dot(node.content, "png"), "image/png"
end
actions.dot2gif = function(node, request, sputnik)
    return dot(node.content, "gif"), "image/gif"
end

We then create a new node (Raw Dot File), and set "action" parameter to

show="wiki.code" -- to avoid running the content throw markdown
svg="graphviz.dot2svg" 
png="graphviz.dot2png"
gif="graphviz.dot2gif"

That's it. We can now access Raw Dot File.gif