Mermaid Gantt-Diagramm Editor
Ein Gantt-Diagramm legt Arbeit auf einen Kalender: was wann läuft, was sich überschneidet und was erst starten kann, wenn etwas anderes fertig ist. Nimm es, wenn Termine und Abhängigkeiten der Punkt sind. Brauchst du nur die Reihenfolge und keine Daten, ist ein Flussdiagramm leichter und veraltet nicht, sobald der Plan rutscht.
Ein Release-Zeitplan mit Abhängigkeiten und Meilenstein
`after a1` macht daraus erst ein Gantt-Diagramm statt eines Bildes von Balken — die Abhängigkeit ist deklariert, also verschiebt sich alles Nachgelagerte mit, wenn die erste Aufgabe wandert. Der Meilenstein markiert einen festen Termin, der keine Zeit verbraucht.
gantt
title Release 2.4
dateFormat YYYY-MM-DD
axisFormat %d.%m.
section Umsetzung
API-Vertrag :done, a1, 2026-01-06, 10d
Implementierung :active, a2, after a1, 20d
Interne QS : a3, after a2, 8d
section Auslieferung
Staging-Testlauf : b1, after a3, 5d
Go/No-Go-Runde :milestone, m1, after b1, 0d
Produktivsetzung :crit, b2, after m1, 3dDurchgearbeitete Beispiele
1. Das kleinste gültige Diagramm
`dateFormat` sagt Mermaid, wie es die Daten lesen soll, die du schreibst; `axisFormat` steuert, wie sie angezeigt werden. Das sind zwei verschiedene Einstellungen, und sie zu verwechseln ist der häufigste Frust bei Gantt-Diagrammen.
gantt
title Sprint 14
dateFormat YYYY-MM-DD
section Arbeit
Funktion umsetzen :2026-03-02, 10d2. Aufgaben-IDs und Abhängigkeiten
Gibst du einer Aufgabe eine ID, können spätere Aufgaben `after <id>` sagen. Sind die Abhängigkeiten einmal deklariert, änderst du ein Startdatum an einer Stelle und der Rest folgt.
gantt
title Datenmigration
dateFormat YYYY-MM-DD
section Vorbereitung
Schema sichten :a1, 2026-02-02, 5d
Zuordnung bauen :a2, after a1, 8d
section Durchführung
Testlauf :a3, after a2, 3d
Umstellung :a4, after a3, 1d3. Statusangaben
`done`, `active` und `crit` verändern die Darstellung eines Balkens. Das ist die billigste Art, aus einem Plan ein Diagramm zu machen, das die Frage „wo stehen wir" beantwortet und nicht nur „was war geplant".
gantt
title Plattformarbeit Q1
dateFormat YYYY-MM-DD
section Infrastruktur
Terraform aufräumen :done, t1, 2026-01-05, 12d
Kubernetes anheben :active, t2, 2026-01-19, 15d
Kosten prüfen : t3, after t2, 5d
section Sicherheit
Abhängigkeiten prüfen :crit, s1, 2026-01-12, 6d4. Meilensteine
Ein Meilenstein ist ein Zeitpunkt, keine Spanne — gib ihm `0d`. Nimm sie für Termine, die von außen feststehen: eine Messe, eine Vertragsfrist, ein Code-Freeze.
gantt
title Markteinführung
dateFormat YYYY-MM-DD
section Entwicklung
Feature-Freeze :milestone, m1, 2026-04-01, 0d
Fehlerjagd : e1, 2026-04-01, 5d
Release-Branch :milestone, m2, after e1, 0d
section Marketing
Sperrfrist endet :milestone, m3, 2026-04-15, 0d5. Wochenenden ausnehmen
`excludes weekends` sorgt dafür, dass Samstag und Sonntag bei Dauern nicht mitzählen; eine Aufgabe über 10 Tage läuft dann über zwei Arbeitswochen statt mitten ins Wochenende. Das ist meist der Unterschied zwischen einem Plan, dem Leute glauben, und einem, den sie stillschweigend ignorieren.
gantt
title Neuen Dienst aufsetzen
dateFormat YYYY-MM-DD
excludes weekends
section Aufbau
Infrastruktur bereitstellen :p1, 2026-05-04, 5d
CI/CD verdrahten :p2, after p1, 5d
section Übergabe
Handbuch und Schulung :p3, after p2, 4dSyntaxreferenz für Gantt-Diagramme
Gantt hat in einem Punkt die unnachgiebigste Grammatik der sechs Typen hier — der Aufgabenzeile — und überall sonst die nachsichtigste. Genau deshalb sind so viele Gantt-Fehler still.
| Syntax | Bedeutung |
|---|---|
| gantt | Öffnet das Diagramm. |
| title Text | Titel des Diagramms. |
| dateFormat YYYY-MM-DD | Wie die von dir geschriebenen Daten GELESEN werden. |
| axisFormat %d.%m. | Wie Daten auf der Achse ANGEZEIGT werden. Andere Einstellung als dateFormat. |
| excludes weekends | Samstage und Sonntage bei Dauern überspringen. |
| section Name | Fasst Aufgaben in einem beschrifteten Band zusammen. |
| Aufgabe :id, 2026-01-01, 10d | Aufgabe mit festem Start und Dauer. |
| Aufgabe :id, after andere, 10d | Aufgabe, die beginnt, wenn `andere` endet. |
| Aufgabe :done, id, ... | Erledigt — ausgegraut gezeichnet. |
| Aufgabe :active, id, ... | Läuft gerade — hervorgehoben gezeichnet. |
| Aufgabe :crit, id, ... | Kritisch — in der Akzentfarbe gezeichnet. |
| Name :milestone, id, Datum, 0d | Ein Zeitpunkt statt einer Spanne. |
| 10d / 3w / 2h | Dauer in Tagen, Wochen, Stunden. Die Einheit ist Pflicht. |
Sechs Gantt-Fehler — und nur einer davon ist eine Fehlermeldung
Das unterscheidet Gantt von allen anderen Diagrammtypen hier. Nachgestellt mit Mermaid 11.12.2: Genau einer der sechs Fälle verhindert, dass das Diagramm gezeichnet wird. Die anderen fünf erzeugen ein völlig plausibel aussehendes und falsches Diagramm — und das ist weit gefährlicher, denn ein Diagramm, das gezeichnet wurde, prüft niemand nach.
Was du siehst
Parse error, endet mit: Expecting 'taskData', got 'NL'
Warum
Eine Aufgabenzeile ohne Doppelpunkt. Der Doppelpunkt trennt den Anzeigenamen von den Daten, und ohne ihn gibt es nichts zu lesen. Das ist der einzige Gantt-Fehler in dieser Liste, den Mermaid rundheraus zurückweist.
Lösung
Einen Doppelpunkt zwischen Name und ID setzen.
gantt
dateFormat YYYY-MM-DD
section Arbeit
Entwurf a1, 2026-01-01, 5dgantt
dateFormat YYYY-MM-DD
section Arbeit
Entwurf :a1, 2026-01-01, 5dWas du siehst
Das Diagramm rendert, aber die Achse umfasst plötzlich viele Monate
Warum
Ein `after`, das auf eine nicht existierende Aufgaben-ID zeigt — meist ein Tippfehler oder eine umbenannte ID. Mermaid warnt nicht, sondern setzt die Aufgabe an eine beliebige Stelle, und die Achse dehnt sich, um sie zu erfassen. Zwei Zehn-Tage-Aufgaben können so auf einer Achse über acht Monate landen.
Lösung
Prüfen, dass jedes `after <id>` exakt einer deklarierten ID entspricht. Ein plötzlich anderer Achsenmaßstab ist das Erkennungszeichen.
gantt
dateFormat YYYY-MM-DD
section S
Entwurf :a1, 2026-01-01, 10d
Bau :a2, after entwurf, 10dgantt
dateFormat YYYY-MM-DD
section S
Entwurf :a1, 2026-01-01, 10d
Bau :a2, after a1, 10dWas du siehst
Ein Aufgabenname bricht beim ersten Doppelpunkt ab
Warum
Ein Doppelpunkt im Aufgabennamen. Der erste Doppelpunkt ist der Trenner, alles danach wird als Aufgabendaten gelesen — aus „Phase 1: Entwurf" wird eine Aufgabe namens „Phase 1", und das Wort Entwurf verschwindet.
Lösung
Doppelpunkte aus Aufgabennamen heraushalten. Nimm einen Bindestrich oder pack das Detail in die Section.
gantt
dateFormat YYYY-MM-DD
section S
Phase 1: Entwurf :a1, 2026-01-01, 10dgantt
dateFormat YYYY-MM-DD
section S
Phase 1 - Entwurf :a1, 2026-01-01, 10dWas du siehst
Ein Balken schrumpft auf nichts zusammen
Warum
Eine Dauer ohne Einheit. `5` bedeutet nicht fünf Tage — die Einheit ist Pflicht, und ohne sie bekommt die Aufgabe keine sinnvolle Länge. Das Diagramm wird trotzdem gezeichnet, mit einer Aufgabe, die scheinbar keine Zeit braucht.
Lösung
Immer die Einheit schreiben: `5d`, `3w`, `2h`.
gantt
dateFormat YYYY-MM-DD
section S
Entwurf :a1, 2026-01-01, 5gantt
dateFormat YYYY-MM-DD
section S
Entwurf :a1, 2026-01-01, 5dWas du siehst
Termine landen still auf dem falschen Tag
Warum
Ein Datum, das nicht zum deklarierten `dateFormat` passt. `01/03/2026` unter `dateFormat YYYY-MM-DD` scheitert nicht — Mermaid rettet, was es kann, und legt die Aufgabe auf den 3. Januar. Wolltest du den 1. März, ist der Plan jetzt um zwei Monate falsch und sieht dabei tadellos aus.
Lösung
Daten genau im deklarierten Format schreiben. Willst du Tag/Monat/Jahr eingeben, deklariere `dateFormat DD/MM/YYYY`.
gantt
dateFormat YYYY-MM-DD
section S
Entwurf :a1, 01/03/2026, 10dgantt
dateFormat YYYY-MM-DD
section S
Entwurf :a1, 2026-03-01, 10dWas du siehst
Die Dauern stimmen, die Endtermine in der Realität nicht
Warum
Kein `excludes weekends`. Voreingestellt sind zehn Tage zehn Kalendertage inklusive Wochenende, also endet alles, was länger als eine Arbeitswoche dauert, im Diagramm früher als in der Praxis.
Lösung
`excludes weekends` weit oben ergänzen — außer die Arbeit läuft wirklich an sieben Tagen die Woche.
gantt
dateFormat YYYY-MM-DD
section S
Migration :a1, 2026-06-01, 10dgantt
dateFormat YYYY-MM-DD
excludes weekends
section S
Migration :a1, 2026-06-01, 10dHinweise zum Rendern
Gemessen an Mermaid 11.12.2, so wie diese Seite es einsetzt. Gantt verhält sich anders als jeder andere Diagrammtyp hier.
Gantt ist der einzige Typ mit fester Renderbreite
Jedes andere Diagramm auf dieser Seite wächst in die Richtung, in die sein Inhalt wächst. Ein Gantt-Diagramm ist in seiner viewBox immer 1.264 Pixel breit — ob es drei Aufgaben hat oder vierzig. Nur die Höhe ändert sich, von etwa 172 auf 1.060 Pixel. Die Achse wird gestaucht oder gedehnt, um in diese feste Breite zu passen; deshalb wirken ein Plan über zwei Jahre und einer über zwei Wochen gleich dicht. Sind deine Balken unlesbar dünn, liegt es am Zeitraum, nicht an der Zahl der Aufgaben.
Vom PNG-Exportfehler war Gantt am stärksten betroffen
Weil Mermaid `width="100%"` und keine Höhe ausgibt, löste der Browser die Exportgröße gegen eine Vorgabe von 300×150 auf — und Gantts breites, flaches Seitenverhältnis machte das so schlimm wie irgend möglich: Ein Diagramm von 1.280×148 wurde als PNG mit 600×58 exportiert. Der Export liest inzwischen die viewBox, dasselbe Diagramm kommt jetzt mit 2.560×296 heraus. Gut zu wissen, falls noch alte exportierte Gantt-PNGs herumliegen — die lassen sich nicht hochskalieren.
Der PNG-Export ist hier pixelgenau
Gantt zeichnet seine Beschriftungen als reinen SVG-Text statt als eingebettetes HTML und lässt sich deshalb — anders als Fluss-, Klassen-, Zustands- und ER-Diagramme — direkt rastern. Das exportierte PNG entspricht exakt dem Bildschirm, ohne erneutes Rendern und ohne Verschiebung in der Typografie.
Die Grammatik ist fast überall nachsichtig, nur nicht beim Doppelpunkt
Fehlende Sections, unbekannte Statuswörter, Daten im falschen Format und Dauern ohne Einheit rendern alle. Zurückgewiesen wird nur eine Aufgabenzeile ohne Doppelpunkt. Diese Schieflage ist das Nützlichste, was man über das Schreiben von Gantt-Diagrammen wissen kann: Dass ein Diagramm gezeichnet wird, sagt fast nichts darüber aus, ob es stimmt.
Das Theme ändert Farben, niemals das Layout
Helles und dunkles Theme ergeben für dieselbe Quelle eine identische viewBox; Balkenpositionen und Achse können sich beim Themewechsel also nicht verschieben.
Wann etwas anderes besser passt
Sind die Termine geraten, stellt ein Gantt-Diagramm sie mit einer Genauigkeit dar, die sie nicht verdient haben — und jemand wird dich daran festhalten. Ein Flussdiagramm, das die Reihenfolge ohne Daten zeigt, ist ehrlicher und muss nicht gepflegt werden, wenn der Plan rutscht.
Ändert sich der Plan wöchentlich, ist ein textbasiertes Gantt in der Versionsverwaltung wirklich gut — das Diff zeigt, was sich verschoben hat. Aber ein Plan, den niemand aktualisiert, ist schlimmer als gar keiner. Sei ehrlich, welchen von beiden du gerade baust.
Und für alles mit Ressourcenausgleich, Kapazitäten oder personenbezogener Zuteilung ist das schlicht das falsche Werkzeug. Mermaid zeichnet Balken auf einen Kalender; es weiß nicht, wer die Arbeit macht und ob diese Person schon ausgelastet ist.
Andere Diagrammtypen
Geschrieben von Dominik Malsch · Zuletzt aktualisiert: