DevBento logoDevBento
Werkzeuge/Mermaid Diagramm Editor/Mermaid Gantt Diagramm: Projektzeitplan Diagramme

Mermaid Gantt Diagramm: Projektzeitplan Diagramme

Erstelle Gantt Diagramme mit Mermaid Syntax. Definiere Aufgaben, Dauern, Abhängigkeiten, Meilensteine und Abschnitte. Live Vorschau.

Vorlagen:

Editor wird geladen...

Diagrammvorschau erscheint hier...

Verwandte Werkzeuge
.mdMarkdown Vorschau: Markdown in HTML Konvertieren
Konvertiere Markdown in Echtzeit zu HTML mit GFM-Unterstützung für Tabellen, Aufgabenlisten und formatierte Codeblöcke. Kopiere HTML-Ausgabe mit einem Klick.
</>SQL / CSS / HTML Formatierer
Formatiere und minifiziere SQL-Abfragen, CSS-Stylesheets und HTML-Markup mit Syntaxhervorhebung. Rücke Code im Browser ein, verschönere oder komprimiere ihn.
{}JSON Formatierer und Validator
Werkzeug zum Formatieren, Minifizieren und Validieren von JSON Daten mit Syntaxhervorhebung und interaktiver Baumansicht. Erkennt Fehler sofort im Browser.
+/-Textvergleich
Vergleiche zwei Textblöcke in Side-by-Side- oder Inline-Ansicht mit Zeichen-für-Zeichen-Hervorhebung. Finde sofort Hinzufügungen, Löschungen und Änderungen.
SVG Viewer & Optimizer
Export diagram as SVG

Mermaid Gantt Diagramm Syntax

Gantt Diagramme tragen Aufgaben gegen eine Zeitachse auf. Jede Aufgabe hat ein Startdatum (explizit oder relativ zu einer anderen Aufgabe), eine Dauer und optional einen Status und eine Gruppierung nach Abschnitt. Mermaid rendert sie als horizontale Balkendiagramme mit Zeitachse, sodass es einfach ist, Projektzeitpläne, Sprint Pläne und Migrationszeitpläne in versioniertem Text zu dokumentieren.

Grundstruktur

gantt
    title Projektname
    dateFormat YYYY-MM-DD
    axisFormat %b %d

    section Phase 1
        Aufgabe A :a1, 2024-01-01, 7d
        Aufgabe B :after a1, 5d

    section Phase 2
        Aufgabe C :after a1, 10d

Jedes Gantt Diagramm beginnt mit gantt. title, dateFormat und axisFormat sind optional, aber empfohlen. Aufgaben werden unter section Kopfzeilen gruppiert.

Aufgabendefinition

Jede Aufgabenzeile hat dieses Format:

Aufgabenname :status, idAufgabe, startDatum, dauer

Alle Felder außer dem Aufgabenname sind optional, aber in der Praxis benötigst du mindestens einen Start (oder eine Abhängigkeit) und eine Dauer.

Feld Beispiel Hinweise
name Build API Angezeigte Beschriftung
status done, active, crit Optional, kombinierbar
idAufgabe api1 Erforderlich, wenn andere Aufgaben davon abhängen
start 2024-03-01 oder after andere Explizites Datum oder Abhängigkeit
dauer 5d, 2w Tage oder Wochen

Abhängigkeiten

Abhängigkeiten sind der nützlichste Teil der Gantt Diagramme. Statt Daten fest zu codieren, definiere Beziehungen:

gantt
    dateFormat YYYY-MM-DD
    Design     :des, 2024-01-01, 5d
    Implement  :impl, after des, 10d
    Test       :test, after impl, 5d
    Deploy     :after test, 2d

Wenn du die Dauer des Designs änderst, verschiebt sich jede nachgelagerte Aufgabe automatisch. So modelliert man kritische Pfade ohne manuelle Datenberechnung.

Mehrere Abhängigkeiten

gantt
    Datenbank :db, 2024-01-01, 10d
    API       :api, 2024-01-05, 15d
    Frontend  :fe, after db api, 12d

Das Frontend beginnt, wenn sowohl die Datenbank als auch die API abgeschlossen sind. Dies modelliert Aufgaben, die mehrere Vorgänger benötigen.

Abschnitte

Abschnitte gruppieren Aufgaben visuell. Sie werden als farbige Bandüberschriften im Diagramm gerendert. Verwende sie für Projektphasen, Teams oder Arbeitspakete. Die Abschnittsfarbe wechselt zwischen den Abschnitten für visuelle Unterscheidung.

Meilensteine

Meilensteine sind Aufgaben mit einer Dauer von null. Sie repräsentieren ein Datum, keine Zeitspanne.

gantt
    Genehmigung  :milestone, appr, after design, 0d
    Veröffentlichung :milestone, rel, after test, 0d

Meilensteine werden als Rauten (Diamanten) auf der Zeitachse gerendert.

Erstelle andere Diagrammtypen mit dem Mermaid Editor oder sieh dir das Sequenzdiagramm für API Interaktionen an.

🔒

Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.

© 2026 devbento.dev · lokal entwickeltChangelog