Timeline diagram

À propos des diagrammes de chronologie

Un diagramme de chronologie dispose les événements le long d'un axe temporel commun afin que les relations chronologiques soient immédiatement visibles. Les chefs de projet les utilisent pour présenter les plannings de sprints et les jalons ; les historiens les utilisent pour contextualiser les découvertes ; les journalistes les utilisent pour reconstituer des séquences d'événements ; les chercheurs cliniques les utilisent pour cartographier les parcours de traitement. La forme visuelle n'a pas de norme de gouvernance unique, mais les conventions sont universelles : le temps s'écoule de gauche à droite, les événements sont marqués à leurs dates, et les plages indiquent la durée.

Schematex restitue les chronologies en trois styles visuels — swimlane (événements répartis au-dessus et en dessous d'un axe), gantt (barres de durée horizontales, utile pour la planification de projets) et lollipop (marqueurs en forme de sucette, utile pour les rétrospectives historiques). Les trois partagent le même DSL ; la clé de configuration style permet de basculer entre eux.

1. Votre première chronologie

La chronologie utile la plus simple : un titre, deux événements ordinaires et un jalon.

Quatre règles couvrent 80 % des usages :

1. Commencez par le mot-clé timeline, suivi éventuellement d'un titre entre guillemets.
2. Chaque événement est DATE: "Étiquette" — une date, un deux-points, puis une étiquette entre guillemets. Le mot-clé milestone avant l'étiquette marque l'événement comme un jalon.
3. Les plages de dates utilisent DATE - DATE: ou DATE .. DATE: (les deux sont équivalents).
4. Ajoutez des propriétés [clé: valeur] après l'étiquette entre guillemets pour définir la couleur, le placement, la forme ou la catégorie.

Les commentaires doivent commencer par # ou // sur leur propre ligne.

2. Événements

Une ligne d'événement place un marqueur étiqueté à un moment précis (ou une barre sur une plage).

2.1 Événements ponctuels

2024-09-15: "Conference keynote"

2.2 Événements de plage

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

Les deux séparateurs (- entouré d'espaces, ou ..) sont équivalents.

2.3 Jalons

2024-09-01: milestone "Public launch"

Le mot-clé milestone avant l'étiquette entre guillemets change le marqueur en forme de losange.

2.4 Propriétés des événements

Les propriétés vont dans [clé: valeur, …] après l'étiquette entre guillemets, avant le saut de ligne.

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

3. Formats de date

Tous les formats de date peuvent apparaître partout où une date est attendue — dans les événements, les ères et les plages.

4. Ères (plages d'arrière-plan)

Une ligne era dessine une bande d'arrière-plan ombrée sur l'axe temporel. Elle nécessite toujours une plage de dates.

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

La propriété [color: …] est optionnelle. Les ères qui se chevauchent s'empilent automatiquement en bandes séparées.

5. Pistes (regroupement en swimlane)

Un bloc track regroupe les événements connexes dans une swimlane nommée. Les lignes d'événement indentées (2 espaces) appartiennent à la piste.

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]

Les pistes sont les plus utiles dans le style gantt, où chaque piste devient son propre couloir étiqueté.

6. Notes

Une ligne note: indentée sous un événement lui attache une annotation de type info-bulle.

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

Les notes fonctionnent aussi bien pour les événements plats que pour les événements à l'intérieur des pistes.

7. Configuration

Les lignes config: ajustent la mise en page et le style visuel. Chacune est sur sa propre ligne sous la forme config: clé = valeur.

Notes sur les styles :

• swimlane — les événements alternent au-dessus et en dessous d'un axe horizontal ; side: contrôle le placement par événement. Les ères ajoutent des bandes d'arrière-plan colorées. Convient aux feuilles de route et aux biographies.
• gantt — chaque piste nommée devient un couloir de barres horizontales ; les jalons deviennent des épingles au-dessus des barres. gantt-project est un alias. Convient à la planification de projets.
• lollipop — un axe central avec des cartes étiquetées sur des tiges alternées. Convient aux rétrospectives historiques avec des événements rares et mémorables.

Swimlane — feuilles de route, chronologies de produit, biographies. Les ères ajoutent des bandes de couleur ; les événements alternent au-dessus et en dessous.

Gantt — pistes parallèles avec barres de durée horizontales et épingles de jalons. Convient à la planification de projets.

Lollipop — jalons rares sur un axe central avec des cartes alternées. Convient aux rétrospectives historiques et aux récits de marque.

8. Étiquettes et commentaires

• Titre : timeline "My Title" — première ligne uniquement.
• Étiquette d'événement : chaîne entre guillemets après le deux-points : DATE: "Étiquette".
• Étiquette de jalon : DATE: milestone "Étiquette".
• Étiquette d'ère : era DATE - DATE: "Étiquette".
• Nom de piste : track "Nom":.
• Note : note: "texte" indenté sous un événement.
• Commentaires : # ou // en début de ligne (après les espaces initiaux).

9. Mots réservés et échappement

Réservés en début de ligne : timeline (en-tête), config:, era, track, note:.

Séparateurs de plage de dates : - (espace-tiret-espace) et .. — évitez ces séquences dans le texte d'étiquette qui apparaît avant le deux-points.

Années av. J.-C. comme entiers négatifs : -753 est l'année 753 av. J.-C. Le parseur distingue le signe négatif d'un séparateur de plage en vérifiant les espaces environnants — - (avec espaces) est une plage ; -753 (sans espace avant après un deux-points) est une année av. J.-C.

Blocs de propriétés : [clé: valeur] doit apparaître après l'étiquette entre guillemets sur la même ligne. Le ] fermant doit être présent ; les crochets non fermés produisent une erreur d'analyse.

10. Erreurs courantes

11. Grammaire (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

Source faisant autorité : src/diagrams/timeline/parser.ts. En cas de divergence avec le parseur, le parseur a la priorité — veuillez ouvrir un ticket.

12. Conformité aux normes

Les diagrammes de chronologie n'ont pas de norme de gouvernance unique. Schematex suit les conventions de visualisation établies :

• Style swimlane — adapté de la convention de chronologie horizontale utilisée en historiographie académique et en gestion de projet (PMI PMBOK).
• Style gantt — suit la forme du diagramme de Gantt introduite par Henry Gantt (1910–1915) ; la mise en page barre-par-piste correspond à la convention de planification de projet ISO 21500.
• Style lollipop — suit la convention de graphique à points / à tiges courante dans le journalisme de données et l'infographie.

Ce qui est implémenté aujourd'hui :

• ✅ Trois styles visuels : swimlane, gantt, lollipop
• ✅ Orientation horizontale et verticale
• ✅ Trois modes d'échelle : proportionnel, équidistant, log
• ✅ Événements ponctuels, événements de plage (barres) et marqueurs de jalons
• ✅ Ères (bandes d'ombrage d'arrière-plan)
• ✅ Pistes nommées (couloirs de swimlane)
• ✅ Notes d'événement
• ✅ Six formats de date : date complète, année-mois, année, trimestre, année av. J.-C., géologique (Ma/Ga/ka)
• ✅ Propriétés d'événement : couleur, côté, icône, forme, catégorie
• ⏳ Rendu de l'orientation verticale (analysé, mise en page non encore implémentée)
• ⏳ Rendu de l'échelle log (analysé, la mise en page traite comme proportionnel aujourd'hui)
• ⏳ Étiquettes de graduation de l'axe avec des chaînes de format personnalisées
• ⏳ Connecteurs d'événements (flèches entre événements liés)

Références :

• Gantt, H.L. (1910). Work, Wages, and Profits. Engineering Magazine.
• Tufte, E.R. (1983). The Visual Display of Quantitative Information. — Chronologie comme petits multiples.

13. Feuille de route

Prévu — pas encore analysable. N'utilisez pas ces éléments dans le DSL généré aujourd'hui ; le parseur les rejettera ou les ignorera.

• Connecteurs d'événements — connect ev1 -> ev2 [label: "causes"] flèches reliant deux événements dans le temps.
• Répétition / récurrence — every 2024-Q1 .. 2024-Q4 monthly: "Sprint review" pour les événements réguliers.
• Format de graduation de l'axe — config: tickFormat = "%b %Y" pour un affichage de date personnalisé sur l'axe.
• Orientation verticale — config: orientation = vertical avec des événements à gauche/droite d'un axe vertical (analysé ; rendu différé).
• Échelle logarithmique — config: scale = log pour les plages géologiques ou de grande profondeur historique qui nécessitent de comprimer les années récentes (analysé ; mise en page différée).

Suivez les tickets GitHub si vous avez besoin de l'une de ces fonctionnalités plus tôt.

Exemples associés

Scénarios prêts à l'emploi depuis la galerie d'exemples :