Passer au contenu principal

Mermaid 11.15.0

Aide-mémoire des frises chronologiques Mermaid

Une frise groupe des événements sous des périodes ordonnées. Utilisez Gantt pour dates, durées et dépendances : les périodes sont des libellés, pas un calendrier à l’échelle.

Créer avec l’outil Générateur de chronologies Mermaid →

Démarrage rapide

Séparez période et événement par deux-points ; chaque séparateur supplémentaire ajoute un événement.

Mermaid
Ouvrir dans l’éditeur → 
timeline
  title Cycle de documentation
  Brouillon : Plan convenu
  Révision : Commentaires reçus : Modifications approuvées
  Publication : Guide publié

Chargement…

Référence de syntaxe

Référence de syntaxe
SyntaxeSignification
timeline / title TextDéclare la frise et son titre facultatif.
section TextGroupe les périodes suivantes dans une section.
Period : Event : Another eventAjoute plusieurs événements séparés par deux-points.
: Another eventContinue la période précédente avec un événement.
<br>Ajoute un saut dans un libellé.
config.timeline.disableMulticolorDésactive les couleurs alternées pour les périodes sans sections.
theme: base / themeVariables.cScale0…cScale11Personnalise les fonds avec cScale et le texte avec cScaleLabel sous theme base.
%% / accTitle: / accDescr:Commentaires et descriptions accessibles.

Périodes et événements

Les périodes ne sont pas forcément des dates. Les événements après des séparateurs supplémentaires restent dans la même période ; le code fixe l’ordre.

Mermaid
Ouvrir dans l’éditeur → 
timeline
  title Notation de révision
  Passage 1 : Structure vérifiée
         : Références vérifiées
  Passage 2 : Rédaction vérifiée : Liens vérifiés

Chargement…

Sections et sauts de ligne

section s’applique jusqu’à la prochaine section. Gardez des libellés courts et utilisez <br> pour un saut explicite.

Mermaid
Ouvrir dans l’éditeur → 
timeline
  title Étapes éditoriales
  section Préparation
    Révision<br>du plan : Périmètre défini
  section Livraison
    Révision<br>finale : Corrections intégrées
    Publication : Lecteurs informés

Chargement…

Périodes d’une seule couleur

disableMulticolor évite l’alternance sans sections. Il n’ajoute ni échelle temporelle ni relations.

Mermaid
Ouvrir dans l’éditeur → 
---
config:
  timeline:
    disableMulticolor: true
---
timeline
  title Étapes d’approbation
  Brouillon : Soumis
  Révision : Accepté
  Publication : Archivé

Chargement…

Couleurs de section

Utilisez theme base avec cScale0…cScale11 et cScaleLabel0…cScaleLabel11. Gardez un bon contraste ; les couleurs se répètent après la fin de la palette.

Mermaid
Ouvrir dans l’éditeur → 
---
config:
  theme: base
  themeVariables:
    cScale0: "#d3e5ff"
    cScaleLabel0: "#171717"
    cScale1: "#f5f5f5"
    cScaleLabel1: "#171717"
---
timeline
  title Révision en deux étapes
  section Rédaction
    Plan : Prêt
  section Publication
    Guide : Disponible

Chargement…

Erreurs fréquentes

Laisser un événement vide

Chaque séparateur exige un événement. Une période sans séparateur est valide, mais ne contient aucun événement.

Syntaxe incorrecte : correction ci-dessous

timeline
  :

Attendre des distances proportionnelles

Année et mois sont seulement des textes ; choisissez Gantt pour des intervalles proportionnels.

Limites

  • Les périodes sont des catégories ordonnées, sans espacement temporel proportionnel.
  • Pas de durées, dépendances ou coordonnées par événement.
  • De nombreux libellés longs nuisent à la lecture.

Foire aux questions

Une période peut-elle avoir plusieurs événements ?
Oui : ajoutez des séparateurs ou une ligne de continuation commençant par deux-points.
Comment changer les couleurs ?
Configurez theme base et les variables cScale et cScaleLabel dans le frontmatter.
Quand préférer Gantt ?
Gantt convient aux intervalles réels, durées et dépendances ; timeline à une courte narration.