Tilstandsdiagram
Mermaids syntaks for tilstandsdiagrammer er kompatibel med syntaksen i plantUml, hvilket gør det lettere for brugere at dele diagrammer mellem mermaid og plantUml.
Kopiér
Integrer
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Gammel editor:
Kopiér
Integrer
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Ny editor:
I et tilstandsdiagram beskrives systemet ud fra tilstande og ud fra, hvordan én tilstand ændres til en anden via en overgang. Eksempeldiagrammet ovenfor viser tre tilstande: stille, bevægende og kollision. Du starter i tilstanden stille, og derfra kan du skifte til bevægende. Fra bevægende kan du gå tilbage til stille eller skifte til kollision. Der er ingen overgang fra stille til kollision. (Hvis du forbliver stille, kolliderer du ikke.)
状态
Tilstande kan erklæres på flere måder; den nemmeste er at definere en tilstand med blot et id:
Kopiér
Integrer
stateDiagram-v2
stateId
En anden måde er at bruge state-syntaksen og tilføje følgende beskrivelse:
Kopiér
Integrer
stateDiagram-v2
state "This is a state description" as s2
En anden måde at definere en tilstand med en beskrivelse er først at definere tilstands-ID'et og derefter tilføje et kolon og beskrivelsen:
Kopiér
Integrer
stateDiagram-v2
s2 : This is a state description
Overgang
En overgang er den forbindelseslinje, der opstår, når én tilstand går over i en anden, og den vises med tekstpilen "-->".
Når du definerer en overgang mellem to tilstande, og tilstandene endnu ikke er defineret, defineres de udefinerede tilstande med det id, der bruges i overgangen. Bagefter kan du tilføje en beskrivelse til de tilstande, der er defineret på denne måde.
Kopiér
Integrer
stateDiagram-v2
s1 --> s2
Du kan tilføje tekst til en overgang for at beskrive, hvad den repræsenterer:
Kopiér
Integrer
stateDiagram-v2
s1 --> s2: A transition
Start og slut
Der findes to særlige tilstande, der repræsenterer diagrammets begyndelse og afslutning. Disse to tilstande vises med syntaksen [*], og retningen af overgangen til tilstanden afgør, om det er en start- eller sluttilstand.
Kopiér
Integrer
stateDiagram-v2
[*] --> s1
s1 --> [*]
Sammensat tilstand
Når du bruger tilstandsdiagrammer i den virkelige verden, støder du ofte på flerdimensionale diagrammer, fordi en tilstand kan have flere interne tilstande; dette kaldes en sammensat tilstand.
For at definere en sammensat tilstand skal du bruge state-syntaksen efterfulgt af et id og skrive den sammensatte tilstands krop inden i klammerne {}. Du kan navngive den sammensatte tilstand på en separat linje, ligesom når du definerer en simpel tilstand. Se eksemplet nedenfor:
Kopiér
Integrer
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Du kan arbejde i flere niveauer:
Kopiér
Integrer
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Du kan også definere overgange mellem sammensatte tilstande:
Kopiér
Integrer
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Bemærk: Du kan ikke definere overgange mellem interne tilstande, der tilhører forskellige sammensatte tilstande.
Valg
Nogle gange har du brug for at simulere et valg mellem to eller flere forløb; dette kan gøres med <<choice>>.
Kopiér
Integrer
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Forgrening/fletning
Du kan bruge <<fork>> <<join>> til at angive en forgrening/fletning i diagrammet.
Kopiér
Integrer
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 --> [*]
Bemærk
Brug af kommentarer i tilstandsdiagrammer giver en klarere fremstilling, og du kan vælge at placere kommentaren til højre eller venstre for knuden.
Kopiér
Integrer
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.
Samtidighed
Som i plantUml kan du angive samtidighed med bindestregssymbolet --.
Kopiér
Integrer
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
}
Angiv diagramretning
For tilstandsdiagrammer kan du bruge et retningsudsagn til at angive diagrammets renderingsretning, som vist i dette eksempel.
Kopiér
Integrer
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Kommentar
Kommentarer kan indtastes i tilstandsdiagrammer, og editoren ignorerer dem. En kommentar skal begynde med dobbelt procenttegn (%%), og al tekst fra dette mærke til næste linjeskift betragtes som en kommentar, inklusive enhver diagramsyntaks. En kommentar kan stå på sin egen linje eller i slutningen af et udsagn.
Kopiér
Integrer
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Angiv stil med classDefs
Aktuelle begrænsninger for classDef i tilstandsdiagrammer:
1. Kan ikke anvendes på start- eller sluttilstande
2. Kan ikke anvendes på sammensatte tilstande eller inde i en sammensat tilstand
Du kan definere stil med classDef-syntaksen (en forkortelse for class definition, hvor "class" svarer til en klasse i CSS). classDef efterfølges af stilnavnet og derefter en eller flere 'egenskab-værdi'-par, hvor hvert 'egenskab-værdi'-par består af et gyldigt CSS-egenskabsnavn, et kolon (:) og den tilsvarende værdi.
Nedenfor er et eksempel på en classDef med kun ét 'egenskab-værdi'-par:
Kopiér
Integrer
classDef movement font-style:italic;
- Stilnavnet er movement
- Den eneste egenskab er font-style, og værdien er italic
Hvis du vil have flere 'egenskab-værdi'-par, kan du placere et komma (,) mellem hvert 'egenskab-værdi'-par.
Nedenfor er et eksempel med tre 'egenskab-værdi'-par:
Kopiér
Integrer
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Stilnavnet er badBadEvent
- Den første egenskab er fill, og dens værdi er #f00
- Den anden egenskab er color, og dens værdi er white
- Den tredje egenskab er font-weight, og dens værdi er bold
- Den fjerde egenskab er stroke-width, og dens værdi er 2px
- Den femte egenskab er stroke, og dens værdi er yellow
Anvend classDef-stil på en tilstand
Der er to måder at anvende classDef-stil på en tilstand:
- Brug class-syntaksen til at anvende classDef-stil på en eller flere tilstande i et enkelt udsagn
- Brug :::-operatoren til at anvende classDef-stil, når en tilstand bruges i et overgangsudsagn (f.eks. med en pil til/fra en anden tilstand)
1. class-udsagn
class-udsagnet fortæller Mermaid at anvende den angivne classDef på en eller flere klasser. Formen er:
Kopiér
Integrer
class [one or more state names, separated by commas] [name of a style defined with classDef]
Nedenfor er et eksempel, hvor stilen badBadEvent anvendes på tilstanden Crash:
Kopiér
Integrer
class Crash badBadEvent
Nedenfor er et eksempel, hvor stilen movement anvendes på de to tilstande Moving og Crash:
Kopiér
Integrer
class Moving,Crash movement
Her er et eksempel. Bemærk, at der anvendes to classDef-stile på tilstanden Crash: movement og badBadEvent
Kopiér
Integrer
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. Anvendelse af stil på en tilstand med :::-operatoren
Du kan bruge operatoren ::: til at anvende classDef-stil på en tilstand. Syntaksen er:
Kopiér
Integrer
[state]:::[style name]
Du kan anvende den i udsagn, hvor der bruges klasser; dette omfatter start- og sluttilstande. For eksempel:
Kopiér
Integrer
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 --> [*]
Mellemrum i tilstandsnavne
Du kan først definere tilstanden med et id og derefter referere til dette id for at tilføje mellemrum til tilstanden.
I følgende eksempel er der en tilstand med ID'et yswsii og beskrivelsen "Your state with spaces in it". Efter definitionen bruges yswsii i diagrammets første overgang ([*] --> yswsii) og bruges også i overgangen til YetAnotherState (yswsii --> YetAnotherState). yswsii er blevet stylet, så den adskiller sig fra de andre tilstande.
Kopiér
Integrer
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 --> [*]
