Mermaid.js Timeline-Syntaxleitfaden

Was ist ein Zeitstrahl-Diagramm?

Ein Zeitstrahl-Diagramm ist ein chronologisches Visualisierungswerkzeug, das verwendet wird, um Ereignisse oder Projektmeilensteine entlang einer linearen zeitlichen Achse abzubilden. Während Gantt-Diagramme komplexe Aufgabenabhängigkeiten und Dauern verarbeiten, konzentriert sich das Zeitstrahl-Diagramm auf die wann—und liefert eine klare, leicht lesbare Erzählung über die Entwicklung eines Projekts oder den Freigabecyclus eines Systems.

Mit Mermaid.js, können Sie Ihren Zeitstrahl mit einem einfachen, hierarchischen Textformat definieren. Die Engine verarbeitet automatisch Abstände, Formatierung von Datums- oder Zeitintervallbeschriftungen sowie die Ausrichtung von Ereignismarkern entlang der zentralen zeitlichen Achse.

Grundlagen-Syntaxleitfaden

Um einen gültigen, ausführbaren Zeitstrahl zu entwerfen, müssen Sie die Achsenperiode definieren und Ereignisse bestimmten Abschnitten zuordnen.

1. Initialisieren des Zeitstrahls

Sie initialisieren die Leinwand mit dem timelineSchlüsselwort. Die Struktur wird durch die Definition von Abschnitten (die als Gruppierungen wirken) und die Zuordnung von Ereignissen (oder Daten) zu diesen Abschnitten aufgebaut.

timeline
    title Historie der Systementwicklung
    section 2025
        Q1 : Alpha-Release
    section 2026
        Q2 : Beta-Release

2. Hinzufügen von Details zu Ereignissen

Sie können mehrere Details zu einem einzelnen Zeitmarker hinzufügen, indem Sie eine durch Doppelpunkte getrennte Liste verwenden. Dies ist nützlich, um wichtige Ergebnisse oder Versionsnummern, die mit einem bestimmten Datum oder Zeitraum verbunden sind, zusammenzufassen.

timeline
    section Q3 2026
        Release : v1.0.0
                : Leistungsverbesserungen
                : Sicherheitspatches

Beispiel für ein echtes Mermaid.js-Zeitdiagramm: Produktfreigabepfad

Dieser Bauplan modelliert einen mehrjährigen Produktentwicklungsplan, bei dem Freigaben nach Finanzjahren gruppiert werden und die wichtigsten Lieferpunkte für jeden Zyklus hervorgehoben werden.

timeline
    title Produktentwicklungsplan 2026-2027
    section 2026
        Q1 : Entdeckungsphase
           : Interviews mit Stakeholdern
        Q2 : Entwicklung der Minimum Viable Product (MVP)
           : Gestaltung der Kern-API
        Q3 : Beta-Release
           : Benutzerfeedback-Schleifen
    section 2027
        Q1 : Vollständige Einführung
           : Globale Skalierung

Best Practices für Zeitstrahlen

  • Halten Sie Kategorien knapp: Verwenden Sie Abschnittum hochrangige Gruppierungen (wie Jahre oder Hauptphasen) zu kennzeichnen, wobei die eigentlichen Ereignisse darunter präzise und handlungsorientiert bleiben.
  • Konsistente Datumsformatierung:Stellen Sie sicher, dass Ihre Zeitstrahlereignisse im Code chronologisch angeordnet sind, da der Mermaid-Engine die Reihenfolge Ihres Skripts folgt, um die Platzierung zu bestimmen.
  • Verwenden Sie Details für Kontext:Überlasten Sie die zentrale Achse nicht mit zu viel Text. Verwenden Sie das mehrzeilige Ereignisformat, um „was passiert ist“ zu erläutern, anstatt die Datumsbezeichnung selbst zu lang zu machen.
Nach oben scrollen