Dokuwiki Plugins

Installing the GraphViz Plugin

Required packages: graphviz imagemagick ttf-freefont ttf-bitstream-vera
Login to Dokuwiki under an administrative account and go to Admin → Manage Plugins
Make sure <wikidir>/lib/plugins is writable by www-data.
Paste http://danjer.doudouke.org/graphviz.zip into the field and download the plugin. Dokuwiki will unzip and install it for you. There is no configuration.
Lock down <wikidir>/lib/plugins after this (group, world: read-only).

Edit page to see GraphViz DOT code

GraphViz Reference
Examples

<graphviz> digraph { A→B→C; B→D; } </graphviz>

<graphviz> graph { a [label=“Foo”]; b [shape=box]; a – b – c [color=blue]; b – d [style=dotted]; } </graphviz>
Wikipedia article including this example

<graphviz> graph { V1 – V2 [label=“11”]; V1 – V3 [label=“22”]; V2 – V4 [label=“33”]; V3 – V4 [label=“44”]; } </graphviz>

<graphviz> graph { server[shape=rectangle;label=“Server”]; node[shape=ellipse]; address[label=“Address”];

database[shape=diamond;label=“Database”]; user[shape=rectangle;label=“User”];

node[shape=ellipse]; id[label=“id”]; email[label=“email”]; name[label=“name”];

server – address; server – database [label=“1”, len=3]; database – user [label=“n”, len=2]; user – id; user – name; user – email; } </graphviz>

Linux Journal: Introduction to GraphViz
<graphviz> digraph G { node [shape = record];

node0 [ label =“<f0> | <f1> J | <f2> ”]; node1 [ label =“<f0> | <f1> E | <f2> ”]; node4 [ label =“<f0> | <f1> C | <f2> ”]; node6 [ label =“<f0> | <f1> I | <f2> ”]; node2 [ label =“<f0> | <f1> U | <f2> ”]; node5 [ label =“<f0> | <f1> N | <f2> ”]; node9 [ label =“<f0> | <f1> Y | <f2> ”]; node8 [ label =“<f0> | <f1> W | <f2> ”]; node10 [ label =“<f0> | <f1> Z | <f2> ”]; node7 [ label =“<f0> | <f1> A | <f2> ”]; node3 [ label =“<f0> | <f1> G | <f2> ”];

“node0”:f0 → “node1”:f1; “node0”:f2 → “node2”:f1;

“node1”:f0 → “node4”:f1; “node1”:f2 → “node6”:f1; “node4”:f0 → “node7”:f1; “node4”:f2 → “node3”:f1;

“node2”:f0 → “node5”:f1; “node2”:f2 → “node9”:f1;

“node9”:f0 → “node8”:f1; “node9”:f2 → “node10”:f1; }

</graphviz>

<graphviz> digraph G { rankdir = LR; node [shape=record, width=.1, height=.1];

node0 [label = “<p0> | <p1> | <p2> | <p3> | <p4> | | ”, height = 3];

node[ width=2 ]; node1 [label = “{<e> r0 | 123 | <p> }” ]; node2 [label = “{<e> r10 | 13 | <p> }” ]; node3 [label = “{<e> r11 | 23 | <p> }” ]; node4 [label = “{<e> r12 | 326 | <p> }” ]; node5 [label = “{<e> r13 | 1f3 | <p> }” ]; node6 [label = “{<e> r20 | 123 | <p> }” ]; node7 [label = “{<e> r40 | b23 | <p> }” ]; node8 [label = “{<e> r41 | 12f | <p> }” ]; node9 [label = “{<e> r42 | 1d3 | <p> }” ];

node0:p0 → node1:e; node0:p1 → node2:e; node2:p → node3:e; node3:p → node4:e; node4:p → node5:e;

node0:p2 → node6:e; node0:p4 → node7:e; node7:p → node8:e; node8:p → node9:e; } </graphviz>

UML Diagrams Using Graphviz Dot
<graphviz> digraph G { fontname = “Bitstream Vera Sans” fontsize = 8

node [

fontname = "Bitstream Vera Sans"
fontsize = 8
shape = "record"

]

edge [

arrowhead = "empty"
fontname = "Bitstream Vera Sans"
fontsize = 8

]

Object [

label = "{Object|\\

- id : int\l|

}“ ]

Widget [

label = "{Widget|\\

- position : Vec2f\l|

+ update() : void\l
+ draw() : void\l}” ]

Button [

label = "{Button|\\

- caption : string\l|

+ press() : void\l}“ ]

Checkbox [

label = "{Checkbox|\\

- checked : bool\l
- caption : string\l|

+ press() : void\l}” ]

Button → Widget Checkbox → Widget

Widget → Object

} </graphviz>

Homepage <plot> plot [-20:20] cos(x)/x </plot>