Diagramma di stato
La sintassi del diagramma di stato di Mermaid è compatibile con la sintassi usata in plantUml, il che rende più facile per gli utenti condividere diagrammi tra Mermaid e plantUml.
Copia
Incorpora
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Vecchio editor:
Copia
Incorpora
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Nuovo editor:
In un diagramma di stato, il sistema è descritto in termini di stati e di come uno stato cambia in un altro tramite transizioni. Il diagramma di esempio sopra mostra tre stati: in quiete, in movimento e in collisione. Si parte dallo stato di quiete; dallo stato di quiete è possibile passare allo stato in movimento. Dallo stato in movimento puoi tornare allo stato di quiete oppure passare allo stato in collisione. Non esiste una transizione dallo stato di quiete allo stato in collisione. (Se rimani in quiete, non vai in collisione.)
状态
Gli stati possono essere dichiarati in diversi modi; il metodo più semplice è definire uno stato con solo un id:
Copia
Incorpora
stateDiagram-v2
stateId
Un altro metodo è usare la sintassi state, aggiungendo la seguente descrizione:
Copia
Incorpora
stateDiagram-v2
state "This is a state description" as s2
Un altro modo per definire uno stato con una descrizione è definire prima l'ID dello stato, poi aggiungere i due punti e la descrizione:
Copia
Incorpora
stateDiagram-v2
s2 : This is a state description
Transizione
Una transizione è la linea di collegamento che si crea quando uno stato entra in un altro stato, indicata con la freccia testuale "-->".
Quando definisci una transizione tra due stati e gli stati non sono ancora definiti, gli stati non definiti vengono creati usando l'id presente nella transizione. Successivamente, puoi aggiungere una descrizione agli stati definiti in questo modo.
Copia
Incorpora
stateDiagram-v2
s1 --> s2
Puoi aggiungere testo a una transizione per descrivere ciò che essa rappresenta:
Copia
Incorpora
stateDiagram-v2
s1 --> s2: A transition
Inizio e fine
Ci sono due stati speciali che rappresentano l'inizio e l'arresto del diagramma. Questi due stati sono rappresentati con la sintassi [*]; la direzione della transizione verso questo stato determina se si tratta dello stato iniziale o dello stato finale.
Copia
Incorpora
stateDiagram-v2
[*] --> s1
s1 --> [*]
Stato composto
Usando i diagrammi di stato nel mondo reale, ti imbatti spesso in diagrammi multidimensionali, perché uno stato può avere più stati interni: questo è chiamato stato composto.
Per definire uno stato composto, devi usare la sintassi state seguita da un id e scrivere il corpo dello stato composto tra parentesi graffe {}. Puoi nominare lo stato composto su una riga separata, come faresti per uno stato semplice. Vedi l'esempio seguente:
Copia
Incorpora
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Puoi operare su più livelli:
Copia
Incorpora
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Puoi anche definire le transizioni tra stati composti:
Copia
Incorpora
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Nota: non è possibile definire transizioni tra stati interni appartenenti a stati composti diversi.
Scelta
A volte hai bisogno di simulare una scelta tra due o più percorsi; puoi farlo con <<choice>>.
Copia
Incorpora
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Biforcazione/Unione
Puoi usare <<fork>> <<join>> per specificare una biforcazione/unione nel diagramma.
Copia
Incorpora
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
Nota
Nei diagrammi di stato l'uso delle note consente un'espressione più chiara; puoi scegliere di posizionare la nota a destra o a sinistra del nodo.
Copia
Incorpora
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
Concorrenza
Come in plantUml, puoi specificare la concorrenza usando il simbolo del trattino --.
Copia
Incorpora
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
Impostare la direzione del diagramma
Per i diagrammi di stato, puoi usare l'istruzione di direzione per impostare la direzione di rendering del diagramma, come mostrato in questo esempio.
Copia
Incorpora
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Nota
Puoi inserire commenti in un diagramma di stato; l'editor li ignorerà. I commenti devono iniziare con il doppio segno di percentuale (%%); tutto il testo da quel marcatore fino al successivo carattere di nuova riga sarà considerato un commento, inclusa qualsiasi sintassi del diagramma. I commenti possono occupare una riga propria o essere posti alla fine di un'istruzione.
Copia
Incorpora
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Impostare lo stile con classDef
Limitazioni attuali di classDef nei diagrammi di stato:
1. Non può essere applicato allo stato iniziale o finale
2. Non può essere applicato a uno stato composto né all'interno di uno stato composto
Puoi definire gli stili usando la sintassi classDef (abbreviazione di class definition, dove "class" è simile alle classi in CSS). classDef è seguito dal nome dello stile e poi da una o più coppie 'proprietà-valore'; ogni 'proprietà-valore' è composta da un nome di proprietà CSS valido, due punti (:) e il valore corrispondente.
Di seguito è riportato un esempio di classDef con una sola 'proprietà-valore':
Copia
Incorpora
classDef movement font-style:italic;
- Il nome dello stile è movement
- L'unica proprietà è font-style, e il valore è italic
Se vuoi avere più 'proprietà-valore', puoi inserire una virgola (,) tra ciascuna 'proprietà-valore'.
Di seguito è riportato un esempio con tre 'proprietà-valore':
Copia
Incorpora
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Il nome dello stile è badBadEvent
- La prima proprietà è fill, e il suo valore è #f00
- La seconda proprietà è color, e il suo valore è white
- La terza proprietà è font-weight, e il suo valore è bold
- La quarta proprietà è stroke-width, e il suo valore è 2px
- La quinta proprietà è stroke, e il suo valore è yellow
Applicare uno stile classDef a uno stato
Esistono due modi per applicare uno stile classDef a uno stato:
- Usare la sintassi class per applicare uno stile classDef a uno o più stati in un'unica istruzione
- Usare l'operatore ::: per applicare uno stile classDef a uno stato quando viene usato in un'istruzione di transizione (ad esempio, con una freccia che punta a/da un altro stato)
1. istruzione class
L'istruzione class dice a Mermaid di applicare il classDef specificato a una o più classi. Il formato è:
Copia
Incorpora
class [one or more state names, separated by commas] [name of a style defined with classDef]
Di seguito è riportato l'esempio di applicazione dello stile badBadEvent a uno stato chiamato Crash:
Copia
Incorpora
class Crash badBadEvent
Di seguito è riportato l'esempio di applicazione dello stile movement ai due stati Moving e Crash:
Copia
Incorpora
class Moving,Crash movement
Ecco un esempio. Nota che allo stato Crash vengono applicati due stili classDef: movement e badBadEvent
Copia
Incorpora
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*]--> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
class end badBadEvent
2. Applicare uno stile a uno stato usando l'operatore :::
Puoi usare l'operatore ::: per applicare uno stile classDef a uno stato. La sintassi è:
Copia
Incorpora
[state]:::[style name]
Puoi applicarlo nelle istruzioni che usano una classe, e questo include lo stato iniziale e lo stato finale. Ad esempio:
Copia
Incorpora
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*] --> Still:::notMoving
Still --> [*]
Still --> Moving:::movement
Moving --> Still
Moving --> Crash:::movement
Crash:::badBadEvent --> [*]
Spazi nel nome dello stato
Puoi definire prima lo stato usando un id e poi fare riferimento a quell'id per aggiungere spazi allo stato.
Nell'esempio seguente c'è uno stato con ID yswsii, descritto come 'Your state with spaces in it'. Dopo la definizione, yswsii viene usato nella prima transizione del diagramma ([*] --> yswsii) e viene usato anche nella transizione verso YetAnotherState (yswsii --> YetAnotherState). yswsii è stato stilizzato per renderlo diverso dagli altri stati.
Copia
Incorpora
stateDiagram
classDef yourState font-style:italic,font-weight:bold,fill:white
yswsii: Your state with spaces in it
[*] --> yswsii:::yourState
[*] --> SomeOtherState
SomeOtherState --> YetAnotherState
yswsii --> YetAnotherState
YetAnotherState --> [*]
