Editor di diagrammi di Gantt Mermaid
Un diagramma di Gantt appoggia il lavoro sul calendario: cosa dura quanto, cosa si sovrappone e cosa non può partire finché qualcos'altro non è finito. Usalo quando il nocciolo sono le date e le dipendenze. Se ti serve solo l'ordine e non le date, un diagramma di flusso è più leggero e non marcisce ogni volta che il piano slitta.
Un piano di rilascio con dipendenze e un traguardo
Ciò che rende questo un diagramma di Gantt, e non un disegno di barre, è `after a1`: la dipendenza è dichiarata, quindi spostare la prima attività trascina tutto ciò che la segue. Il traguardo segna una data fissa che non consuma tempo. La riga `dateFormat DD/MM/YYYY` non è facoltativa: senza, cadi nella trappola delle date descritta più sotto.
gantt
title Rilascio 2.4
dateFormat DD/MM/YYYY
axisFormat %d/%m
excludes weekends
section Sviluppo
Contratto API :done, a1, 07/01/2026, 10d
Implementazione :active, a2, after a1, 20d
Test interni : a3, after a2, 8d
section Rilascio
Periodo di stabilizzazione : b1, after a3, 5d
Decisione di rilascio :milestone, m1, after b1, 0d
Messa in produzione :crit, b2, after m1, 3dEsempi commentati
1. Il diagramma corretto più semplice
`dateFormat` dice a Mermaid come LEGGERE le date che scrivi; `axisFormat` governa come vengono MOSTRATE sull'asse. Sono due impostazioni distinte e confonderle è la causa più comune di frustrazione con il Gantt.
gantt
title Sprint 14
dateFormat DD/MM/YYYY
section Lavoro
Costruisci la ricerca :02/03/2026, 10d2. Identificatori delle attività e dipendenze
Dare un identificatore a un'attività permette a quelle successive di scrivere `after <id>`. Con le dipendenze dichiarate cambi la data d'inizio in un punto solo e il resto del piano la segue.
gantt
title Migrazione dati
dateFormat DD/MM/YYYY
section Preparazione
Analisi dello schema :a1, 02/02/2026, 5d
Scrivi le mappature :a2, after a1, 8d
section Esecuzione
Prova generale :a3, after a2, 3d
Commutazione :a4, after a3, 1d3. Parole chiave di stato
`done`, `active` e `crit` cambiano il modo in cui la barra viene disegnata. È il modo più economico di far rispondere il diagramma alla domanda «a che punto siamo» e non solo «qual era il piano».
gantt
title Piattaforma, primo trimestre
dateFormat DD/MM/YYYY
section Infrastruttura
Pulizia Terraform :done, t1, 05/01/2026, 12d
Aggiornamento Kubernetes :active, t2, 19/01/2026, 15d
Revisione dei costi : t3, after t2, 5d
section Sicurezza
Audit delle dipendenze :crit, s1, 12/01/2026, 6d4. Traguardi
Un traguardo è un punto, non un intervallo: dagli `0d`. Usali per le date fissate da qualcosa fuori dal progetto — una fiera, un termine contrattuale, un congelamento del codice.
gantt
title Piano di lancio
dateFormat DD/MM/YYYY
section Ingegneria
Congelamento dell'ambito :milestone, m1, 01/04/2026, 0d
Caccia ai difetti : e1, 01/04/2026, 5d
Ramo di rilascio :milestone, m2, after e1, 0d
section Comunicazione
Fine dell'embargo stampa :milestone, m3, 15/04/2026, 0d5. Escludere weekend e festività
`excludes weekends` fa sì che le durate non contino sabati e domeniche, così un'attività da 10 giorni occupa due settimane lavorative invece di finire in mezzo al fine settimana. Le festività si escludono una per una: in Italia fra il 25 aprile, il 1º maggio, il 2 giugno e Ferragosto la differenza su un trimestre è tutt'altro che trascurabile.
gantt
title Avvio del nuovo servizio
dateFormat DD/MM/YYYY
excludes weekends, 25/04/2026, 01/05/2026, 02/06/2026
section Costruzione
Alza l'infrastruttura :p1, 20/04/2026, 5d
Collega la CI/CD :p2, after p1, 5d
section Consegna
Manuale e formazione :p3, after p2, 4dRiepilogo della sintassi del diagramma di Gantt
Dei sei tipi, il Gantt è il meno indulgente in un punto solo — la riga dell'attività — e il più indulgente in tutto il resto. È esattamente per questo che tanti errori gli passano sotto il naso.
| Sintassi | Significato |
|---|---|
| gantt | Apre il diagramma. |
| title Testo | Titolo del diagramma. |
| dateFormat DD/MM/YYYY | Come ANALIZZARE le date che scrivi. È la riga giusta per l'italiano. |
| dateFormat YYYY-MM-DD | Formato ISO, impostazione predefinita. |
| axisFormat %d/%m | Come MOSTRARE le date sull'asse. Impostazione diversa da dateFormat. |
| excludes weekends | Salta sabati e domeniche nel calcolo delle durate. |
| excludes 15/08/2026 | Escludi una data precisa. È così che si tolgono le festività. |
| section Nome | Raggruppa le attività in una fascia con un nome. |
| Attività :id, 01/01/2026, 10d | Attività con inizio esplicito e durata. |
| Attività :id, after altra, 10d | Attività che parte quando `altra` finisce. |
| Attività :done, id, ... | Completata — disegnata in grigio. |
| Attività :active, id, ... | In corso — disegnata in evidenza. |
| Attività :crit, id, ... | Critica — disegnata col colore d'accento. |
| Nome :milestone, id, data, 0d | Un punto nel tempo, non un intervallo. |
| 10d / 3w / 2h | Durata in giorni, settimane, ore. L'unità è obbligatoria. |
Le sei trappole del Gantt — e una sola è un errore
È questo che distingue il Gantt dagli altri cinque tipi. Riprodotto su Mermaid 11.12.2: esattamente una delle sei qui sotto ferma il disegno. Le altre cinque producono un calendario del tutto credibile e sbagliato, il che è molto più pericoloso, perché nessuno ricontrolla un diagramma che si è disegnato.
Cosa vedi
Parse error che finisce con: Expecting 'taskData', got 'NL'
Perché
Una riga di attività senza i due punti. I due punti separano il nome visualizzato dai dati dell'attività e senza di essi non c'è nulla da analizzare. È l'unica trappola di questo elenco che Mermaid rifiuta apertamente.
Soluzione
Metti i due punti fra il nome e l'identificatore.
gantt
dateFormat DD/MM/YYYY
section Lavoro
Progettazione a1, 07/01/2026, 5dgantt
dateFormat DD/MM/YYYY
section Lavoro
Progettazione :a1, 07/01/2026, 5dCosa vedi
Il diagramma si disegna, ma le date cadono due mesi prima
Perché
È l'errore tipico di chi scrive in italiano e il più costoso di questo elenco. Scriviamo 01/03/2026 intendendo il 1º marzo, ma il `dateFormat` predefinito è `YYYY-MM-DD` e davanti a una data con separatori Mermaid la interpreta all'americana, con il mese davanti. Misurato: `01/03/2026` con `dateFormat YYYY-MM-DD` colloca l'attività al 3 gennaio. Nessun avviso; il diagramma sembra perfetto ed è spostato di due mesi. Usare il punto al posto della barra non cambia nulla.
Soluzione
Dichiara `dateFormat DD/MM/YYYY` e scrivi le date come le scrivi sempre. Verificato: con questo formato `01/03/2026` cade esattamente il 1º marzo.
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m/%Y
section S
Progettazione :a1, 01/03/2026, 10dgantt
dateFormat DD/MM/YYYY
axisFormat %d/%m/%Y
section S
Progettazione :a1, 01/03/2026, 10dCosa vedi
Il diagramma si disegna, ma l'asse copre improvvisamente molti mesi
Perché
Un `after` che punta a un identificatore inesistente — di solito un refuso o un nome cambiato. Mermaid non avvisa: colloca l'attività in un punto qualsiasi, e questo dilata l'asse fino a raggiungerla. Due attività da dieci giorni possono finire su un asse che copre otto mesi.
Soluzione
Controlla che ogni `after <id>` corrisponda esattamente a un identificatore dichiarato. Un cambio improvviso di scala dell'asse è il segnale.
gantt
dateFormat DD/MM/YYYY
section S
Progettazione :a1, 07/01/2026, 10d
Costruzione :a2, after progetto, 10dgantt
dateFormat DD/MM/YYYY
section S
Progettazione :a1, 07/01/2026, 10d
Costruzione :a2, after a1, 10dCosa vedi
Il nome dell'attività è troncato ai primi due punti
Perché
Nel nome dell'attività ci sono dei due punti. I primi due punti sono il separatore, quindi tutto ciò che segue viene letto come dati dell'attività: `Fase 1: analisi` si disegna come un'attività chiamata semplicemente `Fase 1`, e la parola analisi sparisce. I nomi delle sezioni non ne sono toccati — verificato.
Soluzione
Niente due punti nei nomi delle attività. Usa un trattino oppure sposta il dettaglio nel nome della sezione.
gantt
dateFormat DD/MM/YYYY
section S
Fase 1: analisi :a1, 07/01/2026, 10dgantt
dateFormat DD/MM/YYYY
section S
Fase 1 — analisi :a1, 07/01/2026, 10dCosa vedi
La barra si restringe fino a sparire
Perché
Durata senza unità. `5` non è cinque giorni: l'unità è obbligatoria e senza di essa l'attività non riceve una lunghezza sensata. Il diagramma si disegna comunque, con un'attività che sembra non occupare tempo.
Soluzione
Scrivi sempre l'unità: `5d`, `3w`, `2h`.
gantt
dateFormat DD/MM/YYYY
section S
Progettazione :a1, 07/01/2026, 5gantt
dateFormat DD/MM/YYYY
section S
Progettazione :a1, 07/01/2026, 5dCosa vedi
Le durate tornano, ma le date di fine non corrispondono alla realtà
Perché
Manca `excludes weekends`. Per impostazione predefinita un'attività da 10 giorni è dieci giorni di calendario, weekend compresi, quindi tutto ciò che supera la settimana lavorativa finisce sul diagramma prima che nella pratica. In Italia si aggiungono i ponti di primavera e Ferragosto, e lo scarto accumulato su un trimestre diventa difficile da difendere in riunione.
Soluzione
Aggiungi `excludes weekends` vicino all'inizio, seguito dalle date delle festività — a meno che il lavoro proceda davvero sette giorni su sette.
gantt
dateFormat DD/MM/YYYY
section S
Migrazione :a1, 20/04/2026, 10dgantt
dateFormat DD/MM/YYYY
excludes weekends, 25/04/2026, 01/05/2026
section S
Migrazione :a1, 20/04/2026, 10dNote sul disegno
Misurato su Mermaid 11.12.2, la versione che usa questo sito. Il Gantt si comporta diversamente da tutti gli altri tipi.
L'unico tipo con larghezza di disegno fissa
Tutti gli altri diagrammi di questo sito crescono nella direzione in cui cresce il loro contenuto. Il diagramma di Gantt ha sempre un viewBox largo 1264 pixel, che abbia tre attività o quaranta; cambia solo l'altezza, misurata fra circa 172 e 1060 pixel. L'asse viene compresso o dilatato per stare in quella larghezza fissa, ed è per questo che un piano biennale e uno di due settimane sembrano ugualmente densi. Se le barre risultano illeggibilmente sottili, il problema è l'intervallo di date, non il numero di attività.
Le barre non aiutano — l'analisi resta all'americana
Lo ripeto qui perché è la trappola più costosa per chi scrive in italiano. Misurato: con `dateFormat YYYY-MM-DD` la data `01/03/2026` non produce né errore né avviso, si posiziona semplicemente al 3 gennaio — la barra come separatore non suggerisce al motore in alcun modo che si tratti di giorno e mese. Lo stesso accade con il punto. Un `dateFormat DD/MM/YYYY` dichiarato risolve la faccenda del tutto. È la prima riga da aggiungere a qualunque Gantt scritto in italiano.
L'esportazione PNG è esatta al pixel
Il Gantt disegna le etichette come normale testo SVG e non come HTML incorporato, quindi — a differenza del diagramma di flusso e dei diagrammi di classi, stati ed ER — si lascia rasterizzare direttamente. Il PNG esportato corrisponde esattamente a ciò che vedi a schermo, senza ridisegno e senza scarti nella composizione del testo.
È il tipo che ha sofferto di più per il difetto di esportazione PNG
Dato che Mermaid emette `width="100%"` e non indica l'altezza, il browser calcolava la dimensione dell'esportazione rispetto al riquadro predefinito di 300×150, e le proporzioni larghe e basse del Gantt ne facevano il caso peggiore possibile: un diagramma di 1280×148 veniva esportato come PNG di 600×58. Ora l'esportazione legge il viewBox e lo stesso diagramma esce a 2560×296. Utile saperlo se hai vecchi PNG di diagrammi di Gantt: non si possono ingrandire.
La grammatica è indulgente ovunque tranne che sui due punti
Sezioni mancanti, parole chiave di stato sconosciute, date nel formato sbagliato e durate senza unità — tutto viene disegnato. L'unica cosa rifiutata è la riga di attività senza i due punti. Questa asimmetria è la cosa più utile da sapere sullo scrivere diagrammi di Gantt: il fatto che il diagramma si sia disegnato non dice quasi nulla sul fatto che sia corretto.
Quando conviene un altro diagramma
Se le date sono ipotesi, il diagramma di Gantt le presenta con una precisione che non si sono meritate, e prima o poi qualcuno te le rinfaccia. Un diagramma di flusso che mostra l'ordine senza date è più onesto e non chiede correzioni ogni volta che il piano slitta.
Se il piano cambia ogni settimana, un Gantt testuale sotto controllo di versione è davvero utile — dal diff si vede cosa è slittato — ma un diagramma che nessuno aggiorna è peggio di nessun diagramma. Valuta lucidamente quale dei due stai facendo.
E per tutto ciò che riguarda il bilanciamento del carico, la capacità o l'assegnazione alle persone, è lo strumento sbagliato. Mermaid disegna barre su un calendario; non sa chi svolge il lavoro né se quella persona è già occupata.
Altri tipi di diagramma
Scritto da Dominik Malsch · Ultimo aggiornamento: