Help:GraphViz

You can now create graphs and flowcharts directly on MozillaWiki using DOT notation which will be rendered by Graphviz.

DOT notation is very powerful. For examples of the types of images you can create visit this Flickr gallery.

We're utilizing the Mediawiki extension GraphViz to provide this feature.

Basic Usage

To include a graphviz image in your page, add <graphviz></graphviz> tags.

The following attributes can be passed as named value pairs in the graphviz tag:

This code overrides the default image format to output a png file and changes the renderer to neato:

<graphviz format="png" renderer="neato">
dot-language
</graphviz>

Additionally, the following extended image syntax attributes are supported as graph tag attributes: type, border, location, alignment, size, link, alt, caption.

This code generates an graph image with a frame border and a caption that reads 'sample graph':

<graphviz border='frame' caption='sample graph'>
dot-language
</graphviz>

Creating dot-language

You can write dot-language directly into the wiki editor as you would any other article. To dot language, consult its comprehensive documentation. You may also wish to start with this wikipedia article which provides a more general overview.

If you're looking for a graphical interface for generating dot files, visit http://graphviz.org/content/resources.

Examples

Hello World

<graphviz caption='Example: Hello World'> digraph example1 {Hello->World} </graphviz>

Grammar digraph

Taken from: https://www.flickr.com/photos/kentbye/1155558879/in/set-72157601523153827

<graphviz> digraph L0 {

size = "8,8";

ordering=out;

node [shape = box]; n0 [label="E"]; n1 [label="T"];

n2 [label="F"];

n3 [label="IDENT : a "];

n4 [label="+"];

n5 [label="T"];

n6 [label="F"];

n7 [label="("];

n8 [label="E"];

n9 [label="T"];

n10 [label="F"];

n11 [label="IDENT : b "];

n12 [label="*"];

n13 [label="F"];

n14 [label="IDENT : c "];

n15 [label=")"];

n16 [label="*"];

n17 [label="F"];

n18 [label="("];

n19 [label="E"];

n20 [label="T"];

n21 [label="F"];

n22 [label="IDENT : d "];

n23 [label="*"];

n24 [label="F"];

n25 [label="IDENT : e "];

n26 [label="+"];

n27 [label="T"];

n28 [label="F"];

n29 [label="("];

n30 [label="E"];

n31 [label="T"];

n32 [label="F"];

n33 [label="IDENT : a "];

n34 [label="*"];

n35 [label="F"];

n36 [label="IDENT : b "];

n37 [label=")"];

n38 [label=")"];

n39 [label="+"];

n40 [label="T"];

n41 [label="F"];

n42 [label="IDENT : q "];

n0 ->{ n1 n4 n5 n39 n40 };

n1 ->n2 ;

n2 ->n3 ;

n5 ->{ n6 n16 n17 };

n6 ->{ n7 n8 n15 };

n8 ->n9 ;

n9 ->{ n10 n12 n13 };

n10 ->n11 ;

n13 ->n14 ;

n17 ->{ n18 n19 n38 };

n19 ->{ n20 n26 n27 };

n20 ->{ n21 n23 n24 };

n21 ->n22 ;

n24 ->n25 ;

n27 ->n28 ;

n28 ->{ n29 n30 n37 };

n30 ->n31 ;

n31 ->{ n32 n34 n35 };

n32 ->n33 ;

n35 ->n36 ;

n40 ->n41 ;

n41 ->n42 ;

} </graphviz>

Process states graph rendered by Neato

Taken from: http://graphviz.org/pdf/neatoguide.pdf

<graphviz renderer="neato"> graph G { run -- intr; intr -- runbl; runbl -- run; run -- kernel; kernel -- zombie; kernel -- sleep; kernel -- runmem; sleep -- swap; swap -- runswap; runswap -- new; runswap -- runmem; new -- runmem; sleep -- runmem; } </graphviz>