Graphviz Demo

XSSFilter could not parse (X)HTML:


<p><span class="teaser">
  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
  <a href="http://www.graphviz.org/">Graphviz</a> to generate image files for you on the fly.
</span></p>

<h2>What Does This Demo Do?</h2>

<p>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 <a href="http://www.graphviz.org/Documentation/">dot</a> code, which is converted to SVG on the fly.
The default action for "Raw Dot File" (see <a href='/en/Raw_Dot_File' class='local'>Raw Dot File</a>) 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:</p>

<ul>
    <li><a href='/en/Raw_Dot_File' class='local'>Raw Dot File</a> - the dot source</li>
    <li><a href='/en/Raw_Dot_File.png' class='local'>Raw_Dot_File.png</a> -- the graph as a PNG file</li>
    <li><a href='/en/Raw_Dot_File.gif' class='local'>Raw_Dot_File.gif</a> -- the graph as a GIF file</li>
    <li><a href='/en/Raw_Dot_File.svg' class='local'>Raw_Dot_File.svg</a> -- the graph as a SVG file</li>
</ul>

<p>For PNG and GIF we can simple include the file in a different node as we would with any
other image:</p>

<pre><code><img src="Raw_Dot_File.gif"/>
</code></pre>

<p>which would give us:</p>

<p><center>
 <img src="Raw_Dot_File.gif"/></br>
</center></p>

<p>For SVG, we'll need to embed it with the <code><object></code> tag:</p>

<pre><code><object type="image/svg+xml" data="http://sputnik.freewisdom.org/en/Raw_Dot_File.svg" width="500" height="600"/>
</code></pre>

<p>which gives us this:</p>

<p><center>
 <object type="image/svg+xml" data="http://sputnik.freewisdom.org/en/Raw_Dot_File.svg" width="350" height="600"></object>
</center></p>

<p>(The SVG image might not display in all browsers, but it's prettier and it allows us to
hyperlink nodes - click on "start" for example.)</p>

<p>Note that this image is a wiki node.  You can <a href='/en/Raw_Dot_File.edit' class='local'>edit</a> it.</p>

<h2>How Does this Work?</h2>

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

<pre><code>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
</code></pre>

<p>We then create a new node (<a href='/en/Raw_Dot_File' class='local'>Raw Dot File</a>), and set "action" parameter to </p>

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

<p>That's it.  We can now access <a href='/en/Raw_Dot_File.gif' class='local'>Raw Dot File.gif</a></p>