Diagram stanów
Składnia diagramu stanów Mermaid jest zgodna ze składnią używaną w plantUml, co ułatwi użytkownikom udostępnianie diagramów między mermaid a plantUml.
Kopiuj
Osadź
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Stary edytor:
Kopiuj
Osadź
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Nowy edytor:
W diagramie stanów system jest opisany za pomocą stanów i sposobu, w jaki jeden stan przechodzi w inny poprzez przejścia. Powyższy przykładowy diagram pokazuje trzy stany: nieruchomy, w ruchu i kolizja. Zaczynasz w stanie nieruchomym, z którego możesz przejść do stanu ruchu. Ze stanu ruchu możesz wrócić do stanu nieruchomego lub przejść do stanu kolizji. Nie ma przejścia ze stanu nieruchomego do stanu kolizji. (Jeśli pozostajesz nieruchomy, nie ulegniesz kolizji.)
状态
Stan można zadeklarować na wiele sposobów; najprostszym sposobem jest zdefiniowanie stanu za pomocą samego id:
Kopiuj
Osadź
stateDiagram-v2
stateId
Innym sposobem jest użycie składni state i dodanie następującego opisu:
Kopiuj
Osadź
stateDiagram-v2
state "This is a state description" as s2
Innym sposobem zdefiniowania stanu z opisem jest najpierw zdefiniowanie ID stanu, a następnie dodanie dwukropka i opisu:
Kopiuj
Osadź
stateDiagram-v2
s2 : This is a state description
Przejście
Przejście to linia połączenia, gdy jeden stan wchodzi w inny, oznaczana strzałką tekstową "-->".
Gdy definiujesz przejście między dwoma stanami, a stany nie zostały jeszcze zdefiniowane, niezdefiniowany stan zostanie zdefiniowany za pomocą id z przejścia. Następnie możesz dodać opis dla stanu zdefiniowanego w ten sposób.
Kopiuj
Osadź
stateDiagram-v2
s1 --> s2
Do przejścia można dodać tekst opisujący to, co reprezentuje:
Kopiuj
Osadź
stateDiagram-v2
s1 --> s2: A transition
Start i koniec
Istnieją dwa specjalne stany reprezentujące początek i koniec diagramu. Te dwa stany są reprezentowane składnią [*]; kierunek przejścia do tego stanu decyduje o tym, czy jest to stan początkowy, czy końcowy.
Kopiuj
Osadź
stateDiagram-v2
[*] --> s1
s1 --> [*]
Stan złożony
Podczas korzystania z diagramów stanów w świecie rzeczywistym często spotykasz diagramy wielowymiarowe, ponieważ jeden stan może mieć wiele stanów wewnętrznych; nazywa się to stanem złożonym.
Aby zdefiniować stan złożony, musisz użyć składni state, po której następuje id, i zapisać treść stanu złożonego w nawiasach klamrowych {}. Możesz nazwać stan złożony w osobnej linii, tak jak definiujesz stan prosty. Zobacz poniższy przykład:
Kopiuj
Osadź
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Możesz operować na kilku poziomach:
Kopiuj
Osadź
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Możesz także definiować przejścia między stanami złożonymi:
Kopiuj
Osadź
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Uwaga: nie można definiować przejść między stanami wewnętrznymi należącymi do różnych stanów złożonych.
Wybór
Czasami musisz zasymulować wybór między dwiema lub więcej ścieżkami; można to zrobić za pomocą <<choice>>.
Kopiuj
Osadź
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Rozgałęzienie/scalanie
Możesz użyć <<fork>> <<join>>, aby określić rozgałęzienie/scalenie na diagramie.
Kopiuj
Osadź
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 --> [*]
Uwaga
Używanie komentarzy w diagramie stanów pozwala na jaśniejsze wyrażenie; możesz umieścić komentarz po prawej lub lewej stronie węzła.
Kopiuj
Osadź
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.
Współbieżność
Podobnie jak w plantUml, współbieżność można określić za pomocą symbolu myślnika --.
Kopiuj
Osadź
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
}
Ustawianie kierunku diagramu
W przypadku diagramu stanów możesz użyć instrukcji kierunku, aby ustawić kierunek renderowania diagramu, jak pokazano w tym przykładzie.
Kopiuj
Osadź
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Komentarz
W diagramie stanów można wprowadzać komentarze, które edytor zignoruje. Komentarz musi zaczynać się od podwójnego znaku procentu (%%); cały tekst od tego znacznika do następnego znaku nowej linii będzie traktowany jako komentarz, w tym dowolna składnia diagramu. Komentarz może zajmować osobną linię lub znajdować się na końcu instrukcji.
Kopiuj
Osadź
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Ustawianie stylu za pomocą classDefs
Obecne ograniczenia classDef diagramu stanów:
1. Nie można stosować do stanu początkowego ani końcowego
2. Nie można stosować do stanu złożonego ani wewnątrz stanu złożonego
Możesz zdefiniować styl za pomocą składni classDef (skrót od class definition, gdzie "class" jest podobne do klasy w CSS). Po classDef następuje nazwa stylu, a następnie jedna lub więcej par 'właściwość-wartość', z których każda składa się z poprawnej nazwy właściwości CSS, dwukropka (:) oraz odpowiedniej wartości.
Oto przykład classDef z tylko jedną parą 'właściwość-wartość':
Kopiuj
Osadź
classDef movement font-style:italic;
- Nazwa stylu to movement
- Jedyną właściwością jest font-style, a wartością italic
Jeśli chcesz mieć wiele par 'właściwość-wartość', możesz umieścić przecinek (,) między każdą parą 'właściwość-wartość'.
Oto przykład zawierający trzy pary 'właściwość-wartość':
Kopiuj
Osadź
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Nazwa stylu to badBadEvent
- Pierwszą właściwością jest fill, a jej wartością #f00
- Drugą właściwością jest color, a jej wartością white
- Trzecią właściwością jest font-weight, a jej wartością bold
- Czwartą właściwością jest stroke-width, a jej wartością 2px
- Piątą właściwością jest stroke, a jej wartością yellow
Stosowanie stylu classDef do stanu
Istnieją dwa sposoby zastosowania stylu classDef do stanu:
- Użyj składni class, aby zastosować styl classDef do jednego lub więcej stanów w jednej instrukcji
- Użyj operatora :::, aby zastosować styl classDef, gdy stan jest używany w instrukcji przejścia (np. ze strzałką wskazującą do/z innego stanu)
1. Instrukcja class
Instrukcja class informuje Mermaid, aby zastosować określony classDef do jednej lub więcej klas. Ma postać:
Kopiuj
Osadź
class [one or more state names, separated by commas] [name of a style defined with classDef]
Oto przykład zastosowania stylu badBadEvent do stanu o nazwie Crash:
Kopiuj
Osadź
class Crash badBadEvent
Oto przykład zastosowania stylu movement do dwóch stanów Moving i Crash:
Kopiuj
Osadź
class Moving,Crash movement
Oto przykład. Należy zauważyć, że do stanu Crash zastosowano dwa style classDef: movement i badBadEvent
Kopiuj
Osadź
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. Stosowanie stylu do stanu za pomocą operatora :::
Możesz użyć operatora :::, aby zastosować styl classDef do stanu. Składnia to:
Kopiuj
Osadź
[state]:::[style name]
Możesz zastosować go w instrukcji używającej klasy, co obejmuje stan początkowy i końcowy. Na przykład:
Kopiuj
Osadź
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 --> [*]
Spacje w nazwie stanu
Możesz najpierw zdefiniować stan za pomocą id, a następnie odwołać się do tego id, aby dodać spacje do stanu.
W poniższym przykładzie znajduje się stan o ID yswsii, opisany jako ''Your state with spaces in it''. Po zdefiniowaniu yswsii jest używany w pierwszym przejściu diagramu ([*] --> yswsii), a także użyty przy przejściu do YetAnotherState (yswsii --> YetAnotherState). Yswsii został ostylowany tak, aby różnił się od innych stanów.
Kopiuj
Osadź
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 --> [*]
