—- plugin —- description: Graph Visualization (from text with links between objects to image) author : Andreas Gohr email : andi@splitbrain.org type : Syntax lastupdate : 2010-11-24 compatible : anteater depends : conflicts : similar : GNUplot, Ditaa, svgedit, seqdia tags : media, images, diagram, graphviz

downloadurl: http://github.com/splitbrain/dokuwiki-plugin-graphviz/zipball/master bugtracker : http://github.com/splitbrain/dokuwiki-plugin-graphviz/issues sourcerepo : http://github.com/splitbrain/dokuwiki-plugin-graphviz/ donationurl: http://donate.dokuwiki.org/graphviz

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 Google's chart API for rendering.

The plugin supports exporting to OpenOffice through the ODT Plugin (only with a local graphviz install).

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.

Download and install the plugin using the Plugin Manager using the URL given above. Refer to Plugins on how to install plugins manually.

• 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)
• Version upped (2014/05/21 19:36)
• Merge pull request #8 from araname/master (2014/01/02 11:16)
• update message and add translation (2013/12/25 12:25)

The full path to your graphviz' dot binary can be configured in the config manager. When it isn't configured, remote rendering at Google 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.

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.

<graphviz dot right 500x200>
digraph finite_state_machine {
	rankdir=LR;
	size="9,5"
	node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
	node [shape = circle];
	LR_0 -> LR_2 [ label = "SS(B)" ];
	LR_0 -> LR_1 [ label = "SS(S)" ];
	LR_1 -> LR_3 [ label = "S($end)" ];
	LR_2 -> LR_6 [ label = "SS(b)" ];
	LR_2 -> LR_5 [ label = "SS(a)" ];
	LR_2 -> LR_4 [ label = "S(A)" ];
	LR_5 -> LR_7 [ label = "S(b)" ];
	LR_5 -> LR_5 [ label = "S(a)" ];
	LR_6 -> LR_6 [ label = "S(b)" ];
	LR_6 -> LR_5 [ label = "S(a)" ];
	LR_7 -> LR_8 [ label = "S(b)" ];
	LR_7 -> LR_5 [ label = "S(a)" ];
	LR_8 -> LR_6 [ label = "S(b)" ];
	LR_8 -> LR_5 [ label = "S(a)" ];
}
</graphviz>

http://www.graphviz.org/content/cluster <graphviz> digraph G {

subgraph cluster_0 {
	style=filled;
	color=lightgrey;
	node [style=filled,color=white];
	a0 -> a1 -> a2 -> a3;
	label = "process #1";
}

subgraph cluster_1 {
	node [style=filled];
	b0 -> b1 -> b2 -> b3;
	label = "process #2";
	color=blue
}
start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;

start [shape=Mdiamond];
end [shape=Msquare];

} </graphviz>

<graphviz> graph G {

e
subgraph clusterA {
  a -- b;
  subgraph clusterC {
    C -- D;
  }
}
subgraph clusterB {
  d -- f
}
d -- D
e -- clusterB
clusterC -- clusterB

} </graphviz>

<svg width=„383pt“ height=„301pt“ viewBox = „0 0 383 301“ xmlns=„http://www.w3.org/2000/svg“ xmlns:xlink=„http://www.w3.org/1999/xlink“> <g id=„graph0“ class=„graph“ style=„font-family:Times-Roman;font-size:14.00;“> <title>G</title> <g id=„graph2“ class=„cluster“><title>clusterA</title> <polygon style=„fill:none;stroke:black;“ points=„6,179 259,179 259,6 6,6 6,179“/> </g> <g id=„graph3“ class=„cluster“><title>clusterC</title> <polygon style=„fill:none;stroke:black;“ points=„14,170 131,170 131,75 14,75 14,170“/> </g>

<g id=„graph4“ class=„cluster“><title>clusterB</title> <polygon style=„fill:none;stroke:black;“ points=„277,247 378,247 378,147 277,147 277,247“/> </g> <!– e –> <g id=„node1“ class=„node“><title>e</title> <ellipse style=„fill:none;stroke:black;“ cx=„300“ cy=„277“ rx=„27“ ry=„18“/> <text text-anchor=„middle“ x=„300“ y=„282“>e</text> </g> <!– 0:clusterB –> <g id=„node20“ class=„node“><title>0:clusterB</title> </g> <!– e&#45;&#45;0:clusterB –> <g id=„edge17“ class=„edge“><title>e&#45;&#45;0:clusterB</title>

<path style=„fill:none;stroke:black;“ d=„M306,259C307,255 309,251 310,247“/> </g> <!– a –> <g id=„node3“ class=„node“><title>a</title> <ellipse style=„fill:none;stroke:black;“ cx=„163“ cy=„33“ rx=„27“ ry=„18“/> <text text-anchor=„middle“ x=„163“ y=„38“>a</text> </g> <!– b –> <g id=„node5“ class=„node“><title>b</title> <ellipse style=„fill:none;stroke:black;“ cx=„223“ cy=„42“ rx=„27“ ry=„18“/> <text text-anchor=„middle“ x=„223“ y=„47“>b</text> </g> <!– a&#45;&#45;b –>

<g id=„edge3“ class=„edge“><title>a&#45;&#45;b</title> <path style=„fill:none;stroke:black;“ d=„M189,37C192,37 194,38 197,38“/> </g> <!– C –> <g id=„node7“ class=„node“><title>C</title> <ellipse style=„fill:none;stroke:black;“ cx=„96“ cy=„143“ rx=„27“ ry=„18“/> <text text-anchor=„middle“ x=„96“ y=„148“>C</text> </g> <!– D –> <g id=„node9“ class=„node“><title>D</title> <ellipse style=„fill:none;stroke:black;“ cx=„50“ cy=„102“ rx=„27“ ry=„18“/> <text text-anchor=„middle“ x=„50“ y=„107“>D</text>

</g> <!– C&#45;&#45;D –> <g id=„edge6“ class=„edge“><title>C&#45;&#45;D</title> <path style=„fill:none;stroke:black;“ d=„M80,128C75,124 71,120 66,117“/> </g> <!– d –> <g id=„node11“ class=„node“><title>d</title> <ellipse style=„fill:none;stroke:black;“ cx=„312“ cy=„175“ rx=„27“ ry=„18“/> <text text-anchor=„middle“ x=„312“ y=„180“>d</text> </g> <!– d&#45;&#45;D –> <g id=„edge11“ class=„edge“><title>d&#45;&#45;D</title>

<path style=„fill:none;stroke:black;“ d=„M287,168C237,154 125,123 75,109“/> </g> <!– f –> <g id=„node13“ class=„node“><title>f</title> <ellipse style=„fill:none;stroke:black;“ cx=„342“ cy=„220“ rx=„27“ ry=„18“/> <text text-anchor=„middle“ x=„342“ y=„225“>f</text> </g> <!– d&#45;&#45;f –> <g id=„edge9“ class=„edge“><title>d&#45;&#45;f</title> <path style=„fill:none;stroke:black;“ d=„M323,192C326,196 328,199 331,203“/> </g> <!– 1:clusterC –> <g id=„node21“ class=„node“><title>1:clusterC</title>

</g> <!– 2:clusterB –> <g id=„node22“ class=„node“><title>2:clusterB</title> </g> <!– 1:clusterC&#45;&#45;2:clusterB –> <g id=„edge18“ class=„edge“><title>1:clusterC&#45;&#45;2:clusterB</title> <path style=„fill:none;stroke:black;“ d=„M132,139C176,153 236,170 277,182“/> </g> </g> </svg>

… nanu ? SVG kippt den Footer ? per Update erledigt