Diagramme de Gantt
Le diagramme de Gantt est un type de diagramme à barres utilisé pour présenter l'avancement d'un projet et le temps nécessaire à son achèvement. Le diagramme de Gantt montre le nombre de jours entre les dates de début et de fin des éléments terminaux et des éléments récapitulatifs d'un projet.
Remarques
Le diagramme de Gantt enregistre chaque tâche planifiée sous la forme d'une barre continue s'étendant de gauche à droite. L'axe des x représente le temps, et l'axe des y enregistre les différentes tâches ainsi que leur ordre d'achèvement.
Plus important encore, lorsqu'une date, un nombre de jours ou un ensemble de dates spécifiques d'une tâche est exclu, le diagramme de Gantt s'adapte à ces changements en prolongeant vers la droite du même nombre de jours, plutôt que de créer un vide à l'intérieur de la tâche .
Copier
Intégrer
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes 2026-03-16,2026-03-18,2026-03-19
section Section
A task :a1, 2026-03-07, 7d
Another task :after a1, 5d
Toutefois, si les dates exclues se situent entre deux tâches consécutives commencées, les dates exclues sont ignorées sur le diagramme et laissées vides, puis la tâche commence après la fin des dates exclues. Comme indiqué ci-dessous :
Copier
Intégrer
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes Sunday, Friday, Saturday
section Section
A task :a1, 2026-03-07, 5d
Another task :after a1, 7d
Le diagramme de Gantt est utile pour suivre le temps nécessaire à l'achèvement d'un projet, mais avec quelques ajustements, il peut aussi servir à représenter graphiquement les « jours non ouvrés ».
Syntaxe
Copier
Intégrer
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2026-01-06,2026-01-08
Active task :active, des2, 2026-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2026-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2026-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
Par défaut, les tâches sont consécutives : la date de début de la tâche suivante est par défaut la date de fin de la tâche précédente.
Le titre de la tâche et ses métadonnées sont séparés par un deux-points (:) , et les éléments de métadonnées sont séparés par des virgules (,) . Les étiquettes valides comprennent active, done, crit et milestone. Les étiquettes sont facultatives, mais si elles sont utilisées, elles doivent être placées en premier. Une fois les étiquettes traitées, les éléments de métadonnées restants sont interprétés comme suit :
- Si un seul élément est spécifié, il détermine quand la tâche se termine. Il peut s'agir d'une date ou d'une heure précise, ou d'une durée. Si une durée est spécifiée, elle est ajoutée à la date de début de la tâche pour déterminer sa date de fin, en tenant compte des éventuelles exclusions.
- Si deux éléments sont spécifiés, le second élément est interprété de la même manière que dans le cas précédent. Le premier élément peut spécifier une date ou une heure de début explicite (au format indiqué par dateFormat), ou bien référencer une autre tâche à l'aide de after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] . Dans ce dernier cas, la date de début de la tâche sera fixée en fonction de la date de fin la plus tardive des tâches référencées.
- Si trois éléments sont spécifiés, les deux derniers éléments sont interprétés comme dans le cas précédent. Le premier élément indique l'ID de la tâche, qui peut être référencé à l'aide de la syntaxe later <taskID> .
| Syntaxe des métadonnées | Date de début | Date de fin | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate interprété à l'aide de dateformat | endDate interprété à l'aide de dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate interprété à l'aide de dateformat | date de début + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Date de fin de la tâche otherTaskID spécifiée précédemment | endDate interprété à l'aide de dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Date de fin de la tâche otherTaskID spécifiée précédemment | date de début + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate interprété à l'aide de dateformat | Date de début de la tâche otherTaskID spécifiée précédemment | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Date de fin de la tâche otherTaskID spécifiée précédemment | Date de début de la tâche otherTaskID spécifiée précédemment | taskID |
| <startDate>, <endDate> | startdate interprété à l'aide de dateformat | 使用 dateformat 解释的 enddate | Non applicable |
| <startDate>, <length> | startdate interprété à l'aide de dateformat | date de début + length | Non applicable |
| after <otherTaskID>, <endDate> | Date de fin de la tâche otherTaskID spécifiée précédemment | 使用 dateformat 解释的 enddate | Non applicable |
| after <otherTaskID>, <length> | Date de fin de la tâche otherTaskID spécifiée précédemment | date de début + length | Non applicable |
| <startDate>, until <otherTaskId> | startdate interprété à l'aide de dateformat | Date de début de la tâche otherTaskID spécifiée précédemment | Non applicable |
| after <otherTaskId>, until <otherTaskId> | Date de fin de la tâche otherTaskID spécifiée précédemment | Date de début de la tâche otherTaskID spécifiée précédemment | Non applicable |
| <endDate> | Date de fin de la tâche précédente | 使用 dateformat 解释的 enddate | Non applicable |
| <length> | Date de fin de la tâche précédente | date de début + length | Non applicable |
| until <otherTaskId> | Date de fin de la tâche précédente | Date de début de la tâche otherTaskID spécifiée précédemment | Non applicable |
Format de durée
Lors de la spécification de <length> , utilisez un nombre suivi de l'un des suffixes d'unité suivants :
| Unité | Suffixe | Exemple |
|---|---|---|
| Milliseconde | ms | 50ms |
| Seconde | s | 30s |
| Minute | m | 30m |
| Heure | h | 4h |
| Jour | d | 7d |
| Semaine | w | 3w |
| Mois | m | 2m |
| Année | y | 1y |
Les valeurs décimales sont également prises en charge (par exemple, 2.5d). Les marqueurs de durée non valides (par exemple, 3dX) sont ignorés, et la tâche aura par défaut une durée nulle.
Par souci de simplicité, le tableau ne montre pas plusieurs tâches listées à l'aide de la syntaxe after. Voici un exemple :
Copier
Intégrer
gantt
apple :a, 2026-07-20, 1w
banana :crit, b, 2026-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2026-07-20, until b c
Titre
title est une chaîne de caractères facultative, affichée en haut du diagramme de Gantt, servant à décrire l'ensemble du diagramme.
Exclusion
excludes est une propriété facultative qui accepte des dates spécifiques (au format YYYY-MM-DD), un jour de la semaine (par exemple "sunday") ou "weekends", mais le mot "weekdays" ne peut pas être utilisé. Ces dates seront marquées sur le diagramme et exclues du calcul de la durée des tâches. Cela signifie que si la période d'une tâche comprend une date exclue, les jours exclus seront ajoutés à la date de fin de la tâche, afin que la durée de la tâche corresponde à celle indiquée dans le code.
Week-end
Pour exclure le week-end, vous pouvez définir le week-end comme vendredi et samedi, ou comme samedi et dimanche. Par défaut, le week-end correspond au samedi et au dimanche. Pour définir le jour de début du week-end, vous pouvez ajouter sur une nouvelle ligne une propriété facultative weekend, suivie de friday ou saturday.
Copier
Intégrer
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat Букмекерлар-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2026-01-01, 30d
Another task :after a1, 20d
Déclaration de section
Vous pouvez diviser le diagramme en plusieurs sections pour séparer les différentes parties du projet (par exemple le développement et la documentation).
Pour cela, utilisez la syntaxe section en début de ligne et donnez-lui un nom. Veuillez noter que, contrairement au titre de l'ensemble du diagramme, ce nom est obligatoire.
Jalon
Vous pouvez ajouter des jalons au diagramme. Les jalons diffèrent des tâches car ils représentent un instant précis et sont identifiés par la syntaxe milestone. Voici un exemple d'utilisation d'un jalon : la position exacte du jalon est déterminée par sa date de début et la durée de la tâche, comme indiqué ci-dessous :
Copier
Intégrer
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49, 2m
Task A : 10m
Task B : 5m
Final milestone : milestone, m2, 18:08, 4m
Marqueur vertical
vert indique l'ajout d'une ligne verticale dans le diagramme de Gantt, afin de mettre facilement en surbrillance des dates importantes, telles que des échéances, des événements importants ou des points de contrôle. Ces marqueurs s'étendent sur tout le diagramme et sont positionnés en fonction de la date que vous fournissez. Contrairement aux jalons, les marqueurs verticaux n'occupent pas de ligne. Ce sont de purs points de référence visuels, qui aident à découper la chronologie et rendent les moments importants plus faciles à repérer.
Copier
Intégrer
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m
Définir la date
dateFormat définit le format de saisie des dates des éléments du diagramme de Gantt, et axisFormat définit le format de sortie des dates lors du rendu du diagramme.
Format de date d'entrée
Le format de date d'entrée par défaut est YYYY-MM-DD ; vous pouvez personnaliser dateFormat.
Copier
Intégrer
dateFormat YYYY-MM-DD
Les options de format suivantes sont prises en charge :
| 输入 | Exemple | Description |
|---|---|---|
| YYYY | 2026 | Année à 4 chiffres |
| YY | 26 | Année à 2 chiffres |
| Q | 1..4 | Numéro de trimestre |
| M MM | 1..12 | Numéro de mois |
| D DD | 1..31 | Jour du mois |
| Do | 1st..31st | Jour du mois avec ordinal |
| DDD DDDD | 1..365 | Jour de l'année |
| X | 1410715640.579 | Horodatage Unix |
| x | 1410715640579 | Horodatage Unix en millisecondes |
| H HH | 0..23 | Heure au format 24 heures |
| h hh | 1..12 | Heure au format 12 heures, à utiliser avec a A |
| a A | am pm | Matin ou après-midi |
| m mm | 0..59 | Minute |
| s ss | 0..59 | Secondes |
| S | 0..9 | Dixième de seconde |
| SS | 0..99 | Centième de seconde |
| SSS | 0..999 | Millième de seconde |
| Z ZZ | +12:00 | Décalage par rapport à UTC, au format +-HH:mm, +-HHmm ou Z |
Format de date de sortie de l'axe
Le format de date de sortie par défaut est YYYY-MM-DD. Vous pouvez personnaliser axisFormat, par exemple 2026-Q1 pour le premier trimestre de l'année 2026.
Copier
Intégrer
axisFormat %Y-%m-%d
Les chaînes de format suivantes sont prises en charge :
| Format,Définition | |
|---|---|
| %a | Nom abrégé du jour de la semaine |
| %A | Nom complet du jour de la semaine |
| %b | Nom abrégé du mois |
| %B | Nom complet du mois |
| %c | Date et heure localisées |
| %d | Date, nombre décimal [01,31] |
| %e | Date, nombre décimal rempli par des espaces [1,31], équivalent à %_d |
| %H | Heure (format 24 heures), nombre décimal [00,23] |
| %I | Heure (format 12 heures), nombre décimal [01,12] |
| %j | Jour de l'année, nombre décimal [001,366] |
| %m | Mois, nombre décimal [01,12] |
| %M | Minutes, nombre décimal [00,59] |
| %L | Millisecondes, nombre décimal [000, 999] |
| %p | Matin ou après-midi |
| %S | Secondes, nombre décimal [00,59] |
| %U | Semaine de l'année (le dimanche étant le premier jour de la semaine), nombre décimal [00,53] |
| %w | Jour de la semaine, nombre décimal rempli par des espaces [0,6], où 0 représente le dimanche |
| %W | Semaine de l'année (le lundi étant le premier jour de la semaine), nombre décimal [00,53] |
| %x | Représentation localisée de la date, par exemple : 2026-09-18 |
| %X | Représentation localisée de l'heure, par exemple : 14:30:00 |
| %y | Année sans siècle, nombre décimal [00,99], par exemple 26 représente l'année 2026 |
| %Y | Année avec siècle, nombre décimal |
| %Z | Abréviation du nom de fuseau horaire, par exemple "-0700" |
| %% | Caractère d'échappement, utilisé pour afficher le signe de pourcentage % lui-même |
Graduations de l'axe
Les graduations de sortie par défaut sont automatiques. Vous pouvez personnaliser tickInterval, par exemple 1day ou 1week.
Copier
Intégrer
tickInterval 1day
Le modèle est
Copier
Intégrer
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Un tickInterval basé sur les semaines commence par défaut le dimanche. Si vous souhaitez spécifier un autre jour de début pour tickInterval, utilisez l'option weekday, comme dans le code suivant :
Copier
Intégrer
gantt
tickInterval 1week
weekday monday
Sortie en mode compact
Le mode compact vous permet d'afficher plusieurs tâches sur la même ligne. Le mode d'affichage du graphique est contrôlé par le paramètre YAML précédent, qui active le mode compact pour le diagramme de Gantt.
Copier
Intégrer
---
displayMode: compact
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2026-01-01, 30d
Another task :a2, 2026-01-20, 25d
Another one :a3, 2026-02-10, 20d
Vous pouvez saisir des commentaires dans un diagramme de Gantt ; l'analyseur les ignorera. Un commentaire doit occuper une ligne à lui seul et commencer par %% (double signe de pourcentage). Tout texte allant du début du commentaire jusqu'au prochain retour à la ligne est considéré comme un commentaire, y compris toute syntaxe de diagramme.
Copier
Intégrer
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
Marqueur du jour
Vous pouvez styliser ou masquer le marqueur de la date actuelle. Pour le styliser, ajoutez une valeur à la clé todayMarker.
Copier
Intégrer
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Pour masquer le marqueur, réglez todayMarker sur off.
Copier
Intégrer
todayMarker off
Exemple
Diagramme de Gantt à barres
Copier
Intégrer
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
Chronologie (avec commentaire, CSS et configuration en en-tête)
Copier
Intégrer
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
# theme: forest
# themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers:
#item36 { fill: CadetBlue }
// Custom marker workaround CSS from forum (below)
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
---
gantt
title Timeline - Gantt Sampler
dateFormat YYYY
axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade
section Issue19062
71 : item71, 1900, 1930
section Issue19401
36 : item36, 1913, 1935
section Issue1300
94 : item94, 1910, 1915
5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
