Tilstandsdiagram
Mermaid-tilstandsdiagrammets syntaks er kompatibel med syntaksen som brukes i plantUml, noe som gjør det enklere for brukere å dele diagrammer mellom mermaid og plantUml.
Kopier
Bygg inn
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Gammel editor:
Kopier
Bygg inn
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Ny editor:
I et tilstandsdiagram beskrives systemet ut fra tilstander og hvordan en tilstand endres til en annen gjennom overganger. Eksempeldiagrammet ovenfor viser tre tilstander: stille, bevege seg og kollisjon. Du starter i tilstanden stille, og fra stille kan du gå over til bevege seg. Fra bevege seg kan du gå tilbake til stille, eller gå over til kollisjon. Det finnes ingen overgang fra stille til kollisjon. (Hvis du holder deg i ro, kolliderer du ikke.)
状态
Du kan deklarere tilstander på flere måter. Den enkleste måten er å definere en tilstand med bare en id:
Kopier
Bygg inn
stateDiagram-v2
stateId
En annen måte er å bruke state -syntaksen og legge til følgende beskrivelse:
Kopier
Bygg inn
stateDiagram-v2
state "This is a state description" as s2
En annen måte å definere en tilstand med beskrivelse på er først å definere tilstands-ID-en og deretter legge til et kolon og beskrivelsen:
Kopier
Bygg inn
stateDiagram-v2
s2 : This is a state description
Overgang
En overgang er forbindelseslinjen når en tilstand går over i en annen, og vises med tekstpilen "-->".
Når du definerer en overgang mellom to tilstander og tilstanden ennå ikke er definert, blir den udefinerte tilstanden definert med id-en fra overgangen. Deretter kan du legge til en beskrivelse for tilstanden som er definert på denne måten.
Kopier
Bygg inn
stateDiagram-v2
s1 --> s2
Du kan legge til tekst i en overgang for å beskrive hva den representerer:
Kopier
Bygg inn
stateDiagram-v2
s1 --> s2: A transition
Start og slutt
Det finnes to spesialtilstander som representerer starten og stoppen av diagrammet. Disse to tilstandene vises med syntaksen [*] , og overgangsretningen til denne tilstanden avgjør om det er en starttilstand eller en sluttilstand.
Kopier
Bygg inn
stateDiagram-v2
[*] --> s1
s1 --> [*]
Sammensatt tilstand
Når du bruker tilstandsdiagrammer i den virkelige verden, møter du ofte flerdimensjonale diagrammer, fordi en tilstand kan ha flere interne tilstander. Dette kalles en sammensatt tilstand.
For å definere en sammensatt tilstand bruker du state -syntaksen, etterfulgt av en id, og skriver kroppen til den sammensatte tilstanden inne i klamrene {} . Du kan navngi den sammensatte tilstanden på en egen linje, akkurat som når du definerer en enkel tilstand. Se eksempelet nedenfor:
Kopier
Bygg inn
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Du kan arbeide på flere nivåer:
Kopier
Bygg inn
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Du kan også definere overganger mellom sammensatte tilstander:
Kopier
Bygg inn
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Merk: du kan ikke definere overganger mellom interne tilstander som tilhører forskjellige sammensatte tilstander.
Valg
Noen ganger må du modellere et valg mellom to eller flere stier, noe som kan gjøres med <<choice>> .
Kopier
Bygg inn
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Forgreining/Sammenslåing
Du kan bruke <<fork>> <<join>> til å angi en forgreining/sammenslåing i diagrammet.
Kopier
Bygg inn
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 --> [*]
Merk
Bruk av kommentarer i et tilstandsdiagram gir tydeligere uttrykk. Du kan velge å plassere kommentaren på høyre eller venstre side av noden.
Kopier
Bygg inn
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.
Samtidighet
Som i plantUml kan du angi samtidighet ved hjelp av bindestrek-symbolet -- .
Kopier
Bygg inn
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
}
Angi diagramretning
For tilstandsdiagrammer kan du bruke en retningssetning til å angi renderingsretningen til diagrammet, som vist i dette eksempelet.
Kopier
Bygg inn
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Kommentar
Du kan skrive kommentarer i et tilstandsdiagram, og editoren ignorerer disse kommentarene. Kommentaren må begynne med to prosenttegn (%%), og all tekst fra dette merket til neste linjeskift betraktes som en kommentar, inkludert all diagram-syntaks. En kommentar kan oppta en egen linje eller stå på slutten av en setning.
Kopier
Bygg inn
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Angi stil med classDefs
Gjeldende begrensninger for classDef i tilstandsdiagram:
1. Kan ikke brukes på start- eller sluttilstander
2. Kan ikke brukes på sammensatte tilstander eller inne i sammensatte tilstander
Du kan bruke classDef -syntaksen (dvs. forkortelse for class definition, der "class" ligner klasser i CSS) til å definere stil. Etter classDef følger stilnavnet, og deretter én eller flere 'egenskap-verdi'-par, der hvert 'egenskap-verdi'-par består av et gyldig CSS-egenskapsnavn, et kolon ( : ) og den tilhørende verdien.
Nedenfor er et eksempel på en classDef med bare ett 'egenskap-verdi'-par:
Kopier
Bygg inn
classDef movement font-style:italic;
- Stilnavnet er movement
- Den eneste egenskapen er font-style , og verdien er italic
Hvis du vil ha flere 'egenskap-verdi'-par, kan du plassere et komma (,) mellom hvert 'egenskap-verdi'-par.
Nedenfor er et eksempel med tre 'egenskap-verdi'-par:
Kopier
Bygg inn
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Stilnavnet er badBadEvent
- Den første egenskapen er fill , og verdien er #f00
- Den andre egenskapen er color , og verdien er white
- Den tredje egenskapen er font-weight , og verdien er bold
- Den fjerde egenskapen er stroke-width , og verdien er 2px
- Den femte egenskapen er stroke , og verdien er yellow
Bruk classDef-stil på en tilstand
Det finnes to måter å bruke classDef-stil på en tilstand:
- Bruk classDef-stilen på én eller flere tilstander i én setning med class -syntaksen
- Bruk classDef-stilen med ::: -operatoren når tilstanden brukes i en overgangssetning (for eksempel med en pil som peker til/fra en annen tilstand)
1. class -setningen
class -setningen forteller Mermaid at den angitte classDef skal brukes på én eller flere klasser. Formen er:
Kopier
Bygg inn
class [one or more state names, separated by commas] [name of a style defined with classDef]
Følgende er et eksempel på å bruke stilen badBadEvent på tilstanden kalt Crash :
Kopier
Bygg inn
class Crash badBadEvent
Følgende er et eksempel på å bruke stilen movement på tilstandene Moving og Crash :
Kopier
Bygg inn
class Moving,Crash movement
Her er et eksempel. Merk at tilstanden Crash har to classDef-stiler brukt: movement og badBadEvent
Kopier
Bygg inn
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. Bruk stil på en tilstand med ::: -operatoren
Du kan bruke classDef-stilen på en tilstand med ::: -operatoren. Syntaksen er:
Kopier
Bygg inn
[state]:::[style name]
Du kan bruke den i setninger som bruker klasser, noe som inkluderer starttilstander og sluttilstander. For eksempel:
Kopier
Bygg inn
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 --> [*]
Mellomrom i tilstandsnavn
Du kan først definere tilstanden med en id, og deretter referere til denne id-en for å legge til mellomrom i tilstanden.
I følgende eksempel finnes en tilstand med ID-en yswsii , beskrevet som "Your state with spaces in it". Etter definisjonen brukes yswsii i diagrammets første overgang ( [*] --> yswsii ), og den brukes også ved overgangen til YetAnotherState ( yswsii --> YetAnotherState ). yswsii er stilt inn slik at den skiller seg fra de andre tilstandene.
Kopier
Bygg inn
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 --> [*]
