Éditeur de diagramme de Gantt Mermaid
Un diagramme de Gantt pose le travail sur un calendrier : ce qui se déroule quand, ce qui se chevauche et ce qui ne peut pas commencer avant qu'autre chose soit fini. Prenez-en un quand les dates et les dépendances sont le sujet. Si vous n'avez besoin que de l'ordre et pas des dates, un organigramme est plus léger et ne pourrit pas dès que le planning glisse.
Un planning de livraison avec dépendances et un jalon
Ce qui fait de ceci un Gantt et non un dessin de barres, c'est `after a1` : la dépendance est déclarée, donc déplacer la première tâche entraîne tout ce qui suit. Le jalon marque une date fixe qui ne consomme pas de temps.
gantt
title Livraison 2.4
dateFormat DD/MM/YYYY
axisFormat %d %b
excludes weekends
section Développement
Contrat d'API :done, a1, 07/01/2026, 10d
Implémentation :active, a2, after a1, 20d
Recette interne : a3, after a2, 8d
section Mise en production
Période de rodage : b1, after a3, 5d
Comité de validation :milestone, m1, after b1, 0d
Déploiement :crit, b2, after m1, 3dExemples commentés
1. Le diagramme valide le plus simple
`dateFormat` indique à Mermaid comment LIRE les dates que vous écrivez ; `axisFormat` contrôle comment elles sont AFFICHÉES sur l'axe. Ce sont deux réglages différents, et les confondre est la frustration numéro un du Gantt.
gantt
title Sprint 14
dateFormat DD/MM/YYYY
section Travaux
Développer la recherche :02/03/2026, 10d2. Identifiants et dépendances
Donner un identifiant à une tâche permet aux suivantes d'écrire `after <id>`. Une fois les dépendances déclarées, vous changez une date de début à un seul endroit et le reste du planning suit.
gantt
title Migration de données
dateFormat DD/MM/YYYY
section Préparation
Audit du schéma :a1, 02/02/2026, 5d
Écrire les mappings :a2, after a1, 8d
section Exécution
Répétition générale :a3, after a2, 3d
Bascule :a4, after a3, 1d3. Les mots-clés d'état
`done`, `active` et `crit` changent la façon dont une barre est dessinée. C'est le moyen le moins coûteux de faire répondre le diagramme à « où en est-on » plutôt qu'au seul « quel était le plan ».
gantt
title Plateforme, premier trimestre
dateFormat DD/MM/YYYY
section Infrastructure
Nettoyage Terraform :done, t1, 05/01/2026, 12d
Montée de Kubernetes :active, t2, 19/01/2026, 15d
Revue des coûts : t3, after t2, 5d
section Sécurité
Audit des dépendances :crit, s1, 12/01/2026, 6d4. Les jalons
Un jalon est un point et non un intervalle : donnez-lui `0d`. Servez-vous-en pour les dates fixées par quelque chose d'extérieur au projet — un salon, une échéance contractuelle, un gel du code.
gantt
title Plan de lancement
dateFormat DD/MM/YYYY
section Ingénierie
Gel des fonctionnalités :milestone, m1, 01/04/2026, 0d
Chasse aux bogues : e1, 01/04/2026, 5d
Branche de livraison :milestone, m2, after e1, 0d
section Communication
Levée de l'embargo presse :milestone, m3, 15/04/2026, 0d5. Exclure les week-ends et les jours fériés
`excludes weekends` empêche les durées de compter samedi et dimanche : une tâche de 10 jours occupe alors deux semaines ouvrées au lieu de finir un dimanche. Les jours fériés s'excluent un par un, ce qui en France change beaucoup de choses au printemps.
gantt
title Mise en service d'un nouveau service
dateFormat DD/MM/YYYY
excludes weekends, 01/05/2026, 08/05/2026, 14/07/2026
section Mise en place
Provisionner l'infra :p1, 04/05/2026, 5d
Câbler la CI/CD :p2, after p1, 5d
section Transfert
Manuel et formation :p3, after p2, 4dRéférence de syntaxe du diagramme de Gantt
Des six types, le Gantt est le moins indulgent sur un point précis — la ligne de tâche — et le plus indulgent partout ailleurs. C'est précisément pour cela que tant d'erreurs de Gantt sont silencieuses.
| Syntaxe | Signification |
|---|---|
| gantt | Ouvre le diagramme. |
| title Texte | Titre du diagramme. |
| dateFormat DD/MM/YYYY | Comment ANALYSER les dates que vous écrivez. |
| dateFormat YYYY-MM-DD | Le format ISO, celui par défaut. |
| axisFormat %d %b | Comment AFFICHER les dates sur l'axe. Réglage distinct de dateFormat. |
| excludes weekends | Ignorer samedis et dimanches dans le calcul des durées. |
| excludes 01/05/2026 | Exclure une date précise. C'est ainsi qu'on sort les jours fériés. |
| section Nom | Regroupe des tâches dans une bande étiquetée. |
| Tâche :id, 01/01/2026, 10d | Tâche avec début et durée explicites. |
| Tâche :id, after autre, 10d | Tâche qui démarre à la fin de `autre`. |
| Tâche :done, id, ... | Terminée — dessinée en grisé. |
| Tâche :active, id, ... | En cours — dessinée en surbrillance. |
| Tâche :crit, id, ... | Critique — dessinée dans la couleur d'accent. |
| Nom :milestone, id, date, 0d | Un instant plutôt qu'un intervalle. |
| 10d / 3w / 2h | Durées en jours, semaines, heures. L'unité est obligatoire. |
Six pièges du Gantt — et un seul provoque une erreur
C'est ce qui distingue le Gantt des cinq autres types. Reproduit avec Mermaid 11.12.2 : exactement un des six ci-dessous empêche le diagramme de se dessiner. Les cinq autres produisent un planning parfaitement plausible et faux, ce qui est bien plus dangereux, car personne ne revérifie un diagramme qui s'est dessiné correctement.
Ce que vous voyez
Parse error, se terminant par : Expecting 'taskData', got 'NL'
Pourquoi
Une ligne de tâche sans deux-points. Les deux-points séparent le nom affiché de ses données, et sans eux il n'y a rien à analyser. C'est le seul piège de cette liste que Mermaid refuse franchement.
Correction
Mettez des deux-points entre le nom et l'identifiant.
gantt
dateFormat DD/MM/YYYY
section Travaux
Conception a1, 01/01/2026, 5dgantt
dateFormat DD/MM/YYYY
section Travaux
Conception :a1, 01/01/2026, 5dCe que vous voyez
Le nom d'une tâche est tronqué, et l'espace insécable n'y change rien
Pourquoi
Des deux-points dans le nom de la tâche. Les premiers deux-points font office de séparateur, donc tout ce qui suit est lu comme des données : `Phase 1 : conception` se dessine comme une tâche nommée seulement `Phase 1`, et le mot conception disparaît. C'est le piège proprement français, parce que la typographie exige justement une espace avant les deux-points et qu'on écrit donc naturellement cette forme. Vérifié : mettre l'espace fine insécable que réclame la typographie ne sauve rien du tout — le nom est tronqué exactement pareil.
Correction
Pas de deux-points dans un nom de tâche, quelle que soit l'espace qui précède. Utilisez un tiret demi-cadratin ou déplacez le détail dans le nom de section.
gantt
dateFormat DD/MM/YYYY
section S
Phase 1 : conception :a1, 01/01/2026, 10dgantt
dateFormat DD/MM/YYYY
section S
Phase 1 – conception :a1, 01/01/2026, 10dCe que vous voyez
Le diagramme se dessine, mais les dates tombent deux mois trop tôt
Pourquoi
Nous écrivons les dates 01/03/2026 pour le 1er mars, mais le `dateFormat` par défaut est `YYYY-MM-DD` et, devant une date à barres obliques, Mermaid l'interprète à l'américaine, le mois d'abord. Mesuré : `01/03/2026` avec `dateFormat YYYY-MM-DD` place la tâche au 3 janvier. Aucun avertissement ; le diagramme est superbe et décalé de deux mois.
Correction
Déclarez `dateFormat DD/MM/YYYY` et écrivez les dates comme vous les écrivez toujours. Vérifié : avec ce format déclaré, `01/03/2026` tombe bien au 1er mars.
gantt
dateFormat YYYY-MM-DD
section S
Conception :a1, 01/03/2026, 10dgantt
dateFormat DD/MM/YYYY
section S
Conception :a1, 01/03/2026, 10dCe que vous voyez
Le diagramme se dessine, mais l'axe couvre soudain plusieurs mois
Pourquoi
Un `after` qui pointe vers un identifiant inexistant — d'ordinaire une faute de frappe, ou un identifiant renommé. Mermaid ne prévient pas : il place la tâche à un point arbitraire, ce qui étire l'axe jusqu'à elle. Deux tâches de dix jours peuvent se retrouver sur un axe de huit mois.
Correction
Vérifiez que chaque `after <id>` correspond exactement à un identifiant déclaré. Un changement brusque d'échelle de l'axe est le signe.
gantt
dateFormat DD/MM/YYYY
section S
Conception :a1, 01/01/2026, 10d
Réalisation :a2, after conception, 10dgantt
dateFormat DD/MM/YYYY
section S
Conception :a1, 01/01/2026, 10d
Réalisation :a2, after a1, 10dCe que vous voyez
Une barre se réduit à rien
Pourquoi
Une durée sans unité. `5` ne vaut pas cinq jours : l'unité est obligatoire et sans elle la tâche ne reçoit aucune longueur exploitable. Le diagramme se dessine quand même, avec une tâche qui semble ne prendre aucun temps.
Correction
Écrivez toujours l'unité : `5d`, `3w`, `2h`.
gantt
dateFormat DD/MM/YYYY
section S
Conception :a1, 01/01/2026, 5gantt
dateFormat DD/MM/YYYY
section S
Conception :a1, 01/01/2026, 5dCe que vous voyez
Les durées sont justes mais les dates de fin ne collent pas à la réalité
Pourquoi
Il manque `excludes weekends`. Par défaut, une tâche de 10 jours vaut dix jours calendaires, week-ends compris : tout ce qui dépasse une semaine ouvrée finit donc plus tôt sur le diagramme que dans les faits. En France, avec les fériés de mai et le 14 juillet, l'écart sur un trimestre devient difficile à défendre en réunion.
Correction
Ajoutez `excludes weekends` près du début, puis les dates des jours fériés, sauf si le travail se fait vraiment sept jours sur sept.
gantt
dateFormat DD/MM/YYYY
section S
Migration :a1, 01/06/2026, 10dgantt
dateFormat DD/MM/YYYY
excludes weekends
section S
Migration :a1, 01/06/2026, 10dNotes sur le rendu
Mesuré sur le Mermaid 11.12.2 qu'utilise ce site. Le Gantt se comporte autrement que tous les autres types.
C'est le seul type dont la largeur de rendu est fixe
Tous les autres diagrammes de ce site grandissent dans la direction où grandit leur contenu. Un Gantt fait toujours 1264 pixels de large dans son viewBox, qu'il ait trois tâches ou quarante ; seule la hauteur change, mesurée entre environ 172 et 1060 pixels. L'axe est comprimé ou étiré pour tenir dans cette largeur fixe, et c'est pourquoi un planning sur deux ans et un planning sur deux semaines paraissent aussi denses. Si les barres sortent illisiblement fines, le problème est l'étendue des dates, pas le nombre de tâches.
Les deux-points l'emportent sur la typographie
À retenir si vous écrivez en français, parce que la règle typographique et la règle de syntaxe se contredisent frontalement. La typographie française demande une espace avant les deux-points ; la syntaxe du Gantt traite les premiers deux-points de la ligne comme un séparateur, quelle que soit l'espace qui précède. Vérifié avec l'espace ordinaire et avec l'espace fine insécable : dans les deux cas, `Phase 1 : conception` devient une tâche nommée `Phase 1`. Aucune ruse d'espacement ne contourne cela ; il faut renoncer aux deux-points dans les noms de tâches.
L'export PNG est exact au pixel près
Le Gantt dessine ses étiquettes en texte SVG simple plutôt qu'en HTML incorporé : contrairement aux organigrammes, aux diagrammes de classes, d'états et ER, il peut donc être rasterisé directement. Le PNG exporté correspond exactement à l'écran, sans redessin et sans décalage typographique.
C'est lui qui souffrait le plus du défaut d'export PNG
Comme Mermaid émet `width="100%"` sans hauteur, le navigateur résolvait la taille d'export contre une boîte par défaut de 300×150, et la proportion large et basse du Gantt rendait le résultat aussi mauvais que possible : un diagramme de 1280×148 s'exportait en PNG de 600×58. L'export lit désormais le viewBox et le même diagramme sort en 2560×296. Bon à savoir si vous avez d'anciens PNG de Gantt qui traînent : ils ne se laisseront pas agrandir.
La grammaire est permissive partout sauf sur les deux-points
Sections manquantes, mots-clés d'état inconnus, dates au mauvais format et durées sans unité : tout cela se dessine. Seule une ligne de tâche sans deux-points est rejetée. Cette asymétrie est la chose la plus utile à savoir sur l'écriture des diagrammes de Gantt : le fait qu'un diagramme se dessine ne dit presque rien de sa justesse.
Quand un autre diagramme convient mieux
Si les dates sont des suppositions, un Gantt les présentera avec une précision qu'elles n'ont pas méritée, et quelqu'un vous les opposera. Un organigramme montrant l'ordre sans les dates est plus honnête et ne demande aucun entretien quand le planning bouge.
Si le plan change chaque semaine, un Gantt en texte sous gestion de version est réellement bon — le diff montre ce qui a bougé —, mais un diagramme que personne ne met à jour est pire que pas de diagramme du tout. Soyez lucide sur celui des deux que vous êtes en train de fabriquer.
Et pour tout ce qui touche au lissage des charges, à la capacité ou à l'affectation par personne, l'outil est le mauvais. Mermaid dessine des barres sur un calendrier ; il ne sait pas qui fait le travail ni si cette personne est déjà prise.
Autres types de diagrammes
Écrit par Dominik Malsch · Dernière mise à jour: