Gantt- und Tortendiagramme

Beispiel Gantt-Diagramm

Auch einfache Gantt-Diagramme zur Projektplanung sind mit wenigen übersichtlichen Zeilen erstellt. Aufgaben können in Bereiche ("sections") unterteilt werden. Jede Aufgabe wird nach dem Grundschema "Name: ID, Beginn, Ende" in einer Zeile angelegt.

Für Beginn und Ende können absolute Start- und Endzeitpunkte oder relative Zeiträume genutzt werden. Auch Abhängigkeiten zwischen Aufgaben lassen sich mit dem Schlüsselwort "after" gefolgt von den IDs der Vorgänger kompakt in einer Zeile erzeugen. Die abhängigen Aufgaben erscheinen dann im Zeitstrahl automatisch immer erst nach all ihren Vorgängern, auch wenn diese verlängert oder verschoben werden.

Folgender Code erzeugt ein rudimentäres Gantt-Diagramm:

<div class="mermaid">
    gantt
        title Projekt Neue Website
        dateFormat YYYY-MM-DD
        section UI UX
        Farbschema: u1, 2022-02-01, 1d
            Menü: u2, 2022-02-02, 2d
            Responsivität: u3, 2022-02-04, 3d
        section Backend
            Datenbanken: b1, 2022-02-01, 3d
        section Sicherheit
            Zertifikate: s1, 2022-02-01, 2d
            Formularvalidierung: s2, 2022-02-02, 3d
        section Inhalt
            Über uns: i1, 2022-02-05, 1d
            Impressum: i2, 2022-02-07, 1d
            Erste Artikel: i3, 2022-02-08, 3d
        section Testing
            Backend testen: t1, after b1, 3d
            Frontend testen: t2, after u1 u2 u3, 3d
</div>

Die Namen der sections und der Aufgaben sowie die IDs können frei gewählt werden.

Beispiel Tortendiagramme

Am einfachsten sind Tortendiagramme. Ein Tortendiagramm in Mermaid zu erstellen ist so simpel, wie zwei Spalten in Excel zu markieren und auf die Diagramm-Schaltfläche zu klicken:

<div class="mermaid">
    pie
        title Beliebteste Antworten bei Umfragen
        "Ja": 10
        "Nein": 15
        "Weiß nicht": 20
        "keine Zeit": 55
</div>

• 

Ausgabe des Codes zum Tortendiagram (Screenshot: Claus Godbersen)

Diese und die anderen verfügbaren Diagrammtypen bieten noch eine ganze Reihe weiterer Elemente und Konfigurationsmöglichkeiten, die in der Dokumentation auf Github gut erklärt werden.

Natürlich gilt: Je größer das Diagramm, desto größer auch der Code. Wer Farbschema und andere Aspekte der Diagramme anpassen will, muss sich außerdem mit den Theme Variables im JSON-Format vertraut machen und noch ein paar zusätzliche Zeilen einfügen.

Probleme mit Pfeilen und Farben

Bei der Anwendung von Mermaid gibt es noch einige wenige Probleme. So ist die Standarddarstellung mancher Diagramme nicht immer makellos. Die Pfeile in Flussdiagrammen nehmen teils etwas unbeholfen anmutende Wege. Das fiele bei manueller Erstellung sicher schöner aus.

In Gantt-Diagrammen folgt die unterschiedliche Färbung der Zeilen, die grundsätzlich der Lesbarkeit dient, mitunter keiner erkennbaren Systematik. Dies sind eher ästhetische Probleme, die sich je nach Anwendungsfall als Nebensächlichkeit, aber auch als Ausschlusskriterium herausstellen können.

Fazit

Für alle, die Diagramme bisher mit Hilfsmitteln wie MS Office beziehungsweise guter Spezialsoftware wie MS Visio oder draw.io grafisch erstellen oder CSV-Dateien zur automatischen Erstellung nutzen, könnte Mermaid eine echte Offenbarung sein. Statt Formen per Drag and Drop umständlich zusammenzustellen oder in gedrungenen CSV-Dateien nur mit Mühe den richtigen Eintrag zu finden, macht es geradezu Spaß, mit ein paar Zeilen des gut nachvollziehbaren Mermaid-Codes Schaubilder auf den Bildschirm zu zaubern.

Das Problem, dass sehr große Diagramme irgendwann schwer zu lesen und noch schwerer zu pflegen werden, löst Mermaid zwar nicht. Aber gerade kleine Diagramme zum Zweck der Textergänzung lassen sich mit diesem Tool extrem einfach gestalten.

Aufgrund der genannten Probleme sollten Anwender gut prüfen, ob Mermaid für die eigene Produktivnutzung geeignet ist. Zweifellos erhöht sich der Aufwand, wenn Diagramme zum Beispiel in Unternehmen einer Gestaltungsrichtlinie exakt folgen müssen. In solchen Fällen ist es fraglich, ob Mermaid sich lohnt.

Trotzdem gilt: Unbedingt ausprobieren - zumal Mermaid weiterhin aktiv gepflegt und verbessert wird. Die letzte Version ist am 16. Januar 2022 erschienen.