Guide de syntaxe du diagramme de timeline Mermaid.js

Qu’est-ce qu’un diagramme de timeline ?

Un Diagramme de timeline est un outil de visualisation chronologique utilisé pour cartographier des événements ou des jalons de projet le long d’un parcours temporel linéaire. Alors que les diagrammes de Gantt gèrent les dépendances et durées complexes des tâches, le diagramme de timeline se concentre sur le quand—offrant un récit clair et facile à lire de l’évolution d’un projet ou du cycle de libération d’un système.

Avec Mermaid.js, vous pouvez définir votre timeline à l’aide d’un format de texte simple et hiérarchique. Le moteur gère automatiquement l’espacement, le formatage des dates ou des étiquettes de période, ainsi que l’alignement des marqueurs d’événements le long de l’axe temporel central.

Guide de syntaxe de base

Pour concevoir une timeline valide et exécutable, vous devez définir la période de l’axe et associer des événements à des sections spécifiques.

1. Initialisation de la timeline

Vous initialisez la toile en utilisant le mot-clé timelinemot-clé. La structure est construite en définissant des sections (qui agissent comme des regroupements) et en associant des événements (ou des dates) à ces sections.

timeline
    titre Histoire du développement du système
    section 2025
        T1 : Lancement Alpha
    section 2026
        T2 : Libération Bêta

2. Ajout de détails aux événements

Vous pouvez ajouter plusieurs détails à un seul marqueur temporel en utilisant une liste séparée par des deux-points. Cela est utile pour résumer les résultats clés ou les numéros de version associés à une date ou une période spécifique.

timeline
    section T3 2026
        Libération : v1.0.0
                : Améliorations des performances
                : Correctifs de sécurité

Exemple réel de diagramme de timing Mermaid.js : Feuille de route de libération de produit

Ce schéma modélise une feuille de route produit sur plusieurs années, regroupant les libérations par année fiscale et mettant en évidence les livrables clés de chaque cycle.

timeline
    titre Roadmap produit 2026-2027
    section 2026
        T1 : Phase de découverte
           : Entretiens avec les parties prenantes
        T2 : Développement du MVP
           : Conception de l'API principale
        T3 : Lancement en version bêta
           : Boucles de retour des utilisateurs
    section 2027
        T1 : Lancement complet
           : Déploiement à l'échelle mondiale

Meilleures pratiques pour les chronologies

• Gardez les catégories concises : Utilisez section pour indiquer des regroupements de haut niveau (comme des années ou des phases majeures), en gardant les événements réels situés en dessous précis et actionnables.
• Format de date cohérent : Assurez-vous que vos événements de chronologie sont dans l’ordre chronologique dans le code, car le moteur Mermaid suit la séquence de votre script pour déterminer le positionnement du layout.
• Utilisez des détails pour le contexte : N’envahissez pas l’axe central avec trop de texte. Utilisez le format d’événement multiligne pour détailler « ce qui s’est passé » plutôt que de rendre l’étiquette de date elle-même trop longue.