Diagramma degli stati
Cattura ogni stato e transizione di un sistema
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.
I diagrammi degli stati appartengono alle specifiche, dove «un ordine può tornare da rimborsato a spedito?» deve avere una risposta. Sono l’unico diagramma che rende visibili le transizioni vietate: ciò che non è disegnato non è permesso, e questo trasforma l’immagine in un piano di test. Il loro limite è la combinatoria: due macchine indipendenti nello stesso diagramma producono un prodotto cartesiano illeggibile. Separale, oppure annidale in stati compositi.
Esempio dal vivo
stateDiagram-v2
[*] --> Draft
Draft --> Review : submit
Review --> Draft : request changes
Review --> Approved : approve
Approved --> Published : publish
Published --> Archived : archive
Archived --> [*]Quando usarlo
Errori frequenti
I nomi di stato multiparola si spezzano
Waiting for payment --> Paid crea tre stati chiamati Waiting, for e payment. Dichiara lo stato una volta con state "Waiting for payment" as waiting, poi usa l’id breve waiting in ogni transizione.
Un [*] annidato non è l’inizio
Un [*] scritto dentro uno stato composito segna il punto di ingresso di quel composito, non quello del diagramma. Se tutti i [*] che hai scritto sono annidati, il diagramma non ha un ingresso e il lettore non sa da dove cominciare.
Etichette di transizione: eventi, non codice
Il testo dopo i due punti è testo libero: score > 80 viene mostrato ma mai valutato, e due transizioni possono portare condizioni contraddittorie senza che nessuno protesti. Rileggi le etichette come rileggi la prosa, non come rileggi la logica.
Sintassi di base
stateDiagram-v2
[*] --> Idle
Idle --> Active : start
Active --> [*] : stopstateDiagram-v2 direction LRUsa il renderer -v2, quello per cui è scritta la sintassi attuale. Aggiungere direction LR conviene ai cicli di vita lunghi e lineari, che altrimenti escono dal fondo della pagina.
[*] --> Draft Draft --> Review : submit[*] è il marcatore di inizio a sinistra di una freccia e lo stato finale a destra. Il testo dopo i due punti dà il nome all’evento che innesca la transizione.
state Payment { [*] --> Pending Pending --> Captured }Uno stato composito nasconde una sotto-macchina dietro un solo riquadro. Una transizione può puntare al composito stesso, che viene allora attraversato a partire dal proprio marcatore di inizio.
state gate <<choice>> gate --> Approved : score > 80Uno pseudostato di scelta ramifica su una condizione senza inventare uno stato fittizio. I marcatori <<fork>> e <<join>> fanno lo stesso per i percorsi paralleli.
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.
Un diagramma degli stati Mermaid può esprimere guardie e azioni di ingresso o di uscita?
Non formalmente. Una transizione porta una sola etichetta di testo libero, quindi una guardia come score > 80 vi si scrive come prosa e nulla la fa rispettare. Non esiste nemmeno una sintassi per entry o exit: mettile in una nota accanto allo stato.
Come mostro uno stato che torna su se stesso?
Metti lo stesso stato da entrambi i lati della freccia: Draft --> Draft : edit. Mermaid lo disegna come un cappio sul riquadro e conserva l’etichetta; e più transizioni tra la stessa coppia di stati mantengono ciascuna la propria etichetta invece di fondersi.
Posso colorare uno stato in modo diverso?
Sì. classDef bad fill:#fdd definisce uno stile e class Failed bad lo applica, così gli stati di errore o terminali risaltano. Lo stile vive nel sorgente, quindi sopravvive all’esportazione in PNG e SVG.
Come esporto un diagramma degli stati per una presentazione?
Esporta in PNG a 2× o 4× per le slide che verranno proiettate, oppure in SVG quando lo strumento lo accetta, perché l’SVG resta nitido e mantiene il testo selezionabile. Il sorgente Mermaid resta la versione che modifichi e riesporti.
Diagramma degli stati o un altro tipo di diagramma?
Diagramma degli stati o diagramma di sequenza?
Il diagramma di sequenza mostra un percorso attraverso più partecipanti; il diagramma degli stati mostra tutti i percorsi di un solo partecipante. Se la domanda interessante è «che cosa ha risposto l’API», usa una sequenza. Se è «possiamo tornare qui», usa gli stati.
Diagramma degli stati o diagramma delle classi?
Il diagramma delle classi dà a un ordine i suoi campi e le sue relazioni; il diagramma degli stati gli dà una vita. Scrivi il primo quando chiedono quali dati esistono, il secondo quando chiedono quali transizioni il codice deve rifiutare.
Crea ora il tuo Diagramma degli stati
Descrivilo in linguaggio naturale — l’IA scrive il codice Mermaid per te.
Apri Mermaid Studio