Mermaid Diagram Editor

Mermaid Gantt Diagramm: Projektzeitplan Diagramme

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

100% clientseitig. Deine Daten verlassen niemals deinen Browser.

Vorlagen:

Editor wird geladen...

Diagrammvorschau erscheint hier...

Verwandte Werkzeuge

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.

FeldBeispielHinweise
nameBuild APIAngezeigte Beschriftung
statusdone, active, critOptional, kombinierbar
idAufgabeapi1Erforderlich, wenn andere Aufgaben davon abhängen
start2024-03-01 oder after andereExplizites Datum oder Abhängigkeit
dauer5d, 2wTage 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.