Graphs
You can include graphs anywhere in your wiki pages. Graphs are implemented via the Graphviz library. To include a Graphviz graph in your page, use the following syntax:
Syntax
The general syntax for including graphs is:
%%<graphviz>%%graphviz graph definition%%</graphviz>%%
The syntax for the actual graph definition is the Graphviz syntax. Please see the Graphviz website for details.
Layout
Use the layout attribute to specify the graphviz layout:
%%<graphviz%% layout%%>...</graphviz>%%
The layout attribute can take one of the following values: dot, neato, twopi, circo or fdp.
If not specified, the dot layout will be used.
Alignment
You can specify the graph's alignment on the page by adding one of the following keywords: left, center (default), right. The graph will be aligned accordingly on the page.
Size
You can specify the width or height only with the width and height attributes:
%%<graphviz%% width:w%%>...</graphviz>%%
%%<graphviz%% height:h%%>...</graphviz>%%
The width and height attribute values are CSS-compatible dimensions, such as: 250px, 100%, 20rem, etc.
The following alternative syntax is also supported:
%%<graphviz%% wxh%%>...</graphviz>%%
where w and h are respectively the width and height of the graph in pixels.
You can combine all attributes, but if the height or width attributes are also used, they will take precedence over the wxh attribute.
Caption
Add a caption to your graph with the following syntax:
%%<graphviz%% |caption%%>...</graphviz>%%
Examples
dot layout
<graphviz dot center>
graph {
a -- b;
b -- c;
a -- c;
d -- c;
e -- c;
e -- a;
}
</graphviz>
graph {
a -- b;
b -- c;
a -- c;
d -- c;
e -- c;
e -- a;
}
</graphviz>
<graphviz dot width:100% |Figure 1. Finite State Machine>
digraph {
rankdir=LR;
size="12,5"
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8 LR_10;
node [shape = circle];
LR_0 -> LR_10 [ label = "Sa(B)" ];
LR_0 -> LR_1 [ label = "Testen" ];
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 = "Sx(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)" ];
LR_8 -> LR_9 [ label = "Test" ];
}
</graphviz>
digraph {
rankdir=LR;
size="12,5"
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8 LR_10;
node [shape = circle];
LR_0 -> LR_10 [ label = "Sa(B)" ];
LR_0 -> LR_1 [ label = "Testen" ];
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 = "Sx(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)" ];
LR_8 -> LR_9 [ label = "Test" ];
}
</graphviz>
neato layout
<graphviz neato right>
digraph {
a -> b;
b -> c;
c -> d;
d -> a;
}
</graphviz>
digraph {
a -> b;
b -> c;
c -> d;
d -> a;
}
</graphviz>
twopi layout
<graphviz twopi>
digraph {
a -> b[label="0.2",weight="0.2"];
a -> c[label="0.4",weight="0.4"];
e -> e[label="0.1",weight="0.1"];
e -> b[label="0.7",weight="0.7"];
}
</graphviz>
digraph {
a -> b[label="0.2",weight="0.2"];
a -> c[label="0.4",weight="0.4"];
e -> e[label="0.1",weight="0.1"];
e -> b[label="0.7",weight="0.7"];
}
</graphviz>
<graphviz twopi>
digraph {
node [shape = circle,
style = filled,
color = grey,
label = '']
node [fillcolor = red]
a
node [fillcolor = green]
b c d
node [fillcolor = orange]
edge [color = grey]
a -> {b c d}
b -> {e f g h i j}
c -> {k l m n o p}
d -> {q r s t u v}
}
</graphviz>
digraph {
node [shape = circle,
style = filled,
color = grey,
label = '']
node [fillcolor = red]
a
node [fillcolor = green]
b c d
node [fillcolor = orange]
edge [color = grey]
a -> {b c d}
b -> {e f g h i j}
c -> {k l m n o p}
d -> {q r s t u v}
}
</graphviz>
circo layout
<graphviz circo>
graph {
a -- b[color=red,penwidth=3.0];
b -- c;
c -- d[color=red,penwidth=3.0];
d -- e;
e -- f;
a -- d;
b -- d[color=red,penwidth=3.0];
c -- f[color=red,penwidth=3.0];
}
</graphviz>
graph {
a -- b[color=red,penwidth=3.0];
b -- c;
c -- d[color=red,penwidth=3.0];
d -- e;
e -- f;
a -- d;
b -- d[color=red,penwidth=3.0];
c -- f[color=red,penwidth=3.0];
}
</graphviz>
Subgraphs
<graphviz dot 200x200>
digraph {
subgraph cluster_0 {
label="Subgraph A";
a -> b;
b -> c;
c -> d;
}
subgraph cluster_1 {
label="Subgraph B";
a -> f;
f -> c;
}
}
</graphviz>
digraph {
subgraph cluster_0 {
label="Subgraph A";
a -> b;
b -> c;
c -> d;
}
subgraph cluster_1 {
label="Subgraph B";
a -> f;
f -> c;
}
}
</graphviz>
This page was modified on 13 May 2016 at 3:29 PM.
Source
====== Graphs ======
You can include graphs anywhere in your wiki pages. Graphs are implemented via the [[http://www.graphviz.org/|Graphviz]] library. To include a Graphviz graph in your page, use the following syntax:
===== Syntax =====
The general syntax for including graphs is:
''%%<graphviz>%%//graphviz graph definition//%%</graphviz>%%''
The syntax for the actual graph definition is the Graphviz syntax. Please see the [[http://www.graphviz.org/|Graphviz]] website for details.
==== Layout ====
Use the //layout// attribute to specify the graphviz layout:
''%%<graphviz%% //layout//%%>...</graphviz>%%''
The //layout// attribute can take one of the following values: ''dot'', ''neato'', ''twopi'', ''circo'' or ''fdp''.
If not specified, the ''dot'' layout will be used.
==== Alignment ====
You can specify the graph's alignment on the page by adding one of the following keywords: ''left'', ''center'' (default), ''right''. The graph will be aligned accordingly on the page.
==== Size ====
You can specify the width or height only with the ''width'' and ''height'' attributes:
''%%<graphviz%% width://w//%%>...</graphviz>%%''
''%%<graphviz%% height://h//%%>...</graphviz>%%''
The ''width'' and ''height'' attribute values are CSS-compatible dimensions, such as: ''250px'', ''100%'', ''20rem'', etc.
The following alternative syntax is also supported:
''%%<graphviz%% //w//x//h//%%>...</graphviz>%%''
where ''//w//'' and ''//h//'' are respectively the width and height of the graph in pixels.
You can combine all attributes, but if the ''height'' or ''width'' attributes are also used, they will take precedence over the ''//w//x//h//'' attribute.
==== Caption ====
Add a caption to your graph with the following syntax:
''%%<graphviz%% |caption%%>...</graphviz>%%''
===== Examples =====
==== dot layout ====
<code polifonic><graphviz dot center>
graph {
a -- b;
b -- c;
a -- c;
d -- c;
e -- c;
e -- a;
}
</graphviz></code>
<graphviz dot>
graph {
a -- b;
b -- c;
a -- c;
d -- c;
e -- c;
e -- a;
}
</graphviz>
<code polifonic>
<graphviz dot width:100% |Figure 1. Finite State Machine>
digraph {
rankdir=LR;
size="12,5"
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8 LR_10;
node [shape = circle];
LR_0 -> LR_10 [ label = "Sa(B)" ];
LR_0 -> LR_1 [ label = "Testen" ];
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 = "Sx(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)" ];
LR_8 -> LR_9 [ label = "Test" ];
}
</graphviz></code>
<graphviz dot width:100% |Figure 1. Finite State Machine>
digraph {
rankdir=LR;
size="12,5"
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8 LR_10;
node [shape = circle];
LR_0 -> LR_10 [ label = "Sa(B)" ];
LR_0 -> LR_1 [ label = "Testen" ];
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 = "Sx(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)" ];
LR_8 -> LR_9 [ label = "Test" ];
}
</graphviz>
==== neato layout ====
<code polifonic>
<graphviz neato right>
digraph {
a -> b;
b -> c;
c -> d;
d -> a;
}
</graphviz></code>
<graphviz neato right>
digraph {
a -> b;
b -> c;
c -> d;
d -> a;
}
</graphviz>
==== twopi layout ====
<code polifonic>
<graphviz twopi>
digraph {
a -> b[label="0.2",weight="0.2"];
a -> c[label="0.4",weight="0.4"];
e -> e[label="0.1",weight="0.1"];
e -> b[label="0.7",weight="0.7"];
}
</graphviz>
</code>
<graphviz twopi>
digraph {
a -> b[label="0.2",weight="0.2"];
a -> c[label="0.4",weight="0.4"];
e -> e[label="0.1",weight="0.1"];
e -> b[label="0.7",weight="0.7"];
}
</graphviz>
<code polifonic>
<graphviz twopi>
digraph {
node [shape = circle,
style = filled,
color = grey,
label = '']
node [fillcolor = red]
a
node [fillcolor = green]
b c d
node [fillcolor = orange]
edge [color = grey]
a -> {b c d}
b -> {e f g h i j}
c -> {k l m n o p}
d -> {q r s t u v}
}
</graphviz>
</code>
<graphviz twopi>
digraph {
node [shape = circle,
style = filled,
color = grey,
label = ""]
node [fillcolor = red]
a
node [fillcolor = green]
b c d
node [fillcolor = orange]
edge [color = grey]
a -> {b c d}
b -> {e f g h i j}
c -> {k l m n o p}
d -> {q r s t u v}
}
</graphviz>
==== circo layout ====
<code polifonic><graphviz circo>
graph {
a -- b[color=red,penwidth=3.0];
b -- c;
c -- d[color=red,penwidth=3.0];
d -- e;
e -- f;
a -- d;
b -- d[color=red,penwidth=3.0];
c -- f[color=red,penwidth=3.0];
}
</graphviz></code>
<graphviz circo>
graph {
a -- b[color=red,penwidth=3.0];
b -- c;
c -- d[color=red,penwidth=3.0];
d -- e;
e -- f;
a -- d;
b -- d[color=red,penwidth=3.0];
c -- f[color=red,penwidth=3.0];
}
</graphviz>
==== Subgraphs ====
<code polifonic><graphviz dot 200x200>
digraph {
subgraph cluster_0 {
label="Subgraph A";
a -> b;
b -> c;
c -> d;
}
subgraph cluster_1 {
label="Subgraph B";
a -> f;
f -> c;
}
}
</graphviz></code>
<graphviz dot 200x200>
digraph {
subgraph cluster_0 {
label="Subgraph A";
a -> b;
b -> c;
c -> d;
}
subgraph cluster_1 {
label="Subgraph B";
a -> f;
f -> c;
}
}
</graphviz>