🕰️ Mermaid

Linea temporale

Racconta una storia anno per anno

Che cos’è un Linea temporale?

Una linea temporale dispone gli eventi in ordine cronologico: storia dell’azienda, milestone di progetto, evoluzione del prodotto, retrospettive degli incidenti. Le linee temporali Mermaid raggruppano più eventi per periodo e restano leggibili a qualsiasi dimensione.

La linea temporale è il diagramma della retrospettiva: postmortem di incidenti, slide sulla storia dell’azienda, la sezione «come siamo arrivati qui» di un documento di strategia. È insolitamente brava a rendere visibili i vuoti — tre eventi a marzo e più nulla fino a settembre sono già una storia. Quello che non sa fare è la scala: i periodi sono etichette, distanziate in modo uniforme qualunque sia l’intervallo, e nulla viene ordinato al posto tuo. Un periodo, inoltre, non porta altro che testo: nessun responsabile, nessun link, nessuno stato su cui filtrare.

Esempio dal vivo

Codice Mermaid
timeline
    title History of the project
    2024 : Idea & prototype
    2025 : First customers
         : Seed funding
    2026 : EU expansion
         : AI features
Esempio dal vivo
2024Idea & prototype2025First customersSeed funding2026EU expansionAI featuresHistory of the project

Quando usarlo

Presentare la storia di un’azienda o di un prodotto
Documentare la cronologia degli incidenti per i postmortem
Mostrare le milestone della roadmap per trimestre o per anno

Errori frequenti

I periodi non vengono mai ordinati

Mermaid disegna i periodi nell’ordine in cui li hai scritti, quindi una voce 2026 messa sopra una 2024 resta sopra. Non c’è alcun controllo cronologico né alcun avviso: ordina tu il sorgente prima di pubblicare.

I periodi prima della prima sezione spariscono

Appena una linea temporale contiene una sezione, ogni periodo dichiarato prima di quella prima riga section sparisce dal rendering, in silenzio e senza errori. Dai a quei periodi iniziali una sezione tutta loro, oppure rinuncia del tutto alle sezioni.

Frasi al posto di eventi

Il testo di un evento va a capo a una larghezza fissa, quindi una frase intera diventa quattro righe impilate e gonfia l’altezza dell’intero grafico. Tieni gli eventi su poche parole e metti il dettaglio nel documento intorno.

Sintassi di base

.mmd
timeline
    title My timeline
    2025 : Event A
         : Event B
    2026 : Event C
  • timeline title History of the project

    Il titolo è facoltativo ma fa il lavoro di una didascalia, cosa che conta appena il diagramma viene esportato da solo dentro una slide o un postmortem.

  • 2025 : First customers

    A sinistra dei due punti sta l’etichetta del periodo: un anno, un trimestre, Sprint 12, qualsiasi cosa. Non viene mai interpretata come una data, quindi va bene qualunque formato.

  • 2024 : Idea : Prototype

    Altri due punti sulla stessa riga aggiungono ulteriori eventi allo stesso periodo, cosa che tiene compatto il sorgente quando un anno racchiude più momenti notevoli.

  • section Early days 2024 : Idea

    Le sezioni raggruppano periodi consecutivi in un’epoca e li colorano insieme: utile per separare il prima e il dopo di un round di finanziamento, una migrazione o un disservizio.

Domande su questo diagramma

Un periodo può contenere più eventi?

Sì — aggiungi righe supplementari che iniziano con «:» sotto lo stesso periodo e si impileranno verticalmente sotto quella data.

Linea temporale o diagramma di Gantt?

La linea temporale per raccontare il passato o dare una visione d’insieme (eventi con date). Il Gantt per pianificare il lavoro (attività con durate e dipendenze).

Posso aggiungere una linea temporale Mermaid a un postmortem su Confluence?

Confluence non ha supporto nativo per Mermaid: usa una macro del Marketplace o incolla un SVG o un PNG esportato. GitHub e GitLab renderizzano le linee temporali direttamente da un blocco di codice, quindi i report di incidente tenuti in un repo non richiedono strumenti aggiuntivi.

Come coloro le sezioni di una linea temporale?

Le sezioni prendono i colori dalla scala del tema. Sovrascrivili con una direttiva init sulla prima riga — %%{init: {"themeVariables": {"cScale0": "#4f46e5"}}}%% — dove cScale0 è la prima sezione, cScale1 la seconda, fino a cScale11. La palette finisce dentro l’SVG esportato.

Posso rendere verticale una linea temporale?

No: le linee temporali vengono disegnate in orizzontale e non esiste alcuna impostazione di direzione. Non vanno mai a capo: il diagramma si allarga e basta. Per una storia lunga in una colonna stretta, un diagramma di flusso dall’alto verso il basso o un gitGraph TB: sfruttano molto meglio lo spazio.

Posso trasformare automaticamente un rapporto di incidente in una linea temporale?

Incolla il testo in Mermaid Studio e l’IA ne estrae gli eventi datati in una linea temporale che puoi poi modificare. Consideralo una prima bozza: i periodi mantengono l’ordine in cui sono stati estratti, quindi verifica la cronologia prima di pubblicare.

Linea temporale o un altro tipo di diagramma?

Linea temporale o percorso utente?

Entrambi dispongono i passaggi da sinistra a destra. La linea temporale parla del quando: eventi datati, nessun attore, nessun punteggio. Il percorso utente parla di come è stato vissuto: passaggi ordinati, un attore, un punteggio di soddisfazione. Se nessuno ha vissuto quegli eventi, ti serve una linea temporale.

Linea temporale o grafo Git?

La linea temporale è piatta: ogni evento sta su una sola linea. Il grafo Git ramifica. Una storia di release con branch di manutenzione paralleli ha bisogno del grafo Git; una storia di prodotto in cui conta la sequenza e non il parallelismo ha bisogno della linea temporale.

Crea ora il tuo Linea temporale

Descrivilo in linguaggio naturale — l’IA scrive il codice Mermaid per te.

Apri Mermaid Studio