🔄 Mermaid

Diagramma degli stati

Cattura ogni stato e transizione di un sistema

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

Che cos’è un Diagramma degli stati?

Un diagramma degli stati mostra gli stati in cui può trovarsi un oggetto e gli eventi che lo fanno passare dall’uno all’altro: cicli di vita degli ordini, workflow documentali, stati dell’interfaccia, gestione delle connessioni. Essenziale ogni volta che «in che stato siamo?» conta.

Esempio dal vivo

Codice Mermaid

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Draft : request changes
    Review --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Archived --> [*]

Esempio dal vivo

Quando usarlo

Modellare i cicli di vita di ordini, ticket o documenti

Progettare gli stati dei componenti UI e delle connessioni

Specificare le regole di business attorno alle transizioni di stato

Sintassi di base

.mmd

stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> [*] : stop

Domande su questo diagramma

Qual è la differenza con un diagramma di flusso?

Un diagramma di flusso segue un processo dall’inizio alla fine. Un diagramma degli stati descrive tutti gli stati possibili di una cosa e quali eventi causano le transizioni — inclusi cicli e stati di errore.

Mermaid supporta gli stati annidati?

Sì — stateDiagram-v2 supporta stati compositi (annidati), fork, join, scelte e note per macchine a stati realistiche.

Esplora gli altri tipi di diagrammi

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

Crea ora il tuo Diagramma degli stati

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

Apri Mermaid Studio