This plugin can create directed and non-directed graph images from a textual description language called “dot” using the Graphviz program. It can use a locally installed graphviz or use an online API provided by quickchart.io for rendering.

The plugin supports exporting to OpenOffice through the ODT Plugin (untested).

For more information on Graphviz and the dot language refer to the Graphviz documentation

This plugin was originally written by Carl-Christian Salvesen. The current plugin is a nearly complete rewrite and differs on how it works internally and where graphs are stored.

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

• Version upped (2025-08-28 01:02)
• render SVG, use quickchart for remote render (2025-08-27 15:43)
• some auto cleanup (2025-08-27 13:43)
• Version upped (2016-07-06 20:43)
• Version upped (2016-02-03 18:16)
• Merge pull request #15 from splitbrain-forks/php7-signature (2016-02-02 16:25)
• Adjust method signatures to match parent (2016-02-02 16:06)
• Version upped (2016-01-24 14:11)

The full path to your graphviz' dot binary can be configured in the config manager. When it isn't configured, remote rendering at quickchart.io is used.

Any Graphviz compatible graph definition can be given with graphviz tags.

The rendering engine can optionally be given as argument in the opening tag. Supported are dot, neato, twopi, circo and fdp with dot being the default:

• dot – “hierarchical” or layered drawings of directed graphs. This is the best tool to use if edges have directionality.
• neato – “spring model” layouts. This is the best tool to use if the graph is not too large (about 100 nodes) and you don't know anything else about it. Neato attempts to minimize a global energy function, which is equivalent to statistical multi-dimensional scaling.
• fdp – “spring model” layouts similar to those of neato, but does this by reducing forces rather than working with energy.
• twopi – radial layouts, after Graham Wills 97. Nodes are placed on concentric circles depending their distance from a given root node.
• circo – circular layout, after Six and Tollis 99, Kauffman and Wiese 02. This is suitable for certain diagrams of multiple cyclic structures, such as certain telecommunications networks.

You can also specify left, center or right to align the resulting image.

A parameter in the form of <number>x<number> is interpreted as wanted output size. To only specify width width=<number> or <number>x0 can be used, for height height=<number> or 0x<number>.

<graphviz dot right 800x400>
digraph ExampleGraph {
    // Define nodes
    A [label="Node A"];
    B [label="Node B"];
    C [label="Node C"];
    D [label="Node D"];

    // Define directed edges
    A -> B;
    A -> C;
    B -> C;
    C -> D;
    D -> A;
}
</graphviz>