🔀 Mermaid

Diagramma di flusso

Mappa qualsiasi processo, decisione o algoritmo

Apri questo esempio nell’editor Generane uno con l’IA

Che cos’è un Diagramma di flusso?

Un diagramma di flusso mostra i passaggi di un processo e le decisioni tra di essi. È il diagramma più universale: flussi di onboarding, algoritmi, catene di approvazione, guide alla risoluzione dei problemi — se ci sono passaggi e scelte, un diagramma di flusso può mostrarlo.

I diagrammi di flusso compaiono ovunque un processo debba essere condiviso prima di essere costruito: RFC, runbook, documenti di onboarding, script di supporto. Il loro punto forte sono le ramificazioni — ogni percorso che una richiesta può prendere, compresi quelli che nessuno aveva previsto. Il loro limite sono il tempo e la responsabilità: dicono che cosa succede dopo, mai chi lo fa né quanto dura. Aggiungi un subgraph per team, oppure cambia tipo di diagramma.

Esempio dal vivo

Codice Mermaid

flowchart TD
    A([Start]) --> B{Payment valid?}
    B -->|Yes| C[Reserve stock]
    B -->|No| D[Show error]
    C --> E{In stock?}
    E -->|Yes| F[Confirm order]
    E -->|No| G[Notify customer]
    F --> H([Done])
    D --> H
    G --> H

Esempio dal vivo

Quando usarlo

Documentare i processi aziendali e i flussi di approvazione

Progettare algoritmi e logica di gestione degli errori prima di scrivere codice

Spiegare risoluzioni dei problemi e alberi decisionali ai team di supporto

Errori frequenti

Un nodo chiamato end blocca il parsing

La parola end chiude un subgraph: un nodo che la usa come identificatore produce un errore di parsing, non un avviso. Cambia l’id del nodo e sposta la parola nell’etichetta: done([End]).

Parentesi senza virgolette in un’etichetta

A[Pay (card)] fallisce, perché Mermaid legge la parentesi interna come un altro delimitatore di forma. Racchiudi l’intera etichetta tra virgolette doppie — A["Pay (card)"] — soluzione valida anche per virgolette, cancelletti e punti e virgola.

Un arco passante annulla la direction

direction LR dentro un subgraph viene ignorata appena un arco parte da uno dei suoi nodi o vi arriva: il riquadro torna alla direzione del genitore. Punta invece l’arco sull’id del subgraph e la direzione interna sopravvive.

Sintassi di base

.mmd

flowchart TD
    A[Rectangle] --> B{Decision}
    B -->|Yes| C([Rounded])
    B -->|No| D[(Database)]

flowchart LR
La prima riga fissa la direzione del layout: TD o TB dall’alto in basso, LR da sinistra a destra, BT e RL nel verso opposto. Le catene lunghe si leggono meglio in LR.
B -->|Yes| C B -.->|timeout| D
Un’etichetta tra barre verticali spiega perché si prende un ramo. Le frecce punteggiate segnalano i percorsi eccezionali, quelle spesse scritte ==> il percorso nominale.
A["Pay (card)"] --> B{{Route}}
Le parentesi scelgono la forma: [] rettangolo, {} decisione, () smussato, {{}} esagono, [()] database. Metti tra virgolette ogni etichetta che contiene parentesi o altra punteggiatura Mermaid.
subgraph payments [Payment service] direction LR P1 --> P2 end
Un subgraph disegna un riquadro etichettato attorno a nodi correlati — un servizio, un team, una fase. La sua riga direction permette a quel riquadro di svilupparsi in orizzontale mentre la pagina scorre in verticale.

Domande su questo diagramma

Quando dovrei usare un diagramma di flusso invece di un diagramma di sequenza?

Usa un diagramma di flusso per la logica di un processo (passaggi e decisioni). Usa un diagramma di sequenza quando più attori o sistemi si scambiano messaggi nel tempo.

L’IA può generare un diagramma di flusso da una descrizione testuale?

Sì — descrivi il processo in linguaggio naturale («l’utente si registra, verifica l’email, poi…») e Mermaid Studio genera il diagramma di flusso completo, pronto da modificare.

GitHub renderizza i diagrammi di flusso Mermaid in un README?

Sì. Metti il codice in un blocco di codice con il tag mermaid e GitHub lo renderizza in README, issue e pull request; GitLab e Notion fanno lo stesso. Per gli strumenti senza supporto nativo, esporta in SVG o PNG.

Perché Mermaid dispone i nodi in un ordine che non ho scelto?

Il layout è calcolato, non scritto: la sintassi non contiene coordinate. Puoi influenzarlo cambiando la direzione, raggruppando i nodi in subgraph, riordinando le dichiarazioni degli archi o aggiungendo un collegamento invisibile (A ~~~ B) per spingere un nodo più in basso.

Qual è la differenza tra graph e flowchart in Mermaid?

Entrambe le parole chiave funzionano ancora in v11. graph è quella originale; flowchart punta al renderer più recente ed è quella su cui sono scritte la documentazione e le forme introdotte di recente. Per qualsiasi diagramma nuovo, usa flowchart.

Come coloro riquadri specifici in un diagramma di flusso?

Due modi: style A fill:#eef,stroke:#66f per un singolo nodo, oppure classDef warn fill:#fee seguito da class B,C warn per riutilizzare lo stesso stile su più nodi. Entrambi fanno parte del sorgente, quindi i colori sopravvivono all’esportazione in PNG e SVG.

Diagramma di flusso o un altro tipo di diagramma?

Diagramma di flusso o diagramma degli stati?

Chiediti che cosa sono i riquadri. Se sono azioni — verbi che qualcuno esegue — serve un diagramma di flusso. Se sono condizioni in cui lo stesso oggetto attende un evento, serve un diagramma degli stati. Il ciclo di vita di un ordine è fatto di stati; l’approvazione attorno a esso è un flusso.

Diagramma di flusso o mappa mentale?

Una mappa mentale è un albero rigido: una sola radice, un solo genitore per nodo, nessuna etichetta sui rami, nessun ciclo. Nel momento in cui due rami devono convergere, o una freccia ha bisogno di una condizione scritta sopra, la mappa mentale non basta più.

Esplora gli altri tipi di diagrammi

💬 Diagramma di sequenza 🧩 Diagramma delle classi 🗄️ Diagramma entità-relazione 🔄 Diagramma degli stati 📅 Diagramma di Gantt 🥧 Grafico a torta 🧠 Mappa mentale 🌿 Grafo Git 🕰️ Linea temporale 🚶 Percorso utente 🎯 Grafico a quadranti

Crea ora il tuo Diagramma di flusso

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

Apri Mermaid Studio