Gratuito · Senza registrazione · Compatibile con file .mmd

Editor di diagrammi di sequenza Mermaid

Un diagramma di sequenza mostra chi parla con chi e in quale ordine. Va bene quando ciò che conta è lo scambio di messaggi fra più parti — autenticazione, pagamento, integrazione fra servizi. Se il partecipante è uno solo e contano le diramazioni, un diagramma di flusso dice la stessa cosa con meno rumore.

Aprilo nell'editor →Leggi la guida

Accesso con identità digitale e secondo fattore

Il valore di questo diagramma sta nel blocco `alt`: mostra che il secondo fattore non succede sempre e che gli esiti sono due. Nota anche che il fornitore di servizi non parla mai direttamente con il gestore dell'identità dopo il primo reindirizzamento: è il browser del cittadino a fare da tramite. È esattamente ciò che un diagramma di sequenza rende visibile e un diagramma di flusso nasconde.

sequenceDiagram
    autonumber
    participant C as Cittadino
    participant SP as Fornitore di servizi
    participant IdP as Gestore identità
    participant App as App di firma

    C->>SP: Richiedi l'accesso
    SP-->>C: Reindirizza al gestore identità
    C->>IdP: Credenziali
    IdP->>IdP: Verifica le credenziali

    alt Livello di sicurezza superiore richiesto
        IdP-->>C: Chiedi il secondo fattore
        C->>App: Approva la richiesta
        App-->>IdP: Conferma firmata
        IdP-->>C: Asserzione emessa
    else Livello base sufficiente
        IdP-->>C: Asserzione emessa subito
    end

    C->>SP: Presenta l'asserzione
    SP->>SP: Verifica la firma
    SP-->>C: Sessione aperta

Aprilo nell'editor

Esempi commentati

1. Due partecipanti e un messaggio

`->>` è la freccia a punta piena, cioè una chiamata. `-->>` è punteggiata e indica la risposta. Questa coppia basta nella maggior parte dei diagrammi.

sequenceDiagram
    Client->>API: Crea l'ordine
    API-->>Client: 201 Created

Apri nell'editor

2. Alias per i nomi lunghi

`participant X as Nome lungo` dà un identificatore corto da scrivere e un nome leggibile da leggere. Dichiarare i partecipanti all'inizio fissa anche il loro ordine nel disegno; senza dichiarazione decide l'ordine di prima comparsa.

sequenceDiagram
    participant B as Browser
    participant O as Servizio ordini
    participant M as Servizio magazzino

    B->>O: POST /ordini
    O->>M: Riserva i pezzi
    M-->>O: Prenotazione confermata
    O-->>B: 201 Created

Apri nell'editor

3. Attivazioni e chiamate a sé stessi

`activate` e `deactivate` disegnano una barra che mostra che il partecipante sta lavorando. I suffissi `+` e `-` sulla freccia fanno lo stesso con meno da scrivere. Una freccia da un partecipante a sé stesso indica lavoro interno.

sequenceDiagram
    participant A as API
    participant D as Base dati

    Client->>+A: GET /fattura/42
    A->>+D: SELECT fattura
    D-->>-A: Riga trovata
    A->>A: Calcola l'IVA
    A-->>-Client: 200 OK

Apri nell'editor

4. Alternative, opzioni e cicli

`alt`/`else` sono percorsi che si escludono, `opt` è un blocco che può non esserci, `loop` è una ripetizione. Tutti e tre si chiudono con `end`, e dimenticarlo è l'errore più frequente di questo tipo.

sequenceDiagram
    participant U as Utente
    participant A as API
    participant P as Servizio posta

    U->>A: Richiedi la registrazione
    alt Indirizzo già registrato
        A-->>U: 409 Conflict
    else Indirizzo libero
        A-->>U: 201 Created
        A->>P: Invia la verifica
        loop Fino a 3 tentativi
            P->>P: Riprova se l'invio fallisce
        end
    end
    opt L'utente accetta la newsletter
        A->>P: Aggiungi alla lista
    end

Apri nell'editor

5. Note e lavorazioni in parallelo

`par` mostra rami che avvengono contemporaneamente, cosa che il diagramma di flusso può solo lasciar intuire senza mai affermarla. Le note sono il posto giusto per il dettaglio che non entra nell'etichetta di un messaggio.

sequenceDiagram
    participant O as Servizio ordini
    participant F as Fatturazione
    participant L as Logistica

    Note over O: L'ordine risulta già pagato

    par Avvisa la fatturazione
        O->>F: Emetti la fattura elettronica
        F-->>O: Fattura 2026/0431
    and Avvisa la logistica
        O->>L: Prepara la spedizione
        L-->>O: Lettera di vettura creata
    end

    Note over F,L: Ognuna procede col proprio ritmo

Apri nell'editor

Riepilogo della sintassi del diagramma di sequenza

Da ricordare ci sono le frecce, e appartengono solo a questo tipo: il `-->` del diagramma di flusso qui significa altro, e il `->>` di qui è un errore nel diagramma delle classi.

Sintassi	Significato
sequenceDiagram	Apre il diagramma. Distingue maiuscole e minuscole: `sequencediagram` non funziona.
participant A	Dichiara un partecipante e ne fissa la posizione.
participant A as Nome	Identificatore corto con nome leggibile.
actor A	Come participant, ma disegna un omino.
A->>B: testo	Messaggio a punta piena — una chiamata.
A-->>B: testo	Linea punteggiata — una risposta.
A-)B: testo	Punta aperta — messaggio asincrono.
A->>A: testo	Il partecipante chiama sé stesso.
activate A / deactivate A	Segna il periodo in cui A sta lavorando.
A->>+B: / B-->>-A:	La stessa cosa in forma breve, direttamente sulla freccia.
alt condizione ... else ... end	Percorsi che si escludono a vicenda.
opt condizione ... end	Blocco che può non esserci.
loop testo ... end	Ripetizione.
par ... and ... end	Rami in parallelo.
Note over A,B: testo	Nota sopra uno o più partecipanti. Esistono anche `Note left of` e `Note right of`.
autonumber	Numera automaticamente i messaggi.

I sei errori che rompono un diagramma di sequenza

Riprodotti su Mermaid 11.12.2. Il primo è di gran lunga il più frequente, e il suo messaggio è fra quelli che indicano peggio dove sia il problema.

Cosa vedi

Parse error che indica l'ultima riga del diagramma

Perché

Un blocco aperto e mai chiuso. `alt`, `opt`, `loop` e `par` vogliono il loro `end`. Mermaid segnala l'errore dove gli finisce l'input, quindi il numero di riga indica la fine del file e non il blocco aperto. Con due blocchi annidati diventa davvero difficile da individuare.

Soluzione

Conta i blocchi aperti e gli `end` che hai scritto. Se l'errore indica l'ultima riga, è quasi sempre questo.

Sbagliato

sequenceDiagram
    Client->>API: Richiesta
    alt Tutto a posto
        API-->>Client: 200 OK

Corretto

sequenceDiagram
    Client->>API: Richiesta
    alt Tutto a posto
        API-->>Client: 200 OK
    end

Cosa vedi

No diagram type detected matching given configuration

Perché

Maiuscole e minuscole sbagliate nella parola chiave. `sequenceDiagram` funziona; `sequencediagram` e `SequenceDiagram` no. Mermaid distingue maiuscole e minuscole in tutte le parole chiave.

Soluzione

D maiuscola, il resto minuscolo.

Sbagliato

sequencediagram
    Client->>API: Ciao

Corretto

sequenceDiagram
    Client->>API: Ciao

Cosa vedi

Si disegna, ma il messaggio esce senza etichetta

Perché

Manca il testo dopo i due punti. Verificato: Mermaid non lo rifiuta — disegna il messaggio con un'etichetta vuota, e la freccia resta senza spiegazione. Quello che fallisce davvero è omettere del tutto i due punti: `Client->>API` da solo dà `Expecting 'TXT', got 'NEWLINE'`. I due punti sono quindi obbligatori e il testo no, esattamente il contrario di quel che si presumerebbe.

Soluzione

Scrivi qualcosa dopo i due punti, anche una sola parola. Una freccia senza etichetta non è quasi mai quello che volevi.

Sbagliato

sequenceDiagram
    Client->>API:
    API-->>Client: 200

Corretto

sequenceDiagram
    Client->>API: Crea l'ordine
    API-->>Client: 200

Cosa vedi

Parse error dopo un `alt` con una condizione lunga

Perché

Un a capo dentro la condizione del blocco. La condizione di `alt`, `opt` o `loop` deve stare su una riga sola; se la spezzi, la seconda metà viene interpretata come un messaggio e non combacia con niente.

Soluzione

Tieni la condizione su una riga. Se è troppo lunga, accorciala e sposta il dettaglio in una nota.

Sbagliato

sequenceDiagram
    alt Il cliente ha saldo
    sufficiente sul conto
        A-->>B: OK
    end

Corretto

sequenceDiagram
    alt Il cliente ha saldo sufficiente
        A-->>B: OK
    end
    Note over A,B: Il saldo è verificato sul limite giornaliero

Cosa vedi

Viene disegnato, ma compare un partecipante che non hai dichiarato

Perché

Un refuso nel nome di un partecipante. Mermaid crea il partecipante la prima volta che ne incontra il nome, quindi `Spedizione` e `Spedizone` sono due colonne distinte e niente lo segnala. In italiano la fonte più comune sono gli accenti e le doppie: `Attività` scritto una volta `Attivita` produce una colonna in più.

Soluzione

Dichiara i partecipanti con `participant` all'inizio. Non impedisce il refuso, ma rende visibili quali nomi siano quelli giusti, e la colonna di troppo salta all'occhio.

Sbagliato

sequenceDiagram
    Ordine->>Spedizione: Prepara il collo
    Spedizone-->>Ordine: Collo pronto

Corretto

sequenceDiagram
    participant O as Ordine
    participant S as Spedizione
    O->>S: Prepara il collo
    S-->>O: Collo pronto

Cosa vedi

Viene disegnato, ma l'ordine delle colonne non è quello che volevi

Perché

Non hai dichiarato i partecipanti. Senza dichiarazione l'ordine lo stabilisce la prima comparsa di ogni nome, quindi un messaggio aggiunto in cima al diagramma può ridisporre tutte le colonne e far incrociare le frecce. Il diagramma resta corretto, ma si legge molto peggio.

Soluzione

Dichiara tutti i partecipanti in testa, nell'ordine in cui vuoi vederli.

Sbagliato

sequenceDiagram
    Banca-->>Gateway: Autorizzato
    Cliente->>Negozio: Conferma l'ordine
    Negozio->>Gateway: Richiedi autorizzazione

Corretto

sequenceDiagram
    participant Cliente
    participant Negozio
    participant Gateway
    participant Banca
    Cliente->>Negozio: Conferma l'ordine
    Negozio->>Gateway: Richiedi autorizzazione
    Gateway->>Banca: Inoltra la transazione
    Banca-->>Gateway: Autorizzato

Note sul disegno

Misurato su Mermaid 11.12.2, la versione che usa questo sito. Il diagramma di sequenza si comporta diversamente dagli altri in due punti precisi.

La larghezza la decidono i partecipanti, non i messaggi

Misurato: due partecipanti danno un viewBox largo 450 pixel, sei ne danno 1250, cioè circa 200 pixel per ogni colonna aggiunta, indipendentemente dal contenuto dei messaggi. I messaggi aggiungono solo altezza, circa 46 pixel ciascuno. Con una riserva: se l'etichetta di un messaggio è più larga della larghezza minima della colonna, allarga davvero il diagramma — la stessa coppia di partecipanti è passata da 450 a 603 pixel solo perché il testo di un messaggio si era allungato. In italiano le etichette sono naturalmente lunghe, quindi succede prima che in inglese.

L'unico tipo con l'origine del viewBox negativa

I diagrammi di sequenza escono con un viewBox che parte da `-50 -10` e non da `0 0`. Non è un difetto: Mermaid riserva quel margine ai riquadri dei partecipanti. Conta solo se elabori l'SVG con strumenti tuoi, perché qualunque calcolo che assuma origine zero taglia la prima colonna.

Qui l'esportazione PNG è esatta

A differenza del diagramma di flusso e dei diagrammi di classi, di stati ed ER, il diagramma di sequenza disegna le etichette come testo SVG semplice e non dentro un `<foreignObject>`. Per questo si lascia rasterizzare direttamente: il PNG esportato corrisponde a ciò che vedi a schermo, senza un ridisegno intermedio e senza scarti di composizione.

Un partecipante dichiarato e non usato viene disegnato lo stesso

Un `participant` che non invia né riceve alcun messaggio compare nel diagramma con una colonna vuota. A volte è voluto, per mostrare qualcuno che esiste ma non prende parte a questo flusso. Più spesso è il residuo di un partecipante a cui è stato tolto l'ultimo messaggio dimenticando di togliere anche la dichiarazione.

Il tema cambia i colori, mai la geometria

Lo stesso diagramma in tema chiaro e in tema scuro dà un viewBox identico, quindi le colonne non si spostano e i blocchi non cambiano dimensione al cambio di tema.

Quando conviene un altro diagramma

Se il partecipante è uno solo, non c'è nessuna sequenza da mostrare. Un diagramma con una colonna sola e frecce verso sé stesso è un diagramma di flusso scritto in modo scomodo.

Se vuoi descrivere gli stati attraversati da una cosa e non la conversazione fra più parti, usa il diagramma di stati. Il segnale è netto: quando ti ritrovi a scrivere più volte lo stesso messaggio con condizioni diverse, quello che hai davanti è una macchina a stati.

E se lo scambio supera la quindicina di messaggi, dividilo. Un diagramma di sequenza da sessanta messaggi è tecnicamente corretto e umanamente inservibile; quasi sempre si legge meglio come tre diagrammi, uno per fase, collegati da una nota.

Altri tipi di diagramma

Scritto da Dominik Malsch · Ultimo aggiornamento: 8 settembre 2026

Apri l'editor →