Būsenų diagrama
Mermaid būsenų diagramos sintaksė suderinama su plantUml naudojama sintakse; tai palengvins naudotojams dalytis diagramomis tarp mermaid ir plantUml.
Kopijuoti
Įterpti
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Senasis redaktorius:
Kopijuoti
Įterpti
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Naujasis redaktorius:
Būsenų diagramoje sistema aprašoma pagal būsenas ir tai, kaip viena būsena perėjimu pakeičiama kita. Aukščiau pateiktoje pavyzdinėje diagramoje parodytos trys būsenos: nejudri, judanti ir susidūrusi. Pradedama nuo nejudrios būsenos, iš nejudrios būsenos galima pereiti į judančią. Iš judančios būsenos galima grįžti į nejudrią arba pereiti į susidūrusią. Nėra perėjimo iš nejudrios būsenos į susidūrusią. (Jei liekate nejudrūs, nesusiduriate.)
状态
Būsenas galima deklaruoti įvairiais būdais; paprasčiausias – apibrėžti būseną vien tik su id:
Kopijuoti
Įterpti
stateDiagram-v2
stateId
Kitas būdas – naudoti state sintaksę ir pridėti tokį aprašymą:
Kopijuoti
Įterpti
stateDiagram-v2
state "This is a state description" as s2
Dar vienas būdas apibrėžti būseną su aprašymu – pirmiausia apibrėžti būsenos ID, o tada pridėti dvitaškį ir aprašymą:
Kopijuoti
Įterpti
stateDiagram-v2
s2 : This is a state description
Perėjimas
Perėjimas – tai jungiamoji linija, kai viena būsena pereina į kitą; žymima teksto rodykle "-->".
Kai apibrėžiate perėjimą tarp dviejų būsenų, o būsenos dar neapibrėžtos, neapibrėžtos būsenos bus apibrėžtos naudojant perėjime esantį id. Vėliau galite pridėti aprašymą būsenoms, apibrėžtoms šiuo būdu.
Kopijuoti
Įterpti
stateDiagram-v2
s1 --> s2
Prie perėjimo galima pridėti teksto, apibūdinančio, ką jis reiškia:
Kopijuoti
Įterpti
stateDiagram-v2
s1 --> s2: A transition
Pradžia ir pabaiga
Yra dvi specialios būsenos, žyminčios diagramos pradžią ir pabaigą. Šios dvi būsenos žymimos [*] sintakse; perėjimo į šią būseną kryptis nusako, ar tai pradžios, ar pabaigos būsena.
Kopijuoti
Įterpti
stateDiagram-v2
[*] --> s1
s1 --> [*]
Sudėtinė būsena
Naudojant būsenų diagramas realiame pasaulyje dažnai susiduriama su daugiamatėmis diagramomis, nes viena būsena gali turėti kelias vidines būsenas; tai vadinama sudėtine būsena.
Norėdami apibrėžti sudėtinę būseną, turite naudoti state sintaksę, po kurios eina id, o riestiniuose skliaustuose {} parašyti sudėtinės būsenos turinį. Sudėtinę būseną galite pavadinti atskiroje eilutėje, kaip ir apibrėždami paprastą būseną. Žr. pavyzdį žemiau:
Kopijuoti
Įterpti
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Galite dirbti keliais lygiais:
Kopijuoti
Įterpti
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Taip pat galite apibrėžti perėjimus tarp sudėtinių būsenų:
Kopijuoti
Įterpti
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Pastaba: negalima apibrėžti perėjimų tarp vidinių būsenų, priklausančių skirtingoms sudėtinėms būsenoms.
Pasirinkimas
Kartais reikia imituoti pasirinkimą tarp dviejų ar daugiau kelių; tai galima padaryti naudojant <<choice>>.
Kopijuoti
Įterpti
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Išsišakojimas / sujungimas
Naudojant <<fork>> <<join>> diagramoje galima nurodyti išsišakojimą / sujungimą.
Kopijuoti
Įterpti
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 --> [*]
Pastaba
Būsenų diagramoje komentarai leidžia aiškiau reikšti mintis; komentarą galima dėti mazgo dešinėje arba kairėje.
Kopijuoti
Įterpti
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.
Lygiagretumas
Kaip ir plantUml atveju, lygiagretumą galite nurodyti naudodami brūkšnelių simbolį --.
Kopijuoti
Įterpti
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
}
Diagramos krypties nustatymas
Būsenų diagramos atveju galite naudoti krypties sakinį diagramos atvaizdavimo krypčiai nustatyti, kaip parodyta šiame pavyzdyje.
Kopijuoti
Įterpti
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Komentaras
Būsenų diagramoje galima įrašyti komentarus; redaktorius juos ignoruos. Komentaras turi prasidėti dvigubu procento ženklu (%%); visas tekstas nuo šios žymos iki kito eilutės lūžio laikomas komentaru, įskaitant bet kokią diagramos sintaksę. Komentaras gali užimti atskirą eilutę arba būti sakinio pabaigoje.
Kopijuoti
Įterpti
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Stiliaus nustatymas naudojant classDefs
Dabartiniai būsenų diagramos classDef apribojimai:
1. Negalima taikyti pradžios ar pabaigos būsenai
2. Negalima taikyti sudėtinei būsenai arba sudėtinės būsenos viduje
Galite naudoti classDef sintaksę (t. y. class definition trumpinį, kuriame „class“ yra panašus į CSS klasę) stiliui apibrėžti. Po classDef eina stiliaus pavadinimas, o tada viena ar daugiau „savybė-reikšmė“ porų; kiekvieną „savybė-reikšmė“ sudaro teisėtas CSS savybės pavadinimas, dvitaškis (:) ir atitinkama reikšmė.
Toliau pateikiamas classDef pavyzdys su viena „savybė-reikšmė“ pora:
Kopijuoti
Įterpti
classDef movement font-style:italic;
- Stiliaus pavadinimas yra movement
- Vienintelė savybė yra font-style, o reikšmė – italic
Jei norite turėti kelias „savybė-reikšmė“ poras, tarp kiekvienos jų galite dėti kablelį (,).
Toliau pateikiamas pavyzdys su trimis „savybė-reikšmė“ poromis:
Kopijuoti
Įterpti
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Stiliaus pavadinimas yra badBadEvent
- Pirmoji savybė yra fill, o jos reikšmė – #f00
- Antroji savybė yra color, o jos reikšmė – white
- Trečioji savybė yra font-weight, o jos reikšmė – bold
- Ketvirtoji savybė yra stroke-width, o jos reikšmė – 2px
- Penktoji savybė yra stroke, o jos reikšmė – yellow
classDef stiliaus taikymas būsenai
Yra du būdai pritaikyti classDef stilių būsenai:
- Naudojant class sintaksę, classDef stilius pritaikomas vienai ar daugiau būsenų viename sakinyje
- Naudojant ::: operatorių, classDef stilius pritaikomas tada, kai būsena naudojama perėjimo sakinyje (pavyzdžiui, su rodykle į / iš kitos būsenos)
1. class sakinys
class sakinys praneša Mermaid, kad nurodytą classDef reikia pritaikyti vienai ar daugiau klasių. Forma:
Kopijuoti
Įterpti
class [one or more state names, separated by commas] [name of a style defined with classDef]
Toliau pateikiamas pavyzdys, kaip badBadEvent stilius pritaikomas būsenai, pavadintai Crash:
Kopijuoti
Įterpti
class Crash badBadEvent
Toliau pateikiamas pavyzdys, kaip movement stilius pritaikomas dviem būsenoms – Moving ir Crash:
Kopijuoti
Įterpti
class Moving,Crash movement
Štai pavyzdys. Atkreipkite dėmesį, kad Crash būsenai pritaikyti du classDef stiliai: movement ir badBadEvent
Kopijuoti
Įterpti
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. Stiliaus taikymas būsenai naudojant ::: operatorių
Galite naudoti operatorių ::: classDef stiliui būsenai pritaikyti. Sintaksė:
Kopijuoti
Įterpti
[state]:::[style name]
Galite jį pritaikyti sakinyje, kuriame naudojama klasė; tai apima pradžios ir pabaigos būsenas. Pavyzdžiui:
Kopijuoti
Įterpti
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 --> [*]
Tarpai būsenos pavadinime
Pirmiausia galima apibrėžti būseną naudojant id, o vėliau nurodyti tą id, kad prie būsenos pridėtumėte tarpų.
Toliau pateiktame pavyzdyje yra būsena, kurios ID yra yswsii, o aprašymas – „Your state with spaces in it“. Po apibrėžimo yswsii naudojama pirmajame diagramos perėjime ([*] --> yswsii), taip pat naudojama pereinant į YetAnotherState (yswsii --> YetAnotherState). yswsii buvo stilizuota taip, kad skirtųsi nuo kitų būsenų.
Kopijuoti
Įterpti
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 --> [*]
