Zum Hauptinhalt springen
Visueller Zeitstrahl-Builder 100% Clientseitig • Privat

Mermaid-Zeitstrahlen mit visuellen Werkzeugen erstellen

Organisieren Sie Meilensteine, historische Ereignisse und Produkt-Roadmaps mit interaktiven Blöcken und SVG-Vorschau.

Zeitleisten-Generator

Bereit.

Zeitleisten-Zeiträume

Zum Sortieren ziehen oder Alt+Auf/Ab drücken

0 Zeiträume

Vergrößerte Zeitleiste

Zeitleistenvorschau

100%

Syntaxleitfaden für Mermaid-Zeitstrahlen

Zeitstrahlen ordnen die Chronologie vom Diagrammkopf bis zu Zeiträumen und Ereignissen. Nutzen Sie diese Referenz beim manuellen Schreiben, bei der Fehlersuche oder für Mermaid-Diagramme in Markdown-Dokumenten.

Beispiel zum Kopieren und Einfügen

Zeitraumbezeichnungen und Folgeereignisse

Rücken Sie Zeilen unter einem Zeitraum mit Leerzeichen und einem Doppelpunkt ein.

timeline
  title Incident Review
  Detection : Elevated error rate
            : On-call engineer paged
  Recovery : Faulty release rolled back
           : Service health confirmed

Beispiel zum Kopieren und Einfügen

Meilenstein-Roadmaps mit Abschnitten gliedern

Teilen Sie lange Zeitstrahlen mit dem Schlüsselwort section visuell auf.

timeline
  title Museum Exhibition
  section Preparation
  Research : Select artifacts : Secure loans
  Conservation : Restore pieces : Photograph catalog
  section Public Program
  Opening week : Press preview : Member night
  Closing week : Final tours : Return loans

Beispiel zum Kopieren und Einfügen

Ausrichtung: links nach rechts oder oben nach unten

Verwenden Sie LR für einen horizontalen und TD für einen vertikalen Verlauf.

timeline LR
  title Migration Plan
  Audit : Inventory workloads
  Pilot : Move an internal service
  Cutover : Move production traffic

Beispiel zum Kopieren und Einfügen

Sonderzeichen und Satzzeichen maskieren

Nutzen Sie HTML-Entitäten wie #58;, wenn ein Doppelpunkt zur Zeitbezeichnung gehört.

timeline
  title Operations Log
  Sprint #35;4 #58; 10#58;00 UTC : Deploy at 10:00 : Verify issue #123

Häufige Fehler in Mermaid-Zeitstrahlen beheben

Ohne das Diagramm-Schlüsselwort meldet Mermaid einen Fehler. Beginnen Sie die erste Zeile, die kein Kommentar ist, mit timeline, timeline LR oder timeline TD.

Ein unmaskierter Doppelpunkt in einer Zeitraumbezeichnung kann einen Parserfehler auslösen. Maskieren Sie ihn als #58;.

Fehlerbeispiel

Fehler: Schlüsselwort timeline fehlt

Öffnen Sie dieses Beispiel, prüfen Sie den dauerhaften Fehler und ergänzen Sie dann das Schlüsselwort.

title Release Plan
2026 : Public launch

Fehlerbeispiel

Fehler: unmaskierter Doppelpunkt im Zeitraum

Ersetzen Sie 10:00 in der Zeitraumbezeichnung durch 10#58;00.

timeline
  10:00 UTC : Public launch

Mermaid-Zeitstrahlen mit visuellen Werkzeugen erstellen

Organisieren Sie Meilensteine, historische Ereignisse und Produkt-Roadmaps mit interaktiven Blöcken und SVG-Vorschau.

Beispiel zum Kopieren und Einfügen

Minimaler zweistufiger Zeitstrahl

Ideal für kurze chronologische Abläufe ohne Titel oder Abschnitte.

timeline
  Vormittag : Teambesprechung
  Nachmittag : Entscheidung protokolliert

Beispiel zum Kopieren und Einfügen

Konferenz-Zeitstrahl mit mehreren Ereignissen

Mehrere Meilensteine unter demselben Monat mit Doppelpunkten trennen.

timeline
  title Community-Konferenz
  April : Call for Speakers : Veranstaltungsort bestaetigt
  Juni : Zeitplan veroeffentlicht : Anmeldung geoeffnet
  September : Konferenztag : Aufzeichnungen veroeffentlicht

Beispiel zum Kopieren und Einfügen

Vorfallanalyse mit Kommentaren

Kommentare bleiben im Code erhalten.

timeline
  title Vorfallanalyse
  Erkennung : Erhoehte Fehlerrate
            : Rufbereitschaft alarmiert
  Behebung : Fehlerhafte Version zurueckgerollt
           : Systemgesundheit bestaetigt

Beispiel zum Kopieren und Einfügen

Ausstellungsplanung mit Abschnitten

Abschnitte nutzen, um Vorbereitung von öffentlichen Meilensteinen zu trennen.

timeline
  title Galerie-Ausstellung
  section Kuratieren
  Jan : Kunstwerke auswaehlen : Vertraege schliessen
  section Aufbau
  Feb : Vitrinen bauen : Beleuchtung kalibrieren
  section Oeffentlich
  Mae : VIP-Eroeffnung : Einlass fuer alle

Beispiel zum Kopieren und Einfügen

Vertikale Rechenzentrumsmigration

TD nutzen, wenn eine lange Roadmap von oben nach unten besser lesbar ist.

timeline TD
  title Rechenzentrumsmigration
  section Vorbereitung
  Audit : Workloads inventarisieren
  Pilot : Internen Dienst migrieren : Rollback pruefen
  section Umstellung
  Wochenende 1 : Datenbanken migrieren : Replikate pruefen
  Wochenende 2 : Produktivverkehr umleiten : Altsysteme stilllegen

Beispiel zum Kopieren und Einfügen

Release-Historie mit Datumsangaben

Exakte Veröffentlichungsmonate übersichtlich dokumentieren.

timeline
  title Atlas CLI Versionshinweise
  2025 Okt : Version 0.8.0 : Offline-Cache eingefuehrt
  2026 Feb : Version 0.9.0 : Plugin-Hooks ergaenzt : Validierung optimiert
  2026 Jun : Version 1.0.0 : Stabile Befehls-API : Migrationsleitfaden veroeffentlicht

Beispiel zum Kopieren und Einfügen

Weltraumteleskop-Inbetriebnahme

Prüfen Sie, wie lange Beschreibungen im Diagramm umbrochen werden.

timeline
  title Teleskop-Inbetriebnahme
  Bereitschaftspruefung : Thermovakuum-Ergebnisse verifizieren
  Startfenster : Fahrzeugintegration abschliessen
  Erstes Licht : Primaere Instrumente kalibrieren

Häufig gestellte Fragen

Was ist ein Mermaid-Zeitstrahl?

Ein Mermaid-Zeitstrahl visualisiert chronologische Meilensteine, Release-Phasen oder historische Ereignisse.

Kann ich vertikale Zeitstrahlen erstellen?

Ja. Schalten Sie die Richtung einfach zwischen horizontal LR und vertikal TD um.

Wie füge ich mehrere Ereignisse hinzu?

Trennen Sie Ereignisse mit Doppelpunkten oder fügen Sie im Builder weitere Ereignisse hinzu.