Tillståndsdiagram
Mermaids tillståndsdiagram-syntax är kompatibel med syntaxen som används i plantUml, vilket gör det enklare för användare att dela diagram mellan mermaid och plantUml.
Kopiera
Bädda in
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Äldre redigerare:
Kopiera
Bädda in
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Ny redigerare:
I ett tillståndsdiagram beskrivs systemet utifrån tillstånd och hur ett tillstånd övergår till ett annat genom en övergång. Exempeldiagrammet ovan visar tre tillstånd: Stillastående, Rörlig och Kollision. Du börjar i tillståndet Stillastående, och från Stillastående kan du övergå till Rörlig. Från Rörlig kan du gå tillbaka till Stillastående eller övergå till Kollision. Det finns ingen övergång från Stillastående till Kollision. (Om du förblir stillastående kolliderar du inte.)
状态
Tillstånd kan deklareras på flera sätt; det enklaste är att definiera ett tillstånd med bara ett id:
Kopiera
Bädda in
stateDiagram-v2
stateId
Ett annat sätt är att använda state -syntaxen och lägga till följande beskrivning:
Kopiera
Bädda in
stateDiagram-v2
state "This is a state description" as s2
Ett annat sätt att definiera ett tillstånd med beskrivning är att först definiera tillståndets ID och sedan lägga till ett kolon och beskrivningen:
Kopiera
Bädda in
stateDiagram-v2
s2 : This is a state description
Övergång
En övergång är förbindelselinjen när ett tillstånd går in i ett annat, vilket representeras av textpilen "-->" .
När du definierar en övergång mellan två tillstånd och tillståndet ännu inte är definierat, definieras det odefinierade tillståndet med id:t från övergången. Efteråt kan du lägga till en beskrivning för tillståndet som definierats på detta sätt.
Kopiera
Bädda in
stateDiagram-v2
s1 --> s2
Du kan lägga till text i en övergång för att beskriva vad den representerar:
Kopiera
Bädda in
stateDiagram-v2
s1 --> s2: A transition
Start och slut
Det finns två speciella tillstånd som representerar diagrammets början och slut. Dessa två tillstånd representeras av syntaxen [*] , och övergångsriktningen till detta tillstånd avgör om det är ett starttillstånd eller ett sluttillstånd.
Kopiera
Bädda in
stateDiagram-v2
[*] --> s1
s1 --> [*]
Sammansatt tillstånd
När du använder tillståndsdiagram i verkligheten stöter du ofta på flerdimensionella diagram, eftersom ett tillstånd kan ha flera inre tillstånd; detta kallas ett sammansatt tillstånd.
För att definiera ett sammansatt tillstånd behöver du använda state -syntaxen följt av ett id och skriva det sammansatta tillståndets kropp inom klammerparenteser {} . Du kan namnge det sammansatta tillståndet på en egen rad, precis som när du definierar ett enkelt tillstånd. Se exemplet nedan:
Kopiera
Bädda in
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Du kan arbeta i flera nivåer:
Kopiera
Bädda in
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Du kan också definiera övergångar mellan sammansatta tillstånd:
Kopiera
Bädda in
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Obs: du kan inte definiera övergångar mellan inre tillstånd som tillhör olika sammansatta tillstånd.
Val
Ibland behöver du modellera ett val mellan två eller flera vägar; detta kan uppnås med <<choice>> .
Kopiera
Bädda in
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Förgrening/sammanslagning
Du kan ange en förgrening/sammanslagning i diagrammet med <<fork>> <<join>> .
Kopiera
Bädda in
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 --> [*]
Obs
Kommentarer i tillståndsdiagram uttrycker saker tydligare; du kan välja att placera kommentaren till höger eller vänster om noden.
Kopiera
Bädda in
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
Liksom i plantUml kan du ange samtidighet med bindestrecket -- .
Kopiera
Bädda in
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
}
Ange diagramriktning
För tillståndsdiagram kan du använda en riktningssats för att ange diagrammets renderingsriktning, som i detta exempel.
Kopiera
Bädda in
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Kommentar
Kommentarer kan infogas i tillståndsdiagram, och redigeraren ignorerar dessa kommentarer. En kommentar måste börja med två procenttecken (%%); all text från denna markör till nästa radbrytning betraktas som en kommentar, inklusive all diagram-syntax. Kommentarer kan uppta en egen rad eller placeras i slutet av en sats.
Kopiera
Bädda in
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Ange stil med classDefs
Aktuella begränsningar för tillståndsdiagram classDef :
1. Kan inte tillämpas på start- eller sluttillstånd
2. Kan inte tillämpas på sammansatta tillstånd eller inuti sammansatta tillstånd
Du kan använda classDef -syntaxen (förkortning för class definition, där "class" liknar klasser i CSS) för att definiera stilar. classDef följs av stilnamnet och sedan en eller flera 'egenskap-värde', där varje 'egenskap-värde' består av ett giltigt CSS-egenskapsnamn, ett kolon (:) och motsvarande värde.
Följande är ett exempel på en classDef med endast ett 'egenskap-värde':
Kopiera
Bädda in
classDef movement font-style:italic;
- Stilnamnet är movement
- Den enda egenskapen är font-style och värdet är italic
Om du vill ha flera 'egenskap-värde' kan du placera ett kommatecken (,) mellan varje 'egenskap-värde'.
Följande är ett exempel med tre 'egenskap-värde':
Kopiera
Bädda in
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Stilnamnet är badBadEvent
- Den första egenskapen är fill och dess värde är #f00
- Den andra egenskapen är color och dess värde är white
- Den tredje egenskapen är font-weight och dess värde är bold
- Den fjärde egenskapen är stroke-width och dess värde är 2px
- Den femte egenskapen är stroke och dess värde är yellow
Tillämpa classDef -stil på tillstånd
Det finns två sätt att tillämpa classDef -stilar på tillstånd:
- Använd class -syntaxen för att tillämpa classDef -stilen på ett eller flera tillstånd i en och samma sats
- Använd operatorn ::: för att tillämpa classDef -stilen när ett tillstånd används i en övergångssats (till exempel med en pil som pekar mot/från ett annat tillstånd)
1. class -satsen
class -satsen talar om för Mermaid att tillämpa den angivna classDef på en eller flera klasser. Formen är:
Kopiera
Bädda in
class [one or more state names, separated by commas] [name of a style defined with classDef]
Följande är ett exempel på att tillämpa stilen badBadEvent på ett tillstånd som heter Crash:
Kopiera
Bädda in
class Crash badBadEvent
Följande är ett exempel på att tillämpa stilen movement på tillstånden Moving och Crash:
Kopiera
Bädda in
class Moving,Crash movement
Här är ett exempel. Observera att tillståndet Crash har två classDef -stilar tillämpade: movement och badBadEvent
Kopiera
Bädda in
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. Använd operatorn ::: för att tillämpa stil på tillstånd
Du kan använda operatorn ::: för att tillämpa classDef -stilar på tillstånd. Syntaxen är:
Kopiera
Bädda in
[state]:::[style name]
Du kan tillämpa det i en sats som använder klasser, vilket inkluderar starttillstånd och sluttillstånd. Till exempel:
Kopiera
Bädda in
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 --> [*]
Mellanslag i tillståndsnamn
Du kan först definiera tillståndet med ett id och sedan referera till detta id för att lägga till mellanslag i tillståndet.
I följande exempel finns ett tillstånd med ID:t yswsii, beskrivet som ''Your state with spaces in it''. Efter definitionen används yswsii i diagrammets första övergång ([*] --> yswsii) och det används också vid övergången till YetAnotherState (yswsii --> YetAnotherState). yswsii har stilsatts så att det skiljer sig från de andra tillstånden.
Kopiera
Bädda in
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 --> [*]
