Diagram stanj
Sintaksa diagrama stanj Mermaid je združljiva s sintakso, ki se uporablja v plantUml, kar uporabnikom olajša deljenje diagramov med mermaid in plantUml.
Kopiraj
Vdelava
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Stari urejevalnik:
Kopiraj
Vdelava
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Novi urejevalnik:
V diagramu stanj je sistem opisan s stanji in načinom, kako se eno stanje s prehodom spremeni v drugo. Zgornji primer diagrama prikazuje tri stanja: mirovanje, premikanje in trčenje. Začnete v stanju mirovanja, iz katerega lahko preidete v stanje premikanja. Iz stanja premikanja se lahko vrnete v stanje mirovanja ali preidete v stanje trčenja. Ni prehoda iz stanja mirovanja v stanje trčenja. (Če ostanete pri miru, ne trčite.)
状态
Stanja lahko določite na več načinov; najpreprostejši je, da stanje definirate samo z id:
Kopiraj
Vdelava
stateDiagram-v2
stateId
Drug način je uporaba sintakse state z dodanim naslednjim opisom:
Kopiraj
Vdelava
stateDiagram-v2
state "This is a state description" as s2
Drug način za definiranje stanja z opisom je, da najprej definirate ID stanja in nato dodate dvopičje ter opis:
Kopiraj
Vdelava
stateDiagram-v2
s2 : This is a state description
Prehod
Prehod je povezovalna črta, ko eno stanje preide v drugo, in je predstavljen z besedilno puščico "-->".
Ko definirate prehod med dvema stanjema in stanji še nista definirani, se nedefinirani stanji definirata z id iz prehoda. Pozneje lahko stanjem, definiranim na ta način, dodate opis.
Kopiraj
Vdelava
stateDiagram-v2
s1 --> s2
Prehodu lahko dodate besedilo, ki opisuje, kaj predstavlja:
Kopiraj
Vdelava
stateDiagram-v2
s1 --> s2: A transition
Začetek in konec
Obstajata dve posebni stanji, ki predstavljata začetek in ustavitev diagrama. Ti stanji se predstavita s sintakso [*], smer prehoda v to stanje pa določa, ali je začetno ali končno stanje.
Kopiraj
Vdelava
stateDiagram-v2
[*] --> s1
s1 --> [*]
Sestavljeno stanje
Pri uporabi diagramov stanj v resničnem svetu pogosto naletite na večdimenzionalne diagrame, saj ima lahko eno stanje več notranjih stanj; to imenujemo sestavljeno stanje.
Za definiranje sestavljenega stanja morate uporabiti sintakso state, ki ji sledi id, telo sestavljenega stanja pa zapišete v zavitih oklepajih {}. Sestavljeno stanje lahko poimenujete v ločeni vrstici, tako kot definirate preprosto stanje. Glejte spodnji primer:
Kopiraj
Vdelava
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Delujete lahko na več ravneh:
Kopiraj
Vdelava
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Definirate lahko tudi prehode med sestavljenimi stanji:
Kopiraj
Vdelava
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Opomba: ni mogoče definirati prehodov med notranjimi stanji, ki pripadajo različnim sestavljenim stanjem.
Izbira
Včasih morate simulirati izbiro med dvema ali več potmi; to lahko storite z <<choice>>.
Kopiraj
Vdelava
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Razcep/združitev
Z <<fork>> <<join>> lahko v diagramu določite razcep/združitev.
Kopiraj
Vdelava
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 --> [*]
Opomba
Uporaba komentarjev v diagramu stanj omogoča jasnejšo predstavitev; komentar lahko postavite na desno ali levo stran vozlišča.
Kopiraj
Vdelava
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.
Sočasnost
Tako kot v plantUml lahko sočasnost določite s simbolom pomišljaja --.
Kopiraj
Vdelava
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
}
Nastavitev smeri diagrama
Za diagram stanj lahko s stavkom za smer nastavite smer upodabljanja diagrama, kot je prikazano v tem primeru.
Kopiraj
Vdelava
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Komentar
V diagram stanj lahko vnesete komentarje, ki jih urejevalnik prezre. Komentar se mora začeti z dvojnim odstotkom (%%); vse besedilo od te oznake do naslednjega znaka za novo vrstico se obravnava kot komentar, vključno s katero koli sintakso diagrama. Komentar je lahko v svoji vrstici ali na koncu stavka.
Kopiraj
Vdelava
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Oblikovanje s classDefs
Trenutne omejitve classDef v diagramu stanj:
1. Ni ga mogoče uporabiti za začetno ali končno stanje
2. Ni ga mogoče uporabiti za sestavljeno stanje ali znotraj sestavljenega stanja
Za definiranje slogov lahko uporabite sintakso classDef (okrajšava za class definition, pri čemer je "class" podoben razredu v CSS). Za classDef sledi ime sloga, nato en ali več parov 'lastnost-vrednost', vsak par 'lastnost-vrednost' pa sestavljajo veljavno ime lastnosti CSS, dvopičje (:) in ustrezna vrednost.
Spodaj je primer classDef z le enim parom 'lastnost-vrednost':
Kopiraj
Vdelava
classDef movement font-style:italic;
- Ime sloga je movement
- Edina lastnost je font-style, vrednost pa italic
Če želite imeti več parov 'lastnost-vrednost', lahko med vsak par 'lastnost-vrednost' postavite vejico (,).
Spodaj je primer s tremi pari 'lastnost-vrednost':
Kopiraj
Vdelava
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Ime sloga je badBadEvent
- Prva lastnost je fill, njena vrednost pa #f00
- Druga lastnost je color, njena vrednost pa white
- Tretja lastnost je font-weight, njena vrednost pa bold
- Četrta lastnost je stroke-width, njena vrednost pa 2px
- Peta lastnost je stroke, njena vrednost pa yellow
Uporaba sloga classDef na stanje
Slog classDef lahko na stanje uporabite na dva načina:
- Uporaba sintakse class za uporabo sloga classDef na eno ali več stanj v enem stavku
- Uporaba operatorja ::: za uporabo sloga classDef, ko je stanje uporabljeno v stavku prehoda (na primer s puščico, ki kaže v/iz drugega stanja)
1. Stavek class
Stavek class pove Mermaidu, da določen classDef uporabi na enem ali več razredih. Oblika je:
Kopiraj
Vdelava
class [one or more state names, separated by commas] [name of a style defined with classDef]
Sledi primer uporabe sloga badBadEvent na stanju z imenom Crash:
Kopiraj
Vdelava
class Crash badBadEvent
Sledi primer uporabe sloga movement na stanjih Moving in Crash:
Kopiraj
Vdelava
class Moving,Crash movement
Tu je primer. Upoštevajte, da sta na stanje Crash uporabljena dva sloga classDef: movement in badBadEvent
Kopiraj
Vdelava
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. Uporaba operatorja ::: za uporabo sloga na stanje
Slog classDef lahko na stanje uporabite z operatorjem :::. Sintaksa je:
Kopiraj
Vdelava
[state]:::[style name]
Uporabite ga lahko v stavku, ki uporablja razred, kar vključuje začetno in končno stanje. Na primer:
Kopiraj
Vdelava
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 --> [*]
Presledki v imenu stanja
Stanje lahko najprej definirate z id in nato pozneje sklicujete na ta id, da stanju dodate presledke.
V spodnjem primeru je stanje z ID yswsii in opisom ''Your state with spaces in it'. Po definiranju je yswsii uporabljen v prvem prehodu diagrama ([*] --> yswsii) in tudi pri prehodu v YetAnotherState (yswsii --> YetAnotherState). yswsii je oblikovan tako, da se razlikuje od drugih stanj.
Kopiraj
Vdelava
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 --> [*]
