Ready to get started?Download WordPress

Plugin Directory

TFO Graphviz

Generates Graphviz graphics using shortcodes. Supports almost all Graphviz features.

Graphviz is a powerful tool for visualising 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.

How to use TFO Graphviz

The shortcode syntax is:

[graphviz <options>]
 <DOT code>

Where <options> is anything from this list. All are entirely optional:

  • href="self|<URL>"

    Encompasses the generated image with a link either to the image itself (with the self value) or to the provided URL. If the option is empty (for example, href="") then no link is generated. This is the default.

  • id="<id>"

    Provides the identifier used to link the generated image to an image map. If you use the simple 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 tfo_graphviz_N where N is an integer that starts at one when the plugin is loaded and is incremented with use.

  • imap="yes|no"

    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 id value as the name of the map (see the id option for details). imap defaults to no.

  • lang="<dot|neato|twopi|circo|fdp>"

    Specifies the particular Graphviz interpreter to use. The options are dot, neato, twopi, circo and fdp. The default is dot.

  • output="<png|gif|jpg>"

    Indicates the desired image format. Defaults to png.

  • simple="yes|no"

    The simple option provides a very basic DOT wrapper around your code such that the following is possible:

    [graphviz simple="yes"] a -> b -> c; [/graphviz]

    The generated code would look like:

    digraph tfo_graphviz_1 { a -> b -> c; }

    See the id option for a description of where the name of the digraph comes from. simple defaults to no.

  • title="<title>"

    Indicates the title of the image. This is used in the alt and title attributes of the image reference. This defaults to an empty string. Note that image maps may indicate a title string which will appear in tool-tips.

Requires: 3.0.0 or higher
Compatible up to: 4.0.1
Last Updated: 2014-9-12
Active Installs: 90+


5 out of 5 stars


Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.

100,1,1 100,1,1 100,1,1
100,1,1 100,1,1
100,1,1 100,1,1
100,1,1 100,1,1 100,1,1