GraphViz

Created: 2021-07-29 Updated: 2021-09-06 History Videos

Bei GraphViz handelt es sich um eine offene Auszeichnungssprache, mit der man Diagramme erstellen kann. GraphViz kann kostenlos genutzt werden und lässt sich zum Beispiel dazu zu verwenden, Diagramme durch eine Webseite oder andere Programme automatisiert erstellen zu lassen. Auf dieser Seite sammle ich nützliche Hinweise für die Arbeit mit GraphViz.

Figure 1. Ein einfaches Diagramm, das mit GraphViz erstellt wurde

Gliederung

  1. Verwendung
  2. Vorlagen
    1. Aufgabendarstellung
  3. Formatierung

Verwendung

Figure 2. Eine Verzweigung in GraphViz

Dieses Diagramm entsteht aus folgendem Text:

digraph {
    Hallo -> das -> ist -> GraphViz
    das -> wird -> gut
}

Um GraphViz benutzen zu können, benötigt man nur einen Texteditor, in den man die einzelnen Befehle eingibt. Der Texteditor kann dann zum Beispiel durch ein Plugin erweitert werden, um das Ergebnis als Grafik ausgeben zu lassen. Ich nutze dafür zum Beispiel VSCodium und das Plugin GraphViz language support.

Alternativ dazu eignet sich auch die Webseite Viz.js, auf der man GraphViz im Browser benutzen kann.

Man kann aber auch für Automatisierungszwecke den Text als Eingabe für einen Kompilierer auf der Kommandozeile verwenden, um ihn dann in ein Bild umzuwandeln.

Für GraphViz besteht die Möglichkeit, die Diagrammbeschreibungen statisch in eine Grafik umzuwandeln oder dynamisch anzeigen zu lassen. Ein Vorteil der statischen Methode besteht darin, dass Nutzer auf einer Webseite bei einer geringen Anzahl von Diagrammen weniger Daten laden müssen, da die Umwandlung nicht durch die Webseite bereitgestellt werden muss. Der Vorteil der dynamischen Methode besteht jedoch darin, dass das Ergebnis der Diagrammbeschreibung (wie bei Viz.js) direkt im Browser bearbeitet und angezeigt werden kann, ohne dass Zwischenschritte erforderlich sind.

Für diese Webseite nutze ich die statische Methode, da ich pro Seite nur wenige Diagramme verwende und die JavaScript-Datei für die Darstellung für meine Verhältnisse zu groß ist.

Vorlagen

Aufgabendarstellung

GraphViz ermöglicht schnelle einheitliche Aufgabendarstellungen, sodass man damit zum Beispiel ein Hintergrundbild für den eigenen Computer erstellen kann. Durch die schnelle Bearbeitbarkeit, können neue Aufgaben hinzugefügt werden, ohne jedes Mal zusätzliche Arbeit in die grafische Gestaltung fließen zu lassen.

Figure 3. Eine Darstellung von Aufgaben

Diese Darstellung wird durch folgenden Code erzeugt:

digraph Tasks {
    /* Formatierung */
    bgcolor="black"
    pad="0.5"
    node [shape="box" style="rounded, filled" fillcolor="white" margin="0.6,0.2"]
    edge [style="filled" color="white" penwidth="2" arrowhead=empty minlen=1.5]

    /* Nodes */
    Task1 [label="Wäsche waschen"]
    Task2 [label="Unterlagen sortieren"]
    Task3 [label="Einkaufen fahren"]
    Task4 [label="Diese Aufgabe ist besonders lang. \n Deshalb habe ich mehrere Zeilenumbrüche\n hinzugefügt, damit es trotzdem gut lesbar ist."]
    // Task5 [label="Diese Aufgabe ist auskommentiert und damit nicht aktiv. Um neue Aufgaben hinzuzufügen einfach einen Task6 hinzufügen und unten entsprechend ergänzen."]

    /* Beziehungen */
    Task1 
    -> Task2
    -> Task3
    -> Task4
    // -> Task5
}

Formatierung

Anmerkungen

    Abbildungen

    Literatur