Zeitstrahldiagramm

Über Zeitstrahlen

Ein Zeitstrahldiagramm ordnet Ereignisse entlang einer gemeinsamen Zeitachse an, sodass chronologische Beziehungen sofort sichtbar sind. Projektmanager nutzen sie zur Darstellung von Sprint-Zeitplänen und Meilensteinen; Historiker platzieren damit Entdeckungen in ihrem Kontext; Journalisten rekonstruieren damit Ereignisabfolgen; klinische Forscher kartieren damit Behandlungsverläufe. Die visuelle Form hat keinen einzigen übergeordneten Standard, aber die Konventionen sind universell: Zeit verläuft von links nach rechts, Ereignisse werden an ihren Daten markiert, und Zeitspannen zeigen die Dauer.

Schematex rendert Zeitstrahlen in drei visuellen Stilen – swimlane (Ereignisse wechseln sich oberhalb und unterhalb einer Achse ab), gantt (horizontale Dauer-Balken, nützlich für Projektplanung) und lollipop (Punkt-auf-Stab-Marker, nützlich für historische Rückblicke). Alle drei teilen dieselbe DSL; der style-Config-Schlüssel wechselt zwischen ihnen.

1. Ihr erster Zeitstrahl

Der kleinste nützliche Zeitstrahl: ein Titel, zwei gewöhnliche Ereignisse und ein Meilenstein.

Vier Regeln decken 80 % der Anwendungsfälle ab:

1. Beginnen Sie mit dem Schlüsselwort timeline, optional gefolgt von einem zitierten Titel.
2. Jedes Ereignis ist DATUM: "Label" – ein Datum, ein Doppelpunkt, dann ein Label in Anführungszeichen. Das Schlüsselwort milestone vor dem Label markiert das Ereignis als Meilenstein.
3. Datumsbereiche verwenden DATUM - DATUM: oder DATUM .. DATUM: (beide sind gleichwertig).
4. Fügen Sie [key: value]-Eigenschaften nach dem Label in Anführungszeichen hinzu, um Farbe, Seitenplatzierung, Form oder Kategorie festzulegen.

Kommentare müssen mit # oder // auf einer eigenen Zeile beginnen.

2. Ereignisse

Eine Ereigniszeile platziert einen beschrifteten Marker an einem Zeitpunkt (oder einen Balken über eine Zeitspanne).

2.1 Punktereignisse

2024-09-15: "Conference keynote"

2.2 Bereichsereignisse

2024-06-01 - 2024-08-31: "Q3 development sprint"
2024-06-01 .. 2024-08-31: "Q3 development sprint"

Beide Trennzeichen (- von Leerzeichen umgeben oder ..) sind gleichwertig.

2.3 Meilensteine

2024-09-01: milestone "Public launch"

Das Schlüsselwort milestone vor dem Label in Anführungszeichen wechselt den Marker zu einer Rautenform.

2.4 Ereigniseigenschaften

Eigenschaften gehen in [key: value, …] nach dem Label in Anführungszeichen, vor dem Zeilenumbruch.

2024-09-01: milestone "Launch day" [color: #E53935, side: above]
2024-07-15: "Beta ships" [icon: 🚀, category: "product"]

3. Datumsformate

Alle Datumsformate können überall verwendet werden, wo ein Datum erwartet wird – in Ereignissen, Epochen und Bereichen.

4. Epochen (Hintergrundspannen)

Eine era-Zeile zeichnet ein schattiertes Hintergrundband über die Zeitachse. Sie erfordert immer einen Datumsbereich.

era 2020 - 2022: "Foundation Phase"
era 2022 .. 2025: "Growth Phase" [color: #E8F5E9]

Die [color: …]-Eigenschaft ist optional. Sich überlappende Epochen werden automatisch in separate Bänder gestapelt.

5. Spuren (Swimlane-Gruppierung)

Ein track-Block gruppiert zusammenhängende Ereignisse in einen benannten Swimlane. Eingerückte Ereigniszeilen (2 Leerzeichen) gehören zur Spur.

track "Engineering":
  2024-01-15 - 2024-03-31: "API design"
  2024-04-01 - 2024-07-31: "Implementation"

track "Marketing":
  2024-06-01: "Campaign kick-off"
  2024-09-01: milestone "Launch campaign" [color: #1B5E20]

Spuren sind am nützlichsten im gantt-Stil, wo jede Spur zu einer eigenen beschrifteten Reihe wird.

6. Notes

Eine note:-Zeile, die unter einem Ereignis eingerückt ist, hängt eine Tooltip-Annotation daran an.

2024-06-01: "Beta launch"
  note: "First external users; NPS target 40+"

Notes funktionieren sowohl für flache Ereignisse als auch für Ereignisse innerhalb von Spuren.

7. Konfiguration

config:-Zeilen steuern Layout und visuellen Stil. Jede steht in der Form config: key = value auf einer eigenen Zeile.

Stil-Hinweise:

• swimlane – Ereignisse wechseln sich oberhalb und unterhalb einer horizontalen Achse ab; side: steuert die Platzierung pro Ereignis. Epochen fügen farbige Hintergrundbänder hinzu. Am besten für Roadmaps und Biografien.
• gantt – jede benannte Spur wird zu einer horizontalen Balken-Lane; Meilensteine werden als Pins über den Balken dargestellt. gantt-project ist ein Alias. Am besten für Projektplanung.
• lollipop – eine Mittelachse mit beschrifteten Karten auf abwechselnden Stielen. Am besten für historische Rückblicke mit spärlichen, einprägsamen Ereignissen.

Swimlane – Roadmaps, Produkt-Zeitstrahlen, Biografien. Epochen fügen Farbbänder hinzu; Ereignisse wechseln sich oben und unten ab.

Gantt – parallele Spuren mit horizontalen Dauer-Balken und Meilenstein-Pins. Am besten für Projektplanung.

Lollipop – spärliche Meilensteine auf einer zentrierten Achse mit abwechselnden Karten. Am besten für historische Rückblicke und Markengeschichten.

8. Beschriftungen & Kommentare

• Titel: timeline "My Title" – nur erste Zeile.
• Ereignis-Label: Zeichenkette in Anführungszeichen nach dem Doppelpunkt: DATUM: "Label".
• Meilenstein-Label: DATUM: milestone "Label".
• Epochen-Label: era DATUM - DATUM: "Label".
• Spurname: track "Name":.
• Note: note: "text" eingerückt unter einem Ereignis.
• Kommentare: # oder // am Anfang einer Zeile (nach führenden Leerzeichen).

9. Reservierte Wörter & Escaping

Am Zeilenanfang reserviert: timeline (Header), config:, era, track, note:.

Datumsbereich-Trennzeichen: - (Leerzeichen-Bindestrich-Leerzeichen) und .. – vermeiden Sie diese Zeichenfolgen in Label-Text, der vor dem Doppelpunkt steht.

Jahre v. Chr. als negative Ganzzahlen: -753 ist das Jahr 753 v. Chr. Der Parser unterscheidet das Minuszeichen vom Bereichstrennzeichen durch Überprüfung umgebender Leerzeichen – - (mit Leerzeichen) ist ein Bereich; -753 (kein führendes Leerzeichen nach einem Doppelpunkt) ist ein Jahr v. Chr.

Eigenschaftsblöcke: [key: value] muss nach dem Label in Anführungszeichen auf derselben Zeile erscheinen. Die schließende ] muss vorhanden sein; nicht geschlossene eckige Klammern verursachen einen Parse-Fehler.

10. Häufige Fehler

11. Grammatik (EBNF)

document     = header ( blank | comment | config | era | track | event )*

header       = "timeline" ( WS quoted-string )? NEWLINE
quoted-string = '"' any-char-but-quote* '"'

config       = "config:" WS key WS "=" WS value NEWLINE
key          = "style" | "orientation" | "scale" | "axis"

era          = "era" WS date-range ":" WS quoted-string ( WS props )? NEWLINE
track        = "track" WS quoted-string ":" NEWLINE
                 ( INDENT≥2 event | INDENT≥2 note )*

event        = date-spec ":" WS event-body ( WS props )? NEWLINE
               ( INDENT note )?
event-body   = ( "milestone" WS )? quoted-string
date-spec    = date ( ( " - " | ".." ) date )?

note         = "note:" WS quoted-string NEWLINE

props        = "[" prop-list "]"
prop-list    = prop ( "," prop )*
prop         = key ":" WS value
             | key ":" WS quoted-string

date         = iso-date | year-month | year | quarter | bc-year | geological
iso-date     = digit{4} "-" digit{2} "-" digit{2}
year-month   = digit{4} "-" digit{2}
year         = "-"? digit{1,5}
quarter      = digit{4} "-"? "Q" [1-4]
bc-year      = digit+ ( "BC" | "BCE" )
geological   = number ( "Ma" | "Ga" | "ka" )

comment      = ( "#" | "//" ) any NEWLINE

Maßgebliche Quelle: src/diagrams/timeline/parser.ts. Falls dies vom Parser abweicht, hat der Parser Vorrang – bitte öffnen Sie ein Issue.

12. Standardkonformität

Zeitstrahldiagramme haben keinen einzigen übergeordneten Standard. Schematex folgt etablierten Visualisierungskonventionen:

• Swimlane-Stil – adaptiert aus der horizontalen Zeitstrahl-Konvention der akademischen Geschichtswissenschaft und des Projektmanagements (PMI PMBOK).
• Gantt-Stil – folgt der von Henry Gantt (1910–1915) eingeführten Gantt-Diagramm-Form; das Balken-pro-Spur-Layout entspricht der ISO 21500-Projektplanungskonvention.
• Lollipop-Stil – folgt der Punkt-Plot / Stem-Plot-Konvention, die im Datenjournalismus und in der Infografik verbreitet ist.

Was heute implementiert ist:

• ✅ Drei visuelle Stile: swimlane, gantt, lollipop
• ✅ Horizontale und vertikale Ausrichtung
• ✅ Drei Skalierungsmodi: proportional, äquidistant, log
• ✅ Punktereignisse, Bereichsereignisse (Balken) und Meilenstein-Marker
• ✅ Epochen (Hintergrund-Schattierungsbänder)
• ✅ Benannte Spuren (Swimlane-Reihen)
• ✅ Ereignis-Notes
• ✅ Sechs Datumsformate: vollständiges Datum, Jahr-Monat, Jahr, Quartal, Jahr v. Chr., geologisch (Ma/Ga/ka)
• ✅ Ereigniseigenschaften: Farbe, Seite, Symbol, Form, Kategorie
• ⏳ Vertikales Orientierungs-Rendering (geparst, Layout noch nicht implementiert)
• ⏳ log-Skalierungs-Rendering (geparst, Layout wird heute als proportional behandelt)
• ⏳ Achsen-Tick-Labels mit benutzerdefinierten Formatzeichenketten
• ⏳ Ereignis-Konnektoren (Pfeile zwischen verwandten Ereignissen)

Referenzen:

• Gantt, H.L. (1910). Work, Wages, and Profits. Engineering Magazine.
• Tufte, E.R. (1983). The Visual Display of Quantitative Information. — Zeitstrahl als kleine Vielfache.

13. Roadmap

Geplant – noch nicht parsebar. Verwenden Sie diese heute nicht in generiertem DSL; der Parser wird sie ablehnen oder ignorieren.

• Ereignis-Konnektoren – connect ev1 -> ev2 [label: "causes"]-Pfeile, die zwei Ereignisse über die Zeit hinweg verbinden.
• Wiederholung / Rekurrenz – every 2024-Q1 .. 2024-Q4 monthly: "Sprint review" für regelmäßige Ereignisse.
• Achsen-Tick-Format – config: tickFormat = "%b %Y" für benutzerdefinierte Datumsanzeige auf der Achse.
• Vertikale Ausrichtung – config: orientation = vertical mit Ereignissen links/rechts einer vertikalen Achse (geparst; Rendering zurückgestellt).
• Log-Skala – config: scale = log für geologische oder tiefgeschichtliche Zeitspannen, die komprimierte jüngere Jahre benötigen (geparst; Layout zurückgestellt).

Verfolgen Sie die GitHub-Issues, wenn Sie eines davon früher benötigen.

Verwandte Beispiele

Sofort einsatzbereite Szenarien aus der Beispiel-Galerie: