📅 Mermaid

Diagramme de Gantt

Planifiez vos projets sur une frise claire

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

Un Gantt pose les tâches sur un calendrier avec durées, dépendances et jalons. C’est le standard de la gestion de projet pour montrer qui fait quoi, quand, et ce qui dépend de quoi.

Le diagramme de Gantt apparaît en comité de pilotage et dans les plans de release, quand l’audience veut des dates plutôt que de la logique. Écrit en texte, il gagne un avantage rare : le plan est relu dans la même pull request que le travail qu’il décrit. Sa faiblesse, c’est qu’il vieillit mal — un Gantt est un instantané d’intention, et rien dans Mermaid ne vous dira qu’il a cessé de correspondre à la réalité il y a trois semaines.

Exemple en direct

Code Mermaid
gantt
    title Product Launch
    dateFormat YYYY-MM-DD
    section Design
      Wireframes       :a1, 2026-01-05, 10d
      UI design        :a2, after a1, 14d
    section Build
      Backend API      :b1, 2026-01-12, 21d
      Frontend         :b2, after a2, 18d
    section Launch
      Beta testing     :c1, after b2, 10d
      Go live          :milestone, after c1, 0d
Exemple en direct
2026-01-112026-01-182026-01-252026-02-012026-02-082026-02-152026-02-22Wireframes Backend API UI design Frontend Beta testing Go live DesignBuildLaunchProduct Launch

Quand l’utiliser

Planifier lancements produit et calendriers de release
Communiquer les roadmaps aux parties prenantes
Suivre les phases de sprint ou de migration avec leurs dépendances

Erreurs fréquentes

dateFormat ne correspond pas aux dates

Avec dateFormat YYYY-MM-DD, une tâche qui démarre le 05/01/2026 n’est pas rejetée : elle est interprétée comme une autre date et le graphique s’étire silencieusement sur des mois. Accordez les deux, ou déclarez plutôt dateFormat DD/MM/YYYY.

Un deux-points dans le nom de tâche

Tout ce qui précède le premier deux-points est le libellé : Phase 1: discovery :a1, 2026-01-05, 7d affiche une tâche nommée « Phase 1 » et perd discrètement la suite du nom. Utilisez un tiret dans les noms de tâches.

Réutiliser un identifiant de tâche

Les identifiants doivent être uniques. Quand deux tâches partagent le même, after se résout sur la dernière déclaration : la tâche dépendante saute des semaines plus loin, sans la moindre erreur. Préfixez les identifiants par section — d1, b1, l1.

Syntaxe de base

.mmd
gantt
    dateFormat YYYY-MM-DD
    section Phase 1
      Task A :a1, 2026-01-01, 7d
      Task B :after a1, 5d
  • dateFormat YYYY-MM-DD axisFormat %d/%m

    dateFormat indique à Mermaid comment lire les dates que vous saisissez ; axisFormat contrôle leur affichage le long de l’axe. Les deux sont indépendants et diffèrent souvent.

  • Backend API :active, b1, 2026-01-12, 21d

    Une ligne de tâche s’écrit libellé, puis étiquettes, identifiant, début et durée. Les étiquettes sont done, active, crit et milestone ; le début peut être une date ou after b1.

  • excludes weekends todayMarker stroke-width:4px,stroke:#e11

    excludes retire du calendrier ouvré les week-ends ou des dates nommées. todayMarker restyle la ligne de la date du jour, et todayMarker off la masque complètement.

  • section Launch Go live :milestone, m1, after c1, 0d

    Les sections regroupent les tâches par chantier, chacune avec sa bande de couleur. Un jalon de durée nulle se dessine en losange plutôt qu’en barre.

Questions sur ce diagramme

Les tâches peuvent-elles dépendre les unes des autres ?

Oui — utilisez « after taskId » pour chaîner les tâches, et des jalons pour marquer les dates clés. Les sections regroupent les tâches par chantier ou par équipe.

Un Gantt textuel vaut-il mieux qu’un outil de gestion de projet ?

Pour la communication, oui : il vit dans vos docs, se versionne avec git et se met à jour en secondes. Pour la gestion des ressources, associez-le à votre outil de PM.

Comment partager un Gantt avec des personnes qui n’utilisent pas Mermaid ?

Exportez en PNG pour les diapositives et les e-mails, en SVG pour tout ce qui sera zoomé, ou publiez le diagramme en page publique et envoyez le lien — un lien continue d’afficher la version à jour après chaque mise à jour du plan.

Un Gantt Mermaid peut-il afficher des responsables ou un pourcentage d’avancement ?

Non. Il n’y a ni colonne de ressources ni barre de progression ; la seule information de statut, ce sont les étiquettes done, active et crit portées par une tâche. Gardez la planification de capacité dans votre outil de gestion de projet et servez-vous du graphique pour communiquer.

Mermaid trace-t-il des flèches entre tâches dépendantes ?

Non. Écrire after b1 fixe la date de début d’une tâche mais ne dessine aucune flèche de dépendance : le lien reste invisible pour le lecteur. Dites-le dans le nom de la tâche, ou passez au flowchart quand le graphe de dépendances est le message.

Comment marquer la date du jour sur le graphique ?

Mermaid trace par défaut un repère à la date courante, prise sur l’horloge de la machine qui rend le diagramme. todayMarker stroke-width:4px,stroke:#e11 le restyle, et todayMarker off le supprime — utile quand le graphique est un modèle réutilisable plutôt qu’un plan vivant.

Diagramme de Gantt ou un autre type de diagramme ?

Diagramme de Gantt ou frise chronologique ?

Le Gantt sert au travail qui n’a pas encore eu lieu : durées, dépendances, chemin critique. La frise chronologique sert aux événements qui ont une date mais pas de durée — releases, incidents, histoire de l’entreprise. Si rien dans votre liste n’a de longueur, prenez la frise.

Diagramme de Gantt ou flowchart ?

Les deux décrivent un plan. Le flowchart garde les embranchements — que se passe-t-il si l’audit échoue — et ignore le calendrier ; le Gantt garde le calendrier et aplatit toutes les branches en un seul chemin nominal. Le comité veut le Gantt, l’équipe a souvent besoin des deux.

Créez votre Diagramme de Gantt maintenant

Décrivez-le en langage naturel — l’IA écrit le code Mermaid pour vous.

Ouvrir Mermaid Studio