Diagramma di Gantt
Il diagramma di Gantt è un tipo di diagramma a barre usato per mostrare l'avanzamento di un progetto e il tempo necessario per completarlo. Il diagramma di Gantt mostra il numero di giorni tra la data di inizio e quella di fine degli elementi terminali e degli elementi di riepilogo di un progetto.
Note
Il diagramma di Gantt registra ogni attività pianificata come una barra continua che si estende da sinistra verso destra. L'asse x rappresenta il tempo, l'asse y registra le diverse attività e l'ordine in cui vengono completate.
Ancora più importante, quando una data, un numero di giorni o un insieme specifico di date di un'attività vengono esclusi, il diagramma di Gantt si adatta a queste modifiche prolungando verso destra dello stesso numero di giorni, invece di creare lacune interne all'attività.
Copia
Incorpora
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
Tuttavia, se le date escluse si trovano tra due attività che iniziano in modo consecutivo, le date escluse vengono saltate e lasciate vuote sul diagramma, e le attività successive inizieranno dopo la fine delle date escluse. Come mostrato di seguito:
Copia
Incorpora
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
Il diagramma di Gantt è utile per tenere traccia del tempo necessario a completare un progetto, ma con qualche accorgimento può essere usato anche per rappresentare graficamente i "giorni non lavorativi".
Sintassi
Copia
Incorpora
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
Le attività sono per impostazione predefinita consecutive; la data di inizio dell'attività successiva è per impostazione predefinita la data di fine dell'attività precedente.
Il titolo dell'attività e i suoi metadati sono separati da due punti (:), e gli elementi dei metadati sono separati da virgole (,). Le etichette valide includono active, done, crit e milestone. Le etichette sono opzionali, ma se usate devono essere poste all'inizio. Una volta gestite le etichette, i restanti elementi dei metadati sono interpretati come segue:
- Se viene specificato un singolo elemento, esso determina quando termina l'attività. Può essere una data o un orario specifico oppure una durata. Se viene specificata una durata, questa viene aggiunta alla data di inizio dell'attività per determinare la data di fine, tenendo conto di eventuali esclusioni.
- Se vengono specificati due elementi, il secondo è interpretato allo stesso modo del caso precedente. Il primo elemento può specificare una data o un orario di inizio espliciti (il formato è indicato da dateFormat), oppure può fare riferimento a un'altra attività tramite after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. In quest'ultimo caso, la data di inizio dell'attività sarà impostata in base alla data di fine più recente tra le attività referenziate.
- Se vengono specificati tre elementi, gli ultimi due sono interpretati come nei casi precedenti. Il primo elemento indicherà l'ID dell'attività, che può essere referenziato con la sintassi later <taskID>.
| Sintassi dei metadati | Data di inizio | Data di fine | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate interpretato usando dateformat | endDate interpretato usando dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate interpretato usando dateformat | Data di inizio + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Data di fine dell'attività specificata in precedenza otherTaskID | endDate interpretato usando dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Data di fine dell'attività specificata in precedenza otherTaskID | Data di inizio + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate interpretato usando dateformat | Data di inizio dell'attività specificata in precedenza otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Data di fine dell'attività specificata in precedenza otherTaskID | Data di inizio dell'attività specificata in precedenza otherTaskID | taskID |
| <startDate>, <endDate> | startdate interpretato usando dateformat | 使用 dateformat 解释的 enddate | Non applicabile |
| <startDate>, <length> | startdate interpretato usando dateformat | Data di inizio + length | Non applicabile |
| after <otherTaskID>, <endDate> | Data di fine dell'attività specificata in precedenza otherTaskID | 使用 dateformat 解释的 enddate | Non applicabile |
| after <otherTaskID>, <length> | Data di fine dell'attività specificata in precedenza otherTaskID | Data di inizio + length | Non applicabile |
| <startDate>, until <otherTaskId> | startdate interpretato usando dateformat | Data di inizio dell'attività specificata in precedenza otherTaskID | Non applicabile |
| after <otherTaskId>, until <otherTaskId> | Data di fine dell'attività specificata in precedenza otherTaskID | Data di inizio dell'attività specificata in precedenza otherTaskID | Non applicabile |
| <endDate> | Data di fine dell'attività precedente | 使用 dateformat 解释的 enddate | Non applicabile |
| <length> | Data di fine dell'attività precedente | Data di inizio + length | Non applicabile |
| until <otherTaskId> | Data di fine dell'attività precedente | Data di inizio dell'attività specificata in precedenza otherTaskID | Non applicabile |
Formato della durata
Quando si specifica <length>, si usa un numero seguito da uno dei seguenti suffissi di unità:
| Unità | Suffisso | Esempio |
|---|---|---|
| Millisecondo | ms | 50ms |
| Secondo | s | 30s |
| Minuto | m | 30m |
| Ora | h | 4h |
| Giorno | d | 7d |
| Settimana | w | 3w |
| Mese | m | 2m |
| Anno | y | 1y |
Sono supportati anche i valori decimali (ad esempio, 2.5d). I marcatori di durata non validi (ad esempio, 3dX) vengono ignorati e l'attività avrà per impostazione predefinita una durata pari a zero.
Per semplicità, la tabella non mostra più attività elencate con la sintassi after. Ecco un esempio:
Copia
Incorpora
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
Titolo
title è una stringa opzionale, mostrata nella parte superiore del diagramma di Gantt, che descrive l'intero diagramma.
Esclusioni
excludes è una proprietà opzionale che accetta una data specifica (formato YYYY-MM-DD), un giorno della settimana (ad esempio "sunday") oppure "weekends", ma non può usare la parola "weekdays". Queste date verranno contrassegnate sul diagramma ed escluse dal calcolo della durata dell'attività. Ciò significa che se il periodo di durata di un'attività include date escluse, i giorni esclusi verranno aggiunti alla data di fine dell'attività, per garantire che la durata dell'attività coincida con quella specificata nel codice.
Fine settimana
Quando si escludono i fine settimana, si può impostare il fine settimana su venerdì e sabato, oppure su sabato e domenica. Per impostazione predefinita, il fine settimana è sabato e domenica. Per definire il giorno di inizio del fine settimana, puoi aggiungere su una nuova riga una proprietà opzionale weekend, seguita da friday o saturday.
Copia
Incorpora
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
Dichiarazione delle sezioni
Puoi suddividere il diagramma in sezioni, per separare le diverse parti di un progetto (ad esempio sviluppo e documentazione).
A questo scopo, usa la sintassi section all'inizio di una riga e assegnale un nome. Nota che, a differenza del titolo dell'intero diagramma, questo nome è obbligatorio.
Milestone
Puoi aggiungere milestone al diagramma. Le milestone sono diverse dalle attività, perché rappresentano un momento specifico e sono identificate dalla sintassi milestone. Ecco un esempio d'uso delle milestone: la posizione esatta di una milestone è determinata dalla sua data di inizio e dalla durata dell'attività, come mostrato di seguito:
Copia
Incorpora
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
Marcatore verticale
vert indica l'aggiunta di una linea verticale nel diagramma di Gantt, per evidenziare facilmente date importanti, come scadenze, eventi importanti o checkpoint. Questi marcatori si estendono lungo tutto il diagramma e sono posizionati in base alla data fornita. A differenza delle milestone, i marcatori verticali non occupano una riga. Sono puramente punti di riferimento visivi, che aiutano a scomporre la timeline e a rendere più riconoscibili i momenti importanti.
Copia
Incorpora
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
Impostare la data
dateFormat definisce il formato di input delle date per gli elementi del diagramma di Gantt, axisFormat definisce il formato di output delle date durante il rendering del diagramma.
Formato di input della data
Il formato di input della data predefinito è YYYY-MM-DD; puoi personalizzare dateFormat.
Copia
Incorpora
dateFormat YYYY-MM-DD
Sono supportate le seguenti opzioni di formato:
| 输入 | Esempio | Descrizione |
|---|---|---|
| YYYY | 2026 | Anno a 4 cifre |
| YY | 26 | Anno a 2 cifre |
| Q | 1..4 | Numero del trimestre |
| M MM | 1..12 | Numero del mese |
| D DD | 1..31 | Giorno del mese |
| Do | 1st..31st | Giorno del mese con ordinale |
| DDD DDDD | 1..365 | Giorno dell'anno |
| X | 1410715640.579 | Timestamp Unix |
| x | 1410715640579 | Timestamp Unix in millisecondi |
| H HH | 0..23 | Ora in formato 24 ore |
| h hh | 1..12 | Ora in formato 12 ore, da usare con a A |
| a A | am pm | AM o PM |
| m mm | 0..59 | Minuto |
| s ss | 0..59 | Secondi |
| S | 0..9 | Decimo di secondo |
| SS | 0..99 | Centesimo di secondo |
| SSS | 0..999 | Millesimo di secondo |
| Z ZZ | +12:00 | Offset rispetto a UTC, nel formato +-HH:mm, +-HHmm o Z |
Formato di output della data dell'asse
Il formato di output della data predefinito è YYYY-MM-DD. Puoi personalizzare axisFormat, ad esempio 2026-Q1 indica il primo trimestre del 2026.
Copia
Incorpora
axisFormat %Y-%m-%d
Sono supportate le seguenti stringhe di formato:
| Formato,Definizione | |
|---|---|
| %a | Nome abbreviato del giorno della settimana |
| %A | Nome completo del giorno della settimana |
| %b | Nome abbreviato del mese |
| %B | Nome completo del mese |
| %c | Data e ora localizzate |
| %d | Data, numero decimale [01,31] |
| %e | Data, numero decimale riempito con spazi [1,31], equivalente a %_d |
| %H | Ora (formato 24 ore), numero decimale [00,23] |
| %I | Ora (formato 12 ore), numero decimale [01,12] |
| %j | Giorno dell'anno, numero decimale [001,366] |
| %m | Mese, numero decimale [01,12] |
| %M | Minuto, numero decimale [00,59] |
| %L | Millisecondo, numero decimale [000, 999] |
| %p | AM o PM |
| %S | Secondo, numero decimale [00,59] |
| %U | Settimana dell'anno (con la domenica come primo giorno della settimana), numero decimale [00,53] |
| %w | Giorno della settimana, numero decimale riempito con spazi [0,6], dove 0 rappresenta la domenica |
| %W | Settimana dell'anno (con il lunedì come primo giorno della settimana), numero decimale [00,53] |
| %x | Rappresentazione localizzata della data, ad esempio: 2026-09-18 |
| %X | Rappresentazione localizzata dell'ora, ad esempio: 14:30:00 |
| %y | Anno senza secolo, numero decimale [00,99], ad esempio 26 rappresenta l'anno 2026 |
| %Y | Anno con secolo, numero decimale |
| %Z | Abbreviazione del nome del fuso orario, ad esempio "-0700" |
| %% | Carattere di escape, usato per mostrare il segno di percentuale % stesso |
Tacca dell'asse
Per impostazione predefinita, le tacche di output sono automatiche. Puoi personalizzare tickInterval, ad esempio 1day o 1week.
Copia
Incorpora
tickInterval 1day
Lo schema è
Copia
Incorpora
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Un tickInterval basato sulla settimana inizia per impostazione predefinita dalla domenica. Se vuoi specificare un altro giorno della settimana in cui inizia tickInterval, usa l'opzione weekday, con il codice seguente:
Copia
Incorpora
gantt
tickInterval 1week
weekday monday
Output in modalità compatta
La modalità compatta ti permette di mostrare più attività sulla stessa riga. La modalità di visualizzazione del grafico è controllata dall'impostazione YAML precedente, che abilita la modalità compatta per il diagramma di Gantt.
Copia
Incorpora
---
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
Puoi inserire commenti in un diagramma di Gantt; il parser li ignorerà. I commenti devono occupare una riga propria e devono iniziare con %% (doppio segno di percentuale). Tutto il testo dal commento fino al successivo carattere di nuova riga sarà considerato un commento, inclusa qualsiasi sintassi del diagramma.
Copia
Incorpora
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
Marcatore di oggi
Puoi impostare lo stile o nascondere il marcatore della data corrente. Per impostare lo stile, aggiungi un valore alla chiave todayMarker.
Copia
Incorpora
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Per nascondere il marcatore, imposta todayMarker su off.
Copia
Incorpora
todayMarker off
Esempio
Diagramma di Gantt a barre
Copia
Incorpora
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
Timeline (con commenti, CSS e configurazione frontmatter)
Copia
Incorpora
---
# 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
