Guide de syntaxe des diagrammes Gantt de Mermaid.js

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

Un diagramme de Ganttest un outil de visualisation de gestion de projet utilisé pour représenter les calendriers de projet, les durées des tâches et les jalons de chemin critique le long d’une timeline horizontale. En représentant les paquets de travail sous forme de barres et les dépendances structurelles sous forme de flux séquentiels, il permet aux équipes de suivre les progrès, d’identifier les goulets d’étranglement potentiels et de communiquer efficacement les délais.

Avec Mermaid.js, vous définissez votre calendrier de projet à l’aide d’une syntaxe déclarative basée sur le texte. Le moteur calcule automatiquement les décalages relatifs des barres, gère l’échelle de l’axe de grille basée sur les dates et affiche les pourcentages de progression, vous permettant ainsi de générer des cartes de projet professionnelles directement dans votre documentation.

Guide de syntaxe principale : éléments et constructions

Pour concevoir un calendrier de projet valide et entièrement exécutable dans Mermaid, vous devez maîtriser la configuration de la timeline, les déclarations de tâches, le regroupement des sections et les marqueurs de jalons.

1. Initialisation de la timeline du diagramme de Gantt

Vous initialisez une toile de diagramme de Gantt à la première ligne en utilisant le mot-clé ganttmot-clé. Chaque diagramme de Gantt nécessite un titre, une définition du format de date et une date de départ spécifique pour ancrer la grille de la timeline.

gantt
    titre Calendrier du Projet Alpha
    dateFormat AAAA-MM-JJ
    axisFormat %AAAA-%MM-%JJ
    exclure les week-ends

2. Définition des tâches et des durées

Les tâches sont définies par leur statut (actif, terminé ou crit), une étiquette d’affichage, un identifiant interne et une durée temporelle. Vous pouvez spécifier une durée en utilisant des jours (j), des heures (h), ou des dates de début/fin spécifiques.

• terminé: Paquet de travail terminé.
• actif: Travail en cours actuel.
• crit: Tâche du chemin critique (affichée avec une couleur de surbrillance distincte).

gantt
    section Planification
    Découverte initiale :terminé, des1, 2026-06-01, 5j
    Collecte des exigences :actif, des2, après des1, 7j

3. Mise en œuvre des jalons et des dépendances

Les jalons sont des points de durée nulle qui marquent des réalisations importantes du projet. Les dépendances sont établies à l’aide de l’identifiant de tâche, ce qui garantit que les barres visuelles s’alignent correctement lorsque la tâche prédécesseur est terminée.

gantt
    section Lancement
    Lancement bêta :jalon, m1, 2026-07-15, 0j
    QA finale :crit, qa1, après m1, 10j

Meilleures pratiques pour les plannings de projet

• Utilisez des noms de sections descriptifs : Utilisez le mot-clé section pour regrouper vos tâches en phases logiques du projet (par exemple, Développement, Tests, Déploiement). Cela crée une grille segmentée verticalement, bien plus facile à lire qu’une longue liste unique.
• Utilisez le mot-clé « après » : Au lieu de calculer manuellement les dates, utilisez la syntaxe après [id_tâche] Cette syntaxe garantit que si la date de début du projet change, toute votre chronologie se met à jour automatiquement sans édition manuelle.
• Excluez les jours non ouvrés : Si votre projet suit une semaine de travail standard, incluez la directive exclut les week-ends Cette directive maintient votre chronologie réaliste et évite des prévisions irréalistes de travail pendant les week-ends.

Exemples réels de diagrammes Gantt Mermaid

Exemple 1 : Feuille de route de migration de l’infrastructure logicielle

Ce plan fonctionnel modélise un projet de migration cloud en plusieurs étapes, en utilisant des sections pour séparer la planification de l’architecture de l’implémentation et des tests.

gantt
    titre Migration de l'infrastructure cloud
    dateFormat AAAA-MM-JJ
    axisFormat %m-%j
    exclut les week-ends

    section Architecture
    Conception cloud   :terminé, a1, 2026-06-01, 10j
    Audit sécurité :en cours, a2, après a1, 5j

    section Migration
    Transfert de données  :crit, m1, après a2, 15j
    Réimplémentation de l'application :m2, après m1, 8j

    section Jalons
    Mise en production :jalon, m3, après m2, 0j

Analyse de la syntaxe : Ce diagramme sépare clairement la planification, l’exécution et les jalons du projet. En marquant la tâche « Transfert de données » comme crit, elle reçoit une mise en évidence distincte, attirant l’attention du spectateur sur la phase la plus à risque de la migration.