3.11.1.3 Abbildungen mit GraphViz erstellen

[unmarkierte Version]

Version vom 28. Januar 2016, 11:10 Uhr

Mit der Erweiterung können Sie einfache grafische Abbildungen integrieren, ohne ein separates Grafikprogramm zu bemühen.

Beispiel

Code:

<graphviz> digraph Beispiel1 {Hallo -> Welt!} </graphviz>

Ergebnis:

<graphviz> digraph Beispiel1 { Hallo [shape=box]; Hallo -> "Welt!" [arrowhead=dot] } </graphviz>

Was ist ein graph, node und edge? Graph, Knoten, Kante

Wie beeinflusse ich die Richtung meines graph? [rankdir=TB/BT/LR/RL]

Wie verändere ich die Form, Farbe und Fonts meiner nodes? node [fontname=Verdana,fontsize=12] node [shape=box/ellipse/circle/egg/plaintext/triangle/diamond, style=filled/rounded, color=green, fillcolor=grey, fontcolor=white]

Wie beeinflusse ich die Beschreibung, Farbe und Pfeilspitze von edges?

edge [arrowhead=normal/dot/odot/inv/none, color=blue]

Beispiel

Code:

<graphviz> digraph Beispiel2 {

[bgcolor="transparent"]
[rankdir=LR]

Diamant  
 [shape=diamond, 
  style=filled, 
  color=blue, 
  fillcolor=midnightblue, 
  fontcolor=white];

Ei 

 [shape=egg, 
  style=filled, 
  color=beige, 
  fillcolor=lightcoral];

Kasten 

 [shape=box, 
  style=filled, 
  color=yellow, 
  fillcolor=green];

Haus 

  [shape=house, 
   style=filled, 
   color=gray, 
   fillcolor=red];

Kreis 

 [shape=circle,
  style=filled, 
  color=green, 
  fillcolor=lawngreen, 
  fontcolor=linen];

Nix 

 [shape=none, 
  fontcolor=red];

Diamond -> Kasten -> 
Haus -> Kreis -> Nix [color=blue];
Standard -> Ei -> Haus [color=red];

</graphviz>

Ergebnis:

graphviz> digraph Beispiel2 {

[bgcolor="transparent"]
[rankdir=LR]

Diamant  
  [shape=diamond, 
   style=filled, 
   color=blue, 
   fillcolor=midnightblue, 
   fontcolor=white];
Ei 
  [shape=egg, 
   style=filled, 
   color=beige, 
   fillcolor=lightcoral];
Kasten 
  [shape=box, 
   style=filled, 
   color=yellow, 
   fillcolor=green];
Haus 
   [shape=house, 
    style=filled, 
    color=gray, 
    fillcolor=red];
Kreis 
  [shape=circle,
   style=filled, 
   color=green, 
   fillcolor=lawngreen, 
   fontcolor=linen];
Nix 
  [shape=none, 
   fontcolor=red];

Diamond -> Kasten -> 
Haus -> Kreis -> Nix [color=blue];
Standard -> Ei -> Haus [color=red];

</graphviz>

Detaillierte Informationen finden Sie unter
http://www.mediawiki.org/wiki/GraphViz

Eine gute Übersicht was mit der Erweiterung möglich ist finden Sie unter
http://wiki.zum.de/Hilfe:Graphviz

@@ Zeile 1: / Zeile 1: @@
-Mit der Erweiterung können Sie einfache grafische Abbildungen integrieren.
+Mit der Erweiterung können Sie einfache grafische Abbildungen integrieren, ohne ein separates Grafikprogramm zu bemühen.
 <loop_area type="example">
 '''Code:'''
-<code><graphviz border='frame' format='png'>
+<code><graphviz>
-digraph example1 {Hello->"World!"}
+digraph Beispiel1 {Hallo -> Welt!}
 </graphviz></code>
 '''Ergebnis:'''
-<graphviz border='frame' format='png'>
+<graphviz>
-digraph example1 {Hello->"World!"}
+digraph Beispiel1 {
+Hallo [shape=box];
+Hallo -> "Welt!" [arrowhead=dot]
+}
 </graphviz>
 </loop_area>
+Was ist ein graph, node und edge?
+Graph, Knoten, Kante
+Wie beeinflusse ich die Richtung meines graph?
+[rankdir=TB/BT/LR/RL]
+Wie verändere ich die Form, Farbe und Fonts meiner nodes?
+node [fontname=Verdana,fontsize=12]
+node [shape=box/ellipse/circle/egg/plaintext/triangle/diamond, style=filled/rounded, color=green, fillcolor=grey, fontcolor=white]
+Wie beeinflusse ich die Beschreibung, Farbe und Pfeilspitze von edges?
+edge [arrowhead=normal/dot/odot/inv/none, color=blue]
+<loop_area type="example">
+'''Code:'''
+<code><graphviz> digraph Beispiel2 {
+ [bgcolor="transparent"]
+ [rankdir=LR]
+ Diamant
+   [shape=diamond,
+    style=filled,
+    color=blue,
+    fillcolor=midnightblue,
+    fontcolor=white];
+ Ei
+   [shape=egg,
+    style=filled,
+    color=beige,
+    fillcolor=lightcoral];
+ Kasten
+   [shape=box,
+    style=filled,
+    color=yellow,
+    fillcolor=green];
+ Haus
+    [shape=house,
+     style=filled,
+     color=gray,
+     fillcolor=red];
+ Kreis
+   [shape=circle,
+    style=filled,
+    color=green,
+    fillcolor=lawngreen,
+    fontcolor=linen];
+ Nix
+   [shape=none,
+    fontcolor=red];
+ Diamond -> Kasten ->
+ Haus -> Kreis -> Nix [color=blue];
+ Standard -> Ei -> Haus [color=red];
+</graphviz></code>
+'''Ergebnis:'''
+graphviz> digraph Beispiel2 {
+ [bgcolor="transparent"]
+ [rankdir=LR]
+ Diamant
+   [shape=diamond,
+    style=filled,
+    color=blue,
+    fillcolor=midnightblue,
+    fontcolor=white];
+ Ei
+   [shape=egg,
+    style=filled,
+    color=beige,
+    fillcolor=lightcoral];
+ Kasten
+   [shape=box,
+    style=filled,
+    color=yellow,
+    fillcolor=green];
+ Haus
+    [shape=house,
+     style=filled,
+     color=gray,
+     fillcolor=red];
+ Kreis
+   [shape=circle,
+    style=filled,
+    color=green,
+    fillcolor=lawngreen,
+    fontcolor=linen];
+ Nix
+   [shape=none,
+    fontcolor=red];
+ Diamond -> Kasten ->
+ Haus -> Kreis -> Nix [color=blue];
+ Standard -> Ei -> Haus [color=red];
+</graphviz>
+</loop_area>
-This is a graph with borders and nodes. Maybe there is an Imagemap used so the nodes may be linking to some Pages.