Generatore di diagrammi di stato
Modella una macchina di stato come testo e guardala visualizzarsi. Definisci stati, transizioni ed eventi con stateDiagram-v2 di Mermaid — cicli di vita degli ordini, stati di connessione, flussi di approvazione — tutto sul tuo dispositivo.
One step per line. Indent two spaces to branch beneath the line above.
Stati, transizioni e gli eventi tra di loro
Un diagramma di stato risponde "cosa può essere questa cosa, e come si sposta tra questi stati?" Lo stateDiagram-v2 di Mermaid mappa direttamente su questo: "[*]" contrassegna l'inizio e la fine, ogni "A --> B: event" è una transizione etichettata, e uno "state Name { … }" composito annida sotto-stati per comportamento più ricco. È il modo più chiaro per fissare un ciclo di vita dell'ordine, un protocollo di connessione, o il percorso di approvazione di un documento.
Scriverlo come testo significa che il modello rimane onesto. Aggiungi uno stato, nomina l'evento che lo raggiunge, risemina — il layout si ridistribuisce automaticamente e il diagramma non si allontana mai dalle regole che documenta.
Da un enum di stato a un'immagine
Se il tuo codice ha già un campo di stato — pending, paid, shipped, cancelled — un diagramma di stato trasforma quell'enum in qualcosa che un intero team può ragionare, incluse le transizioni che il tuo codice consente e quelle che vietà. Etichetta ogni freccia con l'evento o il metodo che la attiva in modo che il diagramma legga come la spec.
Rilascia il blocco Mermaid in un documento di design o una pull request e i revisori possono individuare una transizione mancante o un percorso impossibile prima che diventi un bug.
Domande frequenti
Come creo un diagramma di stato dal testo?
Inizia con "stateDiagram-v2", contrassegna l'inizio con "[*] --> First", quindi aggiungi transizioni come "Pending --> Paid: payment confirmed". Gli stati finali usano "Last --> [*]". Si visualizza in tempo reale ed esporta in SVG o PNG.
Come etichetto una transizione con il suo evento?
Metti il trigger dopo i due punti sulla freccia, ad esempio "Draft --> Submitted: submit". L'etichetta mostra l'evento, il metodo o la condizione che causa il cambio di stato.
Posso annidare stati (stati compositi)?
Sì — avvolgi gli stati secondari in "state Name { … }" con il loro proprio "[*] --> …" inizio. Il foglio di aiuto sopra mostra la sintassi; l'esempio del lettore multimediale dimostra uno stato Playing composito.
Qual è la differenza tra un diagramma di stato e un diagramma di flusso?
Un diagramma di flusso mostra un processo — passaggi e decisioni eseguiti una volta. Un diagramma di stato mostra gli stati che un oggetto può occupare durante la sua vita e gli eventi che lo spostano tra loro, quindi i loop alle prime stati sono normali.
Il mio diagramma di stato viene caricato da qualche parte?
No. Si visualizza nel tuo browser con Mermaid, quindi i tuoi stati, gli eventi e la logica interna non lasciano mai il dispositivo.