Diagrammi di stato
Rappresenta le transizioni di stato nei sistemi o nelle applicazioni. Ottimi per modellare stati del ciclo di vita e flussi di lavoro.
Cos'è Diagrammi di stato?
I diagrammi di stato, noti anche come diagrammi a macchina di stato, visualizzano i diversi stati in cui un oggetto o sistema può trovarsi e come transita tra gli stati in risposta agli eventi. Sono essenziali per modellare il comportamento del ciclo di vita, i flussi di lavoro e la logica condizionale complessa. Ogni stato rappresenta una condizione stabile, mentre le transizioni mostrano i trigger che causano i cambiamenti di stato.
Modifica e anteprima
Costruisci un Diagrammi di stato con la sintassi Mermaid e visualizza le modifiche istantaneamente.
Example
State diagram example
A Mermaid state diagram for a diagram moving from draft to preview, edit, and export.
Mermaid code
stateDiagram-v2
[*] --> Draft
Draft --> Preview: render
Preview --> Editing: update code
Preview --> Exported: download PNG
Editing --> Preview: render again
Exported --> [*]Casi d'uso comuni
Gestione dello stato dell'applicazione
Modella gli stati dell'interfaccia utente, i flussi di validazione dei form e le modalità dell'applicazione. Essenziale per progettare macchine di stato nei framework frontend come React o Vue.
Modellazione dei flussi di lavoro
Progetta flussi di lavoro di approvazione, stati di elaborazione degli ordini e gestione del ciclo di vita dei ticket. Mappa le transizioni di stato e le condizioni di guardia per i processi aziendali.
Progettazione di protocolli
Visualizza gli stati dei protocolli di rete, i cicli di vita delle connessioni e le macchine di stato delle comunicazioni. Cruciale per i sistemi embedded e la programmazione di dispositivi IoT.
Sviluppo di videogiochi
Modella gli stati dei personaggi, le modalità di gioco e la progressione dei livelli. Progetta macchine a stati finiti per il comportamento dell'IA e le meccaniche di gioco.
Funzionalità principali
Tipi di stato
Supporto per stati semplici, stati composti e stati speciali come iniziale, finale e pseudostati di scelta.
Guardie di transizione
Definisci transizioni condizionali con condizioni di guardia e azioni che vengono eseguite durante i cambiamenti di stato.
Stati nidificati
Crea macchine di stato gerarchiche con stati padre e figlio per modellare comportamenti complessi.
Stati concorrenti
Modella macchine di stato parallele e regioni ortogonali per sistemi con comportamento concorrente.
Migliori pratiche
Inizia semplice
Inizia con gli stati di alto livello e perfeziona gradualmente. Usa gli stati composti per nascondere la complessità fino a quando non è necessaria.
Nomina gli stati come condizioni
Usa aggettivi o participi passati (es. 'Attivo', 'Sospeso', 'Completato') anziché verbi.
Documenta le transizioni
Etichetta tutte le transizioni con eventi, condizioni di guardia e azioni. Ogni freccia dovrebbe raccontare una storia chiara.
Evita l'esplosione degli stati
Se hai troppi stati, cerca pattern per combinarli o usa variabili di stato al loro posto.
Esplora altri tipi di diagramma
Diagrammi di flusso
Visualizza processi, flussi di lavoro e algoritmi con nodi e frecce direzionali. Perfetti per processi aziendali e alberi decisionali.
Diagrammi di sequenza
Documenta le interazioni tra diversi attori o sistemi nel tempo. Ideali per la documentazione API e la progettazione di sistemi.
Diagrammi delle classi
Modella sistemi orientati agli oggetti con classi, attributi e relazioni. Essenziali per la pianificazione dell'architettura software.
Diagrammi di Gantt
Pianifica e monitora le tempistiche dei progetti con attività e dipendenze. Perfetti per la gestione dei progetti e la pianificazione.
Diagrammi ER
Progetta schemi di database con entità e relazioni. Ideali per la modellazione e la documentazione dei database.
Percorso utente
Mappa le esperienze e le interazioni degli utenti attraverso i punti di contatto. Eccellente per il design UX e la mappatura del percorso cliente.
Grafi Git
Visualizza le strategie di branching Git e le cronologie dei commit. Utili per spiegare i flussi di lavoro del controllo versione.
Mappe mentali
Organizza idee, fai brainstorming di concetti e crea strutture visive gerarchiche. Perfette per la pianificazione e la mappatura delle conoscenze.
Grafici a torta
Visualizza distribuzioni proporzionali di dati con grafici circolari. Ideali per mostrare percentuali e quote di mercato.
Linee temporali
Visualizza eventi cronologici e traguardi lungo un asse temporale. Ottimi per cronologie di progetto e roadmap.
Board Kanban
Organizza le attività in colonne che rappresentano le fasi del flusso di lavoro. Perfetto per la gestione agile e il monitoraggio delle attività.
Grafici a quadranti
Posiziona elementi su una griglia a due assi per confrontare e prioritizzare. Ideale per la prioritizzazione delle funzionalità e l'analisi strategica.
Diagrammi di Sankey
Visualizza le quantità di flusso tra nodi con frecce proporzionali. Perfetti per flussi energetici, allocazione di budget e funnel di conversione.
Grafici XY
Crea grafici a barre e grafici a linee con assi personalizzabili. Ideali per la visualizzazione dei dati e l'analisi delle tendenze.
Diagrammi a blocchi
Costruisci layout strutturati con blocchi disposti in colonne e righe. Ottimi per architetture di sistema e panoramiche dei componenti.
Diagrammi di architettura
Progetta architetture cloud e di sistema con icone di servizio e connessioni. Perfetti per la documentazione dell'infrastruttura.
Diagrammi di pacchetto
Visualizza le strutture dei pacchetti dei protocolli di rete con layout dei campi a livello di bit. Essenziali per la documentazione dei protocolli di rete.