Stavový diagram
Syntaxe stavového diagramu Mermaid je kompatibilní se syntaxí používanou v plantUml, což uživatelům usnadní sdílení diagramů mezi mermaid a plantUml.
Kopírovat
Vložení
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Starý editor:
Kopírovat
Vložení
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Nový editor:
Ve stavovém diagramu je systém popsán pomocí stavů a toho, jak přechodem z jednoho stavu vzniká jiný stav. Výše uvedený příklad diagramu zobrazuje tři stavy: nehybný, pohybující se a srážka. Začínáte ve stavu nehybný, ze stavu nehybný můžete přejít do stavu pohybující se. Ze stavu pohybující se se můžete vrátit do stavu nehybný nebo přejít do stavu srážka. Neexistuje žádný přechod ze stavu nehybný do stavu srážka. (Pokud zůstanete nehybní, nedojde ke srážce.)
状态
Stavy lze deklarovat několika způsoby; nejjednodušší je definovat stav pouze pomocí id:
Kopírovat
Vložení
stateDiagram-v2
stateId
Dalším způsobem je použít syntaxi state a přidat následující popis:
Kopírovat
Vložení
stateDiagram-v2
state "This is a state description" as s2
Dalším způsobem, jak definovat stav s popisem, je nejprve definovat ID stavu a poté přidat dvojtečku a popis:
Kopírovat
Vložení
stateDiagram-v2
s2 : This is a state description
Přechod
Přechod je spojovací čára, když jeden stav přechází do jiného, vyjádřená textovou šipkou "-->".
Když definujete přechod mezi dvěma stavy a stavy ještě nejsou definovány, nedefinované stavy budou definovány pomocí id v přechodu. Poté můžete takto definovaným stavům přidat popis.
Kopírovat
Vložení
stateDiagram-v2
s1 --> s2
Do přechodu lze přidat text popisující, co představuje:
Kopírovat
Vložení
stateDiagram-v2
s1 --> s2: A transition
Start a konec
Existují dva speciální stavy představující začátek a zastavení diagramu. Tyto dva stavy se vyjadřují syntaxí [*] a směr jejich přechodu do tohoto stavu určuje, zda jde o počáteční nebo koncový stav.
Kopírovat
Vložení
stateDiagram-v2
[*] --> s1
s1 --> [*]
Složený stav
Při používání stavových diagramů v reálném světě se často setkáte s vícerozměrnými diagramy, protože stav může mít více vnitřních stavů, což se nazývá složený stav.
Pro definici složeného stavu musíte použít syntaxi state, za níž následuje id, a tělo složeného stavu napsat do složených závorek {}. Složený stav můžete pojmenovat na samostatném řádku stejně jako u definice jednoduchého stavu. Viz příklad níže:
Kopírovat
Vložení
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Můžete pracovat v několika úrovních:
Kopírovat
Vložení
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Můžete také definovat přechody mezi složenými stavy:
Kopírovat
Vložení
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Poznámka: nelze definovat přechody mezi vnitřními stavy patřícími různým složeným stavům.
Volba
Někdy potřebujete simulovat volbu mezi dvěma nebo více cestami, čehož lze dosáhnout pomocí <<choice>>.
Kopírovat
Vložení
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Větev/sloučení
Pomocí <<fork>> <<join>> lze v diagramu zadat větev/sloučení.
Kopírovat
Vložení
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 --> [*]
Poznámka
Komentáře ve stavovém diagramu umožňují jasnější vyjádření; komentář lze umístit na pravou nebo levou stranu uzlu.
Kopírovat
Vložení
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.
Souběžnost
Stejně jako v plantUml můžete souběžnost určit pomocí symbolu pomlčky --.
Kopírovat
Vložení
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
}
Nastavení směru diagramu
U stavových diagramů můžete směr vykreslování diagramu nastavit pomocí příkazu směru, jak ukazuje tento příklad.
Kopírovat
Vložení
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Komentář
Do stavového diagramu můžete vkládat komentáře, které editor ignoruje. Komentář musí začínat dvěma znaky procenta (%%); veškerý text od této značky do dalšího znaku nového řádku je považován za komentář, včetně jakékoli syntaxe diagramu. Komentář může zabírat samostatný řádek nebo být na konci příkazu.
Kopírovat
Vložení
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Stylování pomocí classDefs
Současná omezení classDef pro stavový diagram:
1. Nelze použít na počáteční nebo koncový stav
2. Nelze použít na složený stav ani uvnitř složeného stavu
Styl můžete definovat pomocí syntaxe classDef (tj. zkratka pro class definition, kde „class“ je podobná třídě v CSS). Za classDef následuje název stylu, poté jeden nebo více párů „vlastnost-hodnota“, přičemž každý pár „vlastnost-hodnota“ se skládá z platného názvu vlastnosti CSS, dvojtečky (:) a odpovídající hodnoty.
Následuje příklad classDef s jediným párem „vlastnost-hodnota“:
Kopírovat
Vložení
classDef movement font-style:italic;
- Název stylu je movement
- Jedinou vlastností je font-style a hodnota je italic
Pokud chcete mít více párů „vlastnost-hodnota“, můžete mezi jednotlivé páry „vlastnost-hodnota“ vložit čárku (,).
Následuje příklad obsahující tři páry „vlastnost-hodnota“:
Kopírovat
Vložení
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Název stylu je badBadEvent
- První vlastností je fill a její hodnota je #f00
- Druhou vlastností je color a její hodnota je white
- Třetí vlastností je font-weight a její hodnota je bold
- Čtvrtou vlastností je stroke-width a její hodnota je 2px
- Pátou vlastností je stroke a její hodnota je yellow
Použití stylu classDef na stav
Existují dva způsoby, jak použít styl classDef na stav:
- Použití stylu classDef na jeden nebo více stavů v jednom příkazu pomocí syntaxe class
- Použití stylu classDef pomocí operátoru :::, když je stav použit v příkazu přechodu (například se šipkou směřující do/z jiného stavu)
1. příkaz class
Příkaz class říká Mermaid, aby použil zadaný classDef na jednu nebo více tříd. Má tvar:
Kopírovat
Vložení
class [one or more state names, separated by commas] [name of a style defined with classDef]
Následuje příklad použití stylu badBadEvent na stav s názvem Crash:
Kopírovat
Vložení
class Crash badBadEvent
Následuje příklad použití stylu movement na stavy Moving a Crash:
Kopírovat
Vložení
class Moving,Crash movement
Zde je příklad. Všimněte si, že na stav Crash jsou aplikovány dva styly classDef: movement a badBadEvent
Kopírovat
Vložení
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. Použití stylu na stav pomocí operátoru :::
Styl classDef můžete na stav použít pomocí operátoru :::. Syntaxe je:
Kopírovat
Vložení
[state]:::[style name]
Můžete jej použít v příkazu, který používá třídy, což zahrnuje počáteční a koncový stav. Například:
Kopírovat
Vložení
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 --> [*]
Mezery v názvu stavu
Nejprve můžete definovat stav pomocí id a později přidat mezery do stavu odkazem na toto id.
V následujícím příkladu je stav s ID yswsii popsaný jako ''Your state with spaces in it''. Po definici je yswsii použit v prvním přechodu diagramu ([*] --> yswsii) a také při přechodu na YetAnotherState (yswsii --> YetAnotherState). yswsii byl nastaven styl tak, aby se lišil od ostatních stavů.
Kopírovat
Vložení
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 --> [*]
