Mermaid 11.15.0
Gantt représente des tâches datées, leurs durées et leurs dépendances. Préférez une frise pour raconter des événements ou une séquence pour les messages entre systèmes.
Créer avec l’outil Générateur de diagrammes de Gantt →Donnez un id stable à chaque tâche et utilisez after pour démarrer après une autre.
gantt
title Publication de la documentation
dateFormat YYYY-MM-DD
todayMarker off
section Préparation
Plan :done, outline, 2026-10-05, 2d
Révision :active, review, after outline, 3d
Publier :milestone, publish, after review, 0dChargement…
| Syntaxe | Signification |
|---|---|
| gantt / title / section | Déclare le diagramme, son titre et ses groupes de tâches. |
| dateFormat YYYY-MM-DD / axisFormat %d %b | dateFormat utilise les jetons Day.js ; axisFormat ceux de D3. |
| tickInterval 1week / weekday monday | Définit l’intervalle et le premier jour des graduations hebdomadaires. |
| weekend friday / excludes weekends, 2026-10-12 | Choisit le week-end ; les jours exclus prolongent les tâches définies par une durée. |
| includes 2026-10-10 | Une date incluse annule une exclusion ; utilisez des dates plutôt que des noms de jours. |
| inclusiveEndDates | Inclut la date de fin donnée explicitement. |
| todayMarker off / todayMarker stroke:#0070f3,stroke-width:2px | Masque ou personnalise la ligne de la date actuelle. |
| Task :id, start, end / Task :id, start, 2d | Sépare le libellé par deux-points et les métadonnées par des virgules. |
| after a b / until c d | after attend la dernière fin ; until s’arrête au premier début des ids référencés. |
| 500ms / 30s / 30m / 4h / 3d / 2w / 1M / 1y | La casse compte : m indique les minutes, M les mois ; les décimales sont acceptées. |
| done / active / crit / milestone / vert | Les tags précèdent l’id ; milestone marque un instant et vert ne prend pas de ligne. |
| click id href "https://example.com" / click id call callback() | Liens et callbacks dépendent de l’hôte ; la sécurité stricte désactive l’interaction. |
| topAxis / config.gantt.topAxis / config.gantt.displayMode: compact | Affiche l’axe supérieur et partage des lignes entre tâches sans chevauchement. |
| %% / accTitle: / accDescr: | Commentaires et descriptions accessibles. |
Les exclusions prolongent une durée sans couper la barre. includes rétablit des dates précises. Les fins explicites restent fixes ; inclusiveEndDates compte leur dernier jour.
gantt
dateFormat YYYY-MM-DD
axisFormat %d %b
tickInterval 1week
weekday monday
excludes weekends, 2026-10-12
includes 2026-10-10
todayMarker off
section Rédaction
Manuel :handbook, 2026-10-09, 4d
Correction :proof, after handbook, 2dChargement…
Référencez les ids, pas les libellés. Plusieurs ids after attendent la dernière fin ; until prend le premier début. Évitez les références absentes et les cycles.
gantt
dateFormat YYYY-MM-DD
todayMarker off
section Publication
Validation finale :milestone, signoff, 2026-10-15, 0d
Édition :edit, 2026-10-05, until signoff
Tests :test, 2026-10-07, 3d
Paquet :package, after edit test, 1dChargement…
Combinez crit avec done ou active. Un jalon de durée nulle se place au début ; sinon, à mi-durée. vert traverse le graphique sans ligne propre.
gantt
dateFormat YYYY-MM-DD
todayMarker off
section Livraison
Brouillon :done, draft, 2026-10-05, 2d
Valider :crit, active, validate, after draft, 3d
Échéance :vert, deadline, 2026-10-09, 0d
Approbation :milestone, approval, after validate, 0dChargement…
click associe une URL ou un callback. Ce site utilise la sécurité stricte et désactive les actions dans le diagramme ; gardez cette protection pour du code non fiable.
gantt
dateFormat YYYY-MM-DD
todayMarker off
section Notes
Lire le guide :guide, 2026-10-05, 2d
click guide href "https://themarkdowner.com"Chargement…
Placez la configuration YAML avant gantt. compact partage des lignes si possible, sans allouer de ressources. L’ancienne directive %%{init: ...}%% reste prise en charge.
---
config:
gantt:
displayMode: compact
topAxis: true
---
gantt
dateFormat YYYY-MM-DD
todayMarker off
section Tâches
Premier passage :first, 2026-10-05, 2d
Second passage :second, after first, 2dChargement…
YYYY-MM-DD appartient à dateFormat, %d %b à axisFormat ; modifier l’axe ne change pas la lecture des dates.
Une unité incorrecte peut donner une durée nulle sans avertissement ; vérifiez le résultat.
dates n’existe pas. Utilisez dateFormat sur sa propre ligne.
Syntaxe incorrecte : correction ci-dessous
gantt
dates YYYY-MM-DDgantt
dateFormat YYYY-MM-DD
todayMarker off
section Contrôle
Vérifier :check, 2026-10-05, 1dChargement…