====== Wie löse ich ein Problem? ======
Die nachfolgende Grafik stellt ein Flußdiagramm zur Lösung eines Problems dar. Es wurde mit Hilfe des Plugins ''graphviz'' in der Sprache ''dot'' erstellt. Der Vorteil liegt darin, dass kein eigenes Programm zum Zeichnen und damit auch kein Upload einer Grafikdatei nötig ist.
Beim erstmaligen Aurfruf wird die Grafik gerendert und temporär als Bilddatei gespeichert, welche bis zur nächsten Änderung des Quellcodes erhalten bleibt.

<graphviz renderer='dot'>
digraph {
  node [shape=box, style=filled, fontsize=12, fillcolor=lightskyblue];
  edge [labelfontsize=10];
  Anfang [shape=rect, style="rounded,filled", fillcolor=gold];

  Anfang -> if_funktioniert_es;
  if_funktioniert_es [shape=diamond, label="Funktioniert\nalles wie es soll?"];
  if_funktioniert_es -> do_ruehr_es_nicht_an [taillabel="Ja"];
  if_funktioniert_es -> if_hast_du_dran_gefummelt [taillabel="Nein"];
  do_ruehr_es_nicht_an [fillcolor=seagreen1,label="Rühr' es\nja nicht an!"];
  if_hast_du_dran_gefummelt [shape=diamond, label="Hast du dran\nrumgefummelt?"];
  if_hast_du_dran_gefummelt -> print_idiot [taillabel="Ja"];
  print_idiot [fillcolor=orangered,label="Idiot!"];
  print_idiot -> if_weiss_es_jemand[headport=n];
  if_weiss_es_jemand [shape=diamond, label="Weiß jemand davon?"];
  if_weiss_es_jemand -> print_du_armes_schwein[taillabel="Ja"];
  print_du_armes_schwein [fillcolor=lightpink, label="Du arme Sau!"];
  print_du_armes_schwein -> if_kannst_dus_wem_umhaengen;
  if_kannst_dus_wem_umhaengen [shape=diamond, label="Kannst du es\njemandem anhängen?"];
  if_kannst_dus_wem_umhaengen -> ende [taillabel="Ja"];
  if_kannst_dus_wem_umhaengen -> print_du_armes_schwein [taillabel="Nein"];
  if_weiss_es_jemand -> print_behalts_fuer_dich [taillabel="Nein"];
  print_behalts_fuer_dich [fillcolor=seagreen1,label="Behalt's für dich!"];
  print_behalts_fuer_dich -> ende;
  if_hast_du_dran_gefummelt -> if_kriegst_du_aerger [taillabel="Nein"];
  if_kriegst_du_aerger [shape=diamond, label="Wirst du\nÄrger kriegen?"];
  if_kriegst_du_aerger -> print_du_armes_schwein [taillabel="Ja"];
  if_kriegst_du_aerger -> print_mehr_glueck_als_verstand [taillabel="Nein"];
  print_mehr_glueck_als_verstand [fillcolor=seagreen1, label="Mehr Glück\nals Verstand!"];
  print_mehr_glueck_als_verstand -> ende;
  do_ruehr_es_nicht_an -> ende;
  ende [shape=rect, style="rounded,filled", fillcolor=gold, label="Kein Problem!"];
  { rank=same; if_funktioniert_es; if_hast_du_dran_gefummelt }
}
</graphviz>

===== Navi im Wiki =====

<graphviz>
digraph G { bgcolor="transparent" node [style=filled, color=black, fillcolor=lightblue shape=box]; node [URL="/\N"] "ZUM-Wiki-Rundgang" -> "Was ist ein Wiki?"; "ZUM-Wiki-Rundgang" -> "Das ZUM-Wiki"; "ZUM-Wiki-Rundgang" -> "Probier es aus!"; "Probier es aus!" -> "Ich will im Wiki schreiben."; "Probier es aus!" -> "Ich will im Wiki etwas finden."; "Probier es aus!" -> "Wiki-Fuehrerschein"; "ZUM-Wiki-Rundgang" -> "Wikis in der Schule?"; }
</graphviz>

===== Komplexer Graph =====
<graphviz>
digraph G {
  subgraph cluster_1
  { style=filled; color=lightgrey; node [style=filled,color=white]; 
    a0 -> a1 -> a2 -> a3; label = "Teil 1";
  }

  subgraph cluster_2 
  { node [style=filled]; 
    b0 -> b1 -> b2 -> b3; label = "Teil 2"; color=blue
  }
  start -> a0; start -> b0; a1 -> b3; b2 -> a3; a3 -> a0; a3 -> end; b3 -> end;
  start [shape=diamond];
  end [shape=box];
}
</graphviz>