Zeitleiste
Erzählen Sie eine Geschichte Jahr für Jahr
Was ist ein Zeitleiste?
Eine Zeitleiste ordnet Ereignisse chronologisch an: Unternehmensgeschichte, Projektmeilensteine, Produktentwicklung, Incident-Retrospektiven. Mermaid-Zeitleisten gruppieren mehrere Ereignisse pro Periode und bleiben in jeder Größe lesbar.
Zeitleisten sind das Diagramm der Rückschau: Incident-Postmortems, Folien zur Unternehmensgeschichte, der Abschnitt „wie sind wir hierher gekommen“ in einem Strategiepapier. Sie sind ungewöhnlich gut darin, Lücken sichtbar zu machen — drei Ereignisse im März und danach nichts bis September ist schon für sich eine Geschichte. Was sie nicht können, ist skalieren: Perioden sind Beschriftungen, gleichmäßig verteilt unabhängig vom Abstand, und sortiert wird nichts. Eine Periode trägt außerdem nichts als Text — keine Zuständigkeit, keinen Link, keinen Status, nach dem sich filtern ließe.
Live-Beispiel
timeline
title History of the project
2024 : Idea & prototype
2025 : First customers
: Seed funding
2026 : EU expansion
: AI featuresWann einsetzen
Häufige Fehler
Perioden werden nie sortiert
Mermaid zeichnet die Perioden in der Reihenfolge, in der Sie sie geschrieben haben; ein Eintrag von 2026 über einem von 2024 bleibt oben. Es gibt keine chronologische Prüfung und keine Warnung — sortieren Sie den Quelltext selbst.
Perioden vor der ersten Sektion verschwinden
Sobald eine Zeitleiste auch nur eine Sektion enthält, fällt jede vor dieser ersten section-Zeile deklarierte Periode still und ohne Fehlermeldung aus dem Rendering. Geben Sie diesen frühen Perioden eine eigene Sektion — oder verzichten Sie ganz auf Sektionen.
Sätze statt Ereignisse
Ereignistext bricht bei fester Breite um, ein ganzer Satz wird also zu vier gestapelten Zeilen und bläht die Höhe des gesamten Diagramms auf. Halten Sie Ereignisse bei wenigen Wörtern und schreiben Sie das Detail in den umgebenden Text.
Grundlegende Syntax
timeline
title My timeline
2025 : Event A
: Event B
2026 : Event Ctimeline title History of the projectDer Titel ist optional, übernimmt aber die Rolle einer Bildunterschrift — wichtig, sobald das Diagramm allein in eine Folie oder ein Postmortem exportiert wird.
2025 : First customersLinks vom Doppelpunkt steht die Periodenbeschriftung — ein Jahr, ein Quartal, Sprint 12, irgendetwas. Sie wird nie als Datum geparst, jedes Format funktioniert also.
2024 : Idea : PrototypeWeitere Doppelpunkte in derselben Zeile fügen derselben Periode weitere Ereignisse hinzu, was den Quelltext kompakt hält, wenn ein Jahr mehrere nennenswerte Momente enthält.
section Early days 2024 : IdeaSektionen fassen aufeinanderfolgende Perioden zu einer Ära zusammen und färben sie gemeinsam ein — praktisch, um vor und nach einer Finanzierungsrunde, einer Migration oder einem Ausfall zu trennen.
Fragen zu diesem Diagramm
Kann eine Periode mehrere Ereignisse enthalten?
Ja — fügen Sie unter derselben Periode zusätzliche Zeilen hinzu, die mit „:“ beginnen, und sie stapeln sich vertikal unter diesem Datum.
Zeitleiste oder Gantt-Diagramm?
Die Zeitleiste fürs Erzählen der Vergangenheit oder die Gesamtsicht (Ereignisse mit Daten). Das Gantt für die Arbeitsplanung (Aufgaben mit Dauern und Abhängigkeiten).
Kann ich eine Mermaid-Zeitleiste in ein Confluence-Postmortem einfügen?
Confluence unterstützt Mermaid nicht nativ; nutzen Sie ein Makro aus dem Marketplace oder fügen Sie ein exportiertes SVG oder PNG ein. GitHub und GitLab rendern Zeitleisten direkt aus einem Codeblock, für Berichte im Repository braucht es also kein zusätzliches Werkzeug.
Wie färbe ich die Sektionen einer Zeitleiste ein?
Sektionen nehmen ihre Farben aus der Theme-Skala. Überschreiben Sie sie mit einer init-Direktive in der ersten Zeile — %%{init: {"themeVariables": {"cScale0": "#4f46e5"}}}%% —, wobei cScale0 die erste Sektion ist, cScale1 die zweite, bis hinauf zu cScale11. Die Palette steckt fest im exportierten SVG.
Kann ich eine Zeitleiste senkrecht darstellen?
Nein — Zeitleisten werden waagerecht gerendert, eine Einstellung für die Richtung gibt es nicht. Umgebrochen wird nie: Das Diagramm wird nur breiter. Für eine lange Historie in einer schmalen Spalte nutzen ein Flowchart von oben nach unten oder ein gitGraph TB: den Platz weit besser.
Kann ich aus einem Incident-Bericht automatisch eine Zeitleiste erzeugen?
Fügen Sie den Bericht in Mermaid Studio ein, und die KI extrahiert die datierten Ereignisse in eine Zeitleiste, die Sie danach bearbeiten. Behandeln Sie sie als ersten Entwurf: Die Perioden behalten die Reihenfolge, in der sie extrahiert wurden — prüfen Sie die Chronologie also vor dem Veröffentlichen.
Zeitleiste oder ein anderer Diagrammtyp?
Zeitleiste oder User Journey?
Beide reihen Schritte von links nach rechts. Eine Zeitleiste beantwortet das Wann: datierte Ereignisse, kein Akteur, keine Bewertung. Eine User Journey beantwortet, wie es sich angefühlt hat: geordnete Schritte, ein Akteur, ein Zufriedenheitswert. Hat niemand die Ereignisse erlebt, nehmen Sie die Zeitleiste.
Zeitleiste oder Git-Graph?
Eine Zeitleiste ist flach — jedes Ereignis sitzt auf einer Linie. Ein Git-Graph verzweigt. Eine Release-Historie mit parallelen Wartungsbranches braucht den Git-Graph; eine Produktgeschichte, bei der die Reihenfolge zählt und die Parallelität nicht, braucht die Zeitleiste. Fragen Sie sich, ob irgendetwas parallel lief.
Erstellen Sie jetzt Ihr Zeitleiste
Beschreiben Sie es in natürlicher Sprache — die KI schreibt den Mermaid-Code für Sie.
Mermaid Studio öffnen