Gantt-Diagramm
Ein Gantt-Diagramm ist ein Balkendiagramm, das den Projektfortschritt und die für den Abschluss eines Projekts benötigte Zeit darstellt. Ein Gantt-Diagramm zeigt die Anzahl der Tage zwischen Start- und Enddatum von End- und Sammellementen eines Projekts.
Hinweise
Ein Gantt-Diagramm zeichnet jede geplante Aufgabe als durchgehenden Balken auf, der sich von links nach rechts erstreckt. Die x-Achse repräsentiert die Zeit, die y-Achse erfasst die verschiedenen Aufgaben und ihre Reihenfolge der Fertigstellung.
Wichtiger ist, dass das Gantt-Diagramm, wenn Daten, Tage oder eine bestimmte Menge von Daten einer Aufgabe ausgeschlossen werden, diese Änderungen ausgleicht, indem es um dieselbe Anzahl von Tagen nach rechts verlängert, anstatt Lücken innerhalb der Aufgabe zu erzeugen .
Kopieren
Einbetten
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes 2026-03-16,2026-03-18,2026-03-19
section Section
A task :a1, 2026-03-07, 7d
Another task :after a1, 5d
Wenn die ausgeschlossenen Daten jedoch zwischen zwei aufeinanderfolgend beginnenden Aufgaben liegen, werden die ausgeschlossenen Daten im Diagramm übersprungen und leer gelassen, und anschließend beginnt die Aufgabe nach dem Ende der ausgeschlossenen Daten. Wie unten gezeigt:
Kopieren
Einbetten
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes Sunday, Friday, Saturday
section Section
A task :a1, 2026-03-07, 5d
Another task :after a1, 7d
Gantt-Diagramme sind nützlich, um die für die Fertigstellung eines Projekts benötigte Zeit zu verfolgen, können aber mit einigen Anpassungen auch verwendet werden, um "arbeitsfreie Tage" grafisch darzustellen.
Syntax
Kopieren
Einbetten
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2026-01-06,2026-01-08
Active task :active, des2, 2026-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2026-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2026-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
Aufgaben laufen standardmäßig fortlaufend; das Startdatum der nächsten Aufgabe ist standardmäßig das Enddatum der vorherigen Aufgabe.
Der Aufgabentitel und seine Metadaten werden durch einen Doppelpunkt (:) getrennt, die Metadateneinträge durch Kommas (,). Gültige Tags sind active, done, crit und milestone. Tags sind optional, müssen aber, wenn sie verwendet werden, an erster Stelle stehen. Nach der Verarbeitung der Tags werden die verbleibenden Metadateneinträge wie folgt interpretiert:
- Wenn ein einzelnes Element angegeben wird, bestimmt es, wann die Aufgabe endet. Es kann ein konkretes Datum oder eine Uhrzeit oder eine Dauer sein. Wenn eine Dauer angegeben wird, wird sie zum Startdatum der Aufgabe addiert, um das Enddatum der Aufgabe zu bestimmen, wobei etwaige Ausschlüsse berücksichtigt werden.
- Wenn zwei Elemente angegeben werden, wird das letztere Element genauso interpretiert wie im vorherigen Fall. Das erste Element kann ein explizites Startdatum oder eine Uhrzeit angeben (Format durch dateFormat festgelegt) oder über after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] auf eine andere Aufgabe verweisen. Im letzteren Fall wird das Startdatum der Aufgabe anhand des spätesten Enddatums aller referenzierten Aufgaben festgelegt.
- Wenn drei Elemente angegeben werden, werden die letzten beiden Elemente wie in den vorherigen Fällen interpretiert. Das erste Element gibt die ID der Aufgabe an und kann mit der Syntax later <taskID> referenziert werden.
| Metadaten-Syntax | Startdatum | Enddatum | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | Mit dateformat interpretiertes startdate | Mit dateformat interpretiertes endDate | taskID |
| <taskID>, <startDate>, <length> | Mit dateformat interpretiertes startdate | Startdatum + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Das Enddatum der zuvor angegebenen Aufgabe otherTaskID | Mit dateformat interpretiertes endDate | taskID |
| <taskID>, after <otherTaskId>, <length> | Das Enddatum der zuvor angegebenen Aufgabe otherTaskID | Startdatum + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | Mit dateformat interpretiertes startdate | Das Startdatum der zuvor angegebenen Aufgabe otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Das Enddatum der zuvor angegebenen Aufgabe otherTaskID | Das Startdatum der zuvor angegebenen Aufgabe otherTaskID | taskID |
| <startDate>, <endDate> | Mit dateformat interpretiertes startdate | 使用 dateformat 解释的 enddate | Nicht zutreffend |
| <startDate>, <length> | Mit dateformat interpretiertes startdate | Startdatum + length | Nicht zutreffend |
| after <otherTaskID>, <endDate> | Das Enddatum der zuvor angegebenen Aufgabe otherTaskID | 使用 dateformat 解释的 enddate | Nicht zutreffend |
| after <otherTaskID>, <length> | Das Enddatum der zuvor angegebenen Aufgabe otherTaskID | Startdatum + length | Nicht zutreffend |
| <startDate>, until <otherTaskId> | Mit dateformat interpretiertes startdate | Das Startdatum der zuvor angegebenen Aufgabe otherTaskID | Nicht zutreffend |
| after <otherTaskId>, until <otherTaskId> | Das Enddatum der zuvor angegebenen Aufgabe otherTaskID | Das Startdatum der zuvor angegebenen Aufgabe otherTaskID | Nicht zutreffend |
| <endDate> | Das Enddatum der vorherigen Aufgabe | 使用 dateformat 解释的 enddate | Nicht zutreffend |
| <length> | Das Enddatum der vorherigen Aufgabe | Startdatum + length | Nicht zutreffend |
| until <otherTaskId> | Das Enddatum der vorherigen Aufgabe | Das Startdatum der zuvor angegebenen Aufgabe otherTaskID | Nicht zutreffend |
Format der Dauer
Bei der Angabe von <length> verwendest du eine Zahl, gefolgt von einem der folgenden Einheitssuffixe:
| Einheit | Suffix | Beispiel |
|---|---|---|
| Millisekunde | ms | 50ms |
| Sekunde | s | 30s |
| Minute | m | 30m |
| Stunde | h | 4h |
| Tag | d | 7d |
| Woche | w | 3w |
| Monat | m | 2m |
| Jahr | y | 1y |
Dezimalwerte werden ebenfalls unterstützt (z. B. 2.5d). Ungültige Dauer-Markierungen (z. B. 3dX) werden ignoriert, und die Aufgabe erhält standardmäßig eine Dauer von null.
Der Einfachheit halber zeigt die Tabelle keine mehreren Aufgaben, die mit der after-Syntax aufgelistet werden. Im Folgenden findest du Beispiele:
Kopieren
Einbetten
gantt
apple :a, 2026-07-20, 1w
banana :crit, b, 2026-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2026-07-20, until b c
Titel
title ist eine optionale Zeichenkette, die oben im Gantt-Diagramm angezeigt wird und das gesamte Diagramm beschreibt.
Ausschließen
excludes ist eine optionale Eigenschaft, die bestimmte Daten (Format YYYY-MM-DD), Wochentage (z. B. "sunday") oder "weekends" akzeptiert, aber nicht das Wort "weekdays" verwenden kann. Diese Daten werden im Diagramm markiert und von der Berechnung der Aufgabendauer ausgeschlossen. Das bedeutet, dass, wenn der Dauerzeitraum einer Aufgabe ausgeschlossene Daten enthält, die ausgeschlossenen Tage zum Endzeitpunkt der Aufgabe addiert werden, um sicherzustellen, dass die Dauer der Aufgabe mit der im Code angegebenen übereinstimmt.
Wochenende
Beim Ausschließen von Wochenenden kannst du das Wochenende auf Freitag und Samstag oder Samstag und Sonntag festlegen. Standardmäßig ist das Wochenende Samstag und Sonntag. Um den Wochenendbeginn festzulegen, kannst du in einer neuen Zeile eine optionale Eigenschaft weekend hinzufügen, gefolgt von friday oder saturday.
Kopieren
Einbetten
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat Букмекерлар-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2026-01-01, 30d
Another task :after a1, 20d
Abschnittsdeklaration
Du kannst das Diagramm in Abschnitte unterteilen, um verschiedene Teile des Projekts (z. B. Entwicklung und Dokumentation) zu trennen.
Verwende dazu am Anfang einer Zeile die section-Syntax und gib ihr einen Namen. Beachte, dass dieser Name im Gegensatz zum Titel des gesamten Diagramms erforderlich ist.
Meilenstein
Du kannst Meilensteine zum Diagramm hinzufügen. Meilensteine unterscheiden sich von Aufgaben, da sie einen konkreten Zeitpunkt repräsentieren und durch die milestone-Syntax gekennzeichnet werden. Im Folgenden findest du ein Beispiel für die Verwendung von Meilensteinen: Die genaue Position des Meilensteins wird durch das Startdatum des Meilensteins und die Dauer der Aufgabe bestimmt, wie unten gezeigt:
Kopieren
Einbetten
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49, 2m
Task A : 10m
Task B : 5m
Final milestone : milestone, m2, 18:08, 4m
Vertikale Markierung
vert bedeutet, im Gantt-Diagramm eine vertikale Linie hinzuzufügen, um wichtige Daten wie Deadlines, wichtige Ereignisse oder Prüfpunkte einfach hervorzuheben. Diese Markierungen erstrecken sich über das gesamte Diagramm und werden anhand des von dir angegebenen Datums positioniert. Im Gegensatz zu Meilensteinen belegen vertikale Markierungen keine Zeile. Sie sind reine visuelle Referenzpunkte, die helfen, die Zeitachse zu unterteilen und wichtige Zeitpunkte leichter erkennbar zu machen.
Kopieren
Einbetten
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m
Datum festlegen
dateFormat definiert das Datumseingabeformat für Gantt-Diagramm-Elemente, axisFormat definiert das Datumsausgabeformat beim Rendern des Diagramms.
Eingabedatumsformat
Das Standard-Eingabedatumsformat ist YYYY-MM-DD; du kannst dateFormat anpassen.
Kopieren
Einbetten
dateFormat YYYY-MM-DD
Die folgenden Formatoptionen werden unterstützt:
| 输入 | Beispiel | Beschreibung |
|---|---|---|
| YYYY | 2026 | Vierstelliges Jahr |
| YY | 26 | Zweistelliges Jahr |
| Q | 1..4 | Quartalszahl |
| M MM | 1..12 | Monatszahl |
| D DD | 1..31 | Ein Tag im Monat |
| Do | 1st..31st | Ein Tag im Monat mit Ordnungszahl |
| DDD DDDD | 1..365 | Ein Tag im Jahr |
| X | 1410715640.579 | Unix-Zeitstempel |
| x | 1410715640579 | Unix-Zeitstempel in Millisekunden |
| H HH | 0..23 | 24-Stunden-Zeit |
| h hh | 1..12 | 12-Stunden-Zeit, in Verbindung mit a A |
| a A | am pm | Vormittag oder Nachmittag |
| m mm | 0..59 | Minute |
| s ss | 0..59 | Sekunden |
| S | 0..9 | Zehntelsekunde |
| SS | 0..99 | Hundertstelsekunde |
| SSS | 0..999 | Tausendstelsekunde |
| Z ZZ | +12:00 | Der Versatz zu UTC, im Format +-HH:mm, +-HHmm oder Z |
Das Ausgabedatumsformat der Achse
Das Standard-Ausgabedatumsformat ist YYYY-MM-DD. Du kannst axisFormat anpassen, zum Beispiel bedeutet 2026-Q1 das erste Quartal des Jahres 2026.
Kopieren
Einbetten
axisFormat %Y-%m-%d
Die folgenden Formatzeichenketten werden unterstützt:
| Format,Definition | |
|---|---|
| %a | Kurzname des Wochentags |
| %A | Vollständiger Name des Wochentags |
| %b | Kurzname des Monats |
| %B | Vollständiger Name des Monats |
| %c | Lokalisiertes Datum und Uhrzeit |
| %d | Datum, Dezimalzahl [01,31] |
| %e | Datum, mit Leerzeichen aufgefüllte Dezimalzahl [1,31], entspricht %_d |
| %H | Stunde (24-Stunden-Format), Dezimalzahl [00,23] |
| %I | Stunde (12-Stunden-Format), Dezimalzahl [01,12] |
| %j | Der wievielte Tag im Jahr, Dezimalzahl [001,366] |
| %m | Monat, Dezimalzahl [01,12] |
| %M | Minute, Dezimalzahl [00,59] |
| %L | Millisekunde, Dezimalzahl [000, 999] |
| %p | Vormittag oder Nachmittag |
| %S | Sekunde, Dezimalzahl [00,59] |
| %U | Die wievielte Woche im Jahr (mit Sonntag als erstem Wochentag), Dezimalzahl [00,53] |
| %w | Wochentag, mit Leerzeichen aufgefüllte Dezimalzahl [0,6], wobei 0 für Sonntag steht |
| %W | Die wievielte Woche im Jahr (mit Montag als erstem Wochentag), Dezimalzahl [00,53] |
| %x | Lokalisierte Datumsdarstellung, z. B.: 2026-09-18 |
| %X | Lokalisierte Zeitdarstellung, z. B.: 14:30:00 |
| %y | Jahr ohne Jahrhundert, Dezimalzahl [00,99], z. B. steht 26 für das Jahr 2026 |
| %Y | Jahr mit Jahrhundert, Dezimalzahl |
| %Z | Abkürzung des Zeitzonennamens, z. B. "-0700" |
| %% | Escape-Zeichen, um das Prozentzeichen % selbst anzuzeigen |
Achsenteilung
Die Standardausgabe-Skalenstriche sind automatisch. Du kannst tickInterval anpassen, zum Beispiel 1day oder 1week.
Kopieren
Einbetten
tickInterval 1day
Das Muster ist
Kopieren
Einbetten
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Wochenbasierte tickInterval beginnt standardmäßig am Sonntag. Wenn du einen anderen Wochentag als Beginn der tickInterval angeben möchtest, verwende die weekday-Option, wie im folgenden Code:
Kopieren
Einbetten
gantt
tickInterval 1week
weekday monday
Ausgabe im Kompaktmodus
Der Kompaktmodus ermöglicht es dir, mehrere Aufgaben in derselben Zeile anzuzeigen. Über die vorangehende YAML-Einstellung wird der Anzeigemodus des Diagramms gesteuert, um den Kompaktmodus für das Gantt-Diagramm zu aktivieren.
Kopieren
Einbetten
---
displayMode: compact
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2026-01-01, 30d
Another task :a2, 2026-01-20, 25d
Another one :a3, 2026-02-10, 20d
In einem Gantt-Diagramm können Kommentare eingegeben werden, die der Parser ignoriert. Ein Kommentar muss eine eigene Zeile einnehmen und mit %% (doppeltes Prozentzeichen) beginnen. Jeder Text vom Kommentarbeginn bis zum nächsten Zeilenumbruch wird als Kommentar betrachtet, einschließlich jeglicher Diagrammsyntax.
Kopieren
Einbetten
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
Heute-Markierung
Du kannst die Markierung für das aktuelle Datum gestalten oder ausblenden. Um sie zu gestalten, füge einen Wert für den Schlüssel todayMarker hinzu.
Kopieren
Einbetten
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Um die Markierung auszublenden, setze todayMarker auf off.
Kopieren
Einbetten
todayMarker off
Beispiel
Balken-Gantt-Diagramm
Kopieren
Einbetten
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
Zeitachse (einschließlich Kommentaren, CSS und Frontmatter-Konfiguration)
Kopieren
Einbetten
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
# theme: forest
# themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers:
#item36 { fill: CadetBlue }
// Custom marker workaround CSS from forum (below)
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
---
gantt
title Timeline - Gantt Sampler
dateFormat YYYY
axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade
section Issue19062
71 : item71, 1900, 1930
section Issue19401
36 : item36, 1913, 1935
section Issue1300
94 : item94, 1910, 1915
5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
