Generates Graphviz graphics using shortcodes. Supports almost all Graphviz features (depending on the generation method in use.)

Chris Luke

<a href="http://www.graphviz.org/" rel="nofollow ugc">Graphviz</a> is a powerful tool for visualizing network and tree structures that connect objects.
This WordPress plugin provides a shortcode mechanism to create Graphviz graphics within blogs, including image map generation and most other Graphviz features.
<h4>How to use TFO Graphviz</h4>
The shortcode syntax is:
<pre><code>[graphviz <options>]
 <DOT code>
[/graphviz]
</code></pre>
Where <code><options></code> is anything from this list. All are entirely optional:
<ul>
<li>
<code>class="</code><css_class><code>"</code>
Adds an extra CSS class name (or names) to the <code>img</code> tag of the rendered graph. This is in addition to the <code>graphviz</code> class that is already applied.
</li>
<li>
<code>emitjs="yes|no"</code>
Override the global setting that controls whether JavaScript is emitted as necessary. Typically this JavaScript is only produced when rendering SVG output and is intended to ensure SVG images work on most browsers. However this can sometimes be undesirable and thus this option gives some control over this.
</li>
<li>
<code>height="</code><image_height><code>"</code>
Adds a <code>height</code> attribute to the image tags to enable control of the image rendering. This is useful for making sure the graphic fits into a certain space and works well for SVG rendered graphs.
</li>
<li>
<code>href="self|</code><URL><code>"</code>
Encompasses the generated image with a link either to the image itself (with the <code>self</code> value) or to the provided URL. If the option is empty (for example, <code>href=""</code>) then no link is generated. This is the default.
</li>
<li>
<code>id="</code><id><code>"</code>
Provides the identifier used to link the generated image to an image map. If you use the <code>simple</code> option then it also provides the name of the generated DOT graph container (since Graphviz uses this to generate the image map). If not given then an identifier is generated with the form <code>tfo_graphviz_N</code> where N is an integer that starts at one when the plugin is loaded and is incremented with use.
</li>
<li>
<code>imap="yes|no"</code>
Graphviz can generate image maps using any URL’s given in the DOT code so that clicking on objects in the resultant image will direct a web browser to a new page. The effect of this option is to both instruct Graphviz to generate a client-side image map and to also insert that map into the generated HTML. It will use the <code>id</code> value as the name of the map (see the <code>id</code> option for details). <code>imap</code> defaults to <code>no</code>.
Take note that the <code>id</code> value specified in the shortcode tag must match the name of the graph inside your DOT; the HTML for the image map is generated by Graphviz using the name of the graph as the map id and name. This plugin uses the <code>id</code> specified in the shortcode tag to link the image to the map and thus these values need to match.
For example, note that <code>mymap</code> is both the <code>id</code> and the graph name:
<pre><code>[graphviz imap="yes" title="This is my map" id="mymap"]
digraph mymap {
 input[shape="box", style="rounded", label="My label", URL="/myurl"];
}
[/graphviz]
</code></pre>
If you do not give the graph any name at all the results are undefined. Some versions of Graphviz use the string <code>%3</code> as the identifier in the map but this may not be universally true.
</li>
<li>
<code>lang="<dot|neato|twopi|circo|fdp>"</code>
Specifies the particular Graphviz interpreter to use. The options are <code>dot</code>, <code>neato</code>, <code>twopi</code>, <code>circo</code> and <code>fdp</code>. The default is <code>dot</code>.
</li>
<li>
<code>output="<png|gif|jpg|svg>"</code>
Indicates the desired image format. Defaults to <code>png</code>.
</li>
<li>
<code>simple="yes|no"</code>
The <code>simple</code> option provides a very basic DOT wrapper around your code such that the following is possible:
<pre><code>[graphviz simple="yes"] a -> b -> c; [/graphviz]
</code></pre>
The generated code would look like:
<pre><code>digraph tfo_graphviz_1 {
 a -> b -> c;
}
</code></pre>
See the <code>id</code> option for a description of how the name of the <code>digraph</code> is created. <code>simple</code> defaults to <code>no</code>.
</li>
<li>
<code>title="</code><title><code>"</code>
Indicates the title of the image. This is used in the <code>alt</code> and <code>title</code> attributes of the image reference. This defaults to an empty string. Note that image maps may indicate a <code>title</code> string which will appear in tool-tips.
</li>
<li>
<code>width="</code><image_width><code>"</code>
Adds a <code>width</code> attribute to the image tags to enable control of the image rendering. This is useful for making sure the graphic fits into a certain space and works well for SVG rendered graphs.
</li>
<li>
<code>method="</code><Graphviz|Graphlib_Dot|PHP>`”
Overrides the configured output generation method to use the one indicated. This is useful when the mechanism normally in use does not support a specific feature, or when developing new methods. Note that since this does not have the same tests that the settings page has it may fail in mysterious ways without letting you know that it did.
In particular, note that the <code>Graphlib_Dot</code> method is very experimental at the moment.
</li>
</ul>

Alternatives to TFO Graphviz

Top alternatives