Toestandsdiagram
De Mermaid-syntaxis voor toestandsdiagrammen is compatibel met de syntaxis die in plantUml wordt gebruikt, waardoor het voor gebruikers gemakkelijker wordt om diagrammen tussen mermaid en plantUml te delen.
Kopiëren
Insluiten
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Oude editor:
Kopiëren
Insluiten
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Nieuwe editor:
In een toestandsdiagram wordt een systeem beschreven aan de hand van toestanden en hoe de ene toestand door overgangen in een andere verandert. Het voorbeelddiagram hierboven toont drie toestanden: stil, bewegend en botsing. Je begint in de stilstaande toestand, van waaruit je naar de bewegende toestand kunt gaan. Vanuit de bewegende toestand kun je terugkeren naar de stilstaande toestand of naar de botsingstoestand gaan. Er is geen overgang van de stilstaande naar de botsingstoestand. (Als je stilstaat, krijg je geen botsing.)
状态
Toestanden kunnen op verschillende manieren worden gedeclareerd; de eenvoudigste manier is een toestand definiëren met alleen een id:
Kopiëren
Insluiten
stateDiagram-v2
stateId
Een andere manier is de syntaxis state te gebruiken en de volgende beschrijving toe te voegen:
Kopiëren
Insluiten
stateDiagram-v2
state "This is a state description" as s2
Een andere manier om een toestand met een beschrijving te definiëren is eerst de toestand-ID te definiëren en vervolgens een dubbele punt en de beschrijving toe te voegen:
Kopiëren
Insluiten
stateDiagram-v2
s2 : This is a state description
Overgang
Een overgang is de verbindingslijn wanneer de ene toestand in een andere overgaat, weergegeven met de tekstpijl "-->".
Wanneer je een overgang tussen twee toestanden definieert en een toestand nog niet is gedefinieerd, wordt de niet-gedefinieerde toestand gedefinieerd met de id uit de overgang. Daarna kun je een beschrijving toevoegen aan de op deze manier gedefinieerde toestand.
Kopiëren
Insluiten
stateDiagram-v2
s1 --> s2
Je kunt tekst aan een overgang toevoegen om te beschrijven wat deze vertegenwoordigt:
Kopiëren
Insluiten
stateDiagram-v2
s1 --> s2: A transition
Begin en einde
Er zijn twee speciale toestanden die het begin en het einde van het diagram aangeven. Deze twee toestanden worden weergegeven met de syntaxis [*]; de richting van de overgang ernaar bepaalt of het een begintoestand of een eindtoestand is.
Kopiëren
Insluiten
stateDiagram-v2
[*] --> s1
s1 --> [*]
Samengestelde toestand
Wanneer je toestandsdiagrammen in de praktijk gebruikt, kom je vaak multidimensionale diagrammen tegen, omdat een toestand meerdere interne toestanden kan hebben; dit wordt een samengestelde toestand genoemd.
Om een samengestelde toestand te definiëren, gebruik je de syntaxis state, gevolgd door een id, en schrijf je de hoofdtekst van de samengestelde toestand tussen accolades {}. Je kunt de samengestelde toestand op een aparte regel een naam geven, net zoals bij een eenvoudige toestand. Zie het onderstaande voorbeeld:
Kopiëren
Insluiten
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Je kunt op meerdere niveaus werken:
Kopiëren
Insluiten
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Je kunt ook overgangen tussen samengestelde toestanden definiëren:
Kopiëren
Insluiten
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Let op: overgangen tussen interne toestanden die tot verschillende samengestelde toestanden behoren, kunnen niet worden gedefinieerd.
Keuze
Soms moet je een keuze tussen twee of meer paden modelleren; dit kan met <<choice>>.
Kopiëren
Insluiten
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Vertakken/Samenvoegen
Met <<fork>> <<join>> kun je in een diagram een vertakking/samenvoeging aangeven.
Kopiëren
Insluiten
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 --> [*]
Let op
Het gebruik van opmerkingen in een toestandsdiagram maakt de uitdrukking duidelijker; je kunt een opmerking optioneel aan de rechter- of linkerkant van een knooppunt plaatsen.
Kopiëren
Insluiten
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.
Gelijktijdigheid
Net als in plantUml kun je met het streepjesteken -- gelijktijdigheid aangeven.
Kopiëren
Insluiten
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
}
Diagramrichting instellen
Voor toestandsdiagrammen kun je een richtingsverklaring gebruiken om de weergaverichting van het diagram in te stellen, zoals in dit voorbeeld.
Kopiëren
Insluiten
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Opmerking
Je kunt opmerkingen in een toestandsdiagram invoeren; de editor negeert deze opmerkingen. Opmerkingen moeten beginnen met een dubbel procentteken (%%); alle tekst vanaf die markering tot het volgende regeleinde wordt als opmerking beschouwd, inclusief eventuele diagram-syntaxis. Opmerkingen kunnen een eigen regel innemen of aan het einde van een verklaring worden geplaatst.
Kopiëren
Insluiten
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Stijlen instellen met classDefs
Huidige beperkingen van classDef in toestandsdiagrammen:
1. Kan niet worden toegepast op begin- of eindtoestanden
2. Kan niet worden toegepast op een samengestelde toestand of binnen een samengestelde toestand
Je kunt stijlen definiëren met de syntaxis classDef (de afkorting van class definition, waarbij "class" vergelijkbaar is met een klasse in CSS). Na classDef volgt de stijlnaam, gevolgd door een of meer 'eigenschap-waarden', waarbij elke 'eigenschap-waarde' bestaat uit een geldige CSS-eigenschapsnaam, een dubbele punt (:) en de bijbehorende waarde.
Hieronder volgt een voorbeeld van een classDef met slechts één 'eigenschap-waarde':
Kopiëren
Insluiten
classDef movement font-style:italic;
- De stijlnaam is movement
- De enige eigenschap is font-style, met de waarde italic
Als je meerdere 'eigenschap-waarden' wilt hebben, kun je tussen elke 'eigenschap-waarde' een komma (,) plaatsen.
Hieronder volgt een voorbeeld met drie 'eigenschap-waarden':
Kopiëren
Insluiten
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- De stijlnaam is badBadEvent
- De eerste eigenschap is fill, met de waarde #f00
- De tweede eigenschap is color, met de waarde white
- De derde eigenschap is font-weight, met de waarde bold
- De vierde eigenschap is stroke-width, met de waarde 2px
- De vijfde eigenschap is stroke, met de waarde yellow
classDef-stijlen op toestanden toepassen
Er zijn twee manieren om classDef-stijlen op toestanden toe te passen:
- classDef-stijlen toepassen op een of meer toestanden in één verklaring met de syntaxis class
- classDef-stijlen toepassen met de operator ::: wanneer een toestand in een overgangsverklaring wordt gebruikt (bijvoorbeeld met een pijl naar/van een andere toestand)
1. class-verklaring
De class-verklaring vertelt Mermaid om de opgegeven classDef op een of meer klassen toe te passen. De vorm is:
Kopiëren
Insluiten
class [one or more state names, separated by commas] [name of a style defined with classDef]
Hieronder volgt een voorbeeld waarin de stijl badBadEvent wordt toegepast op de toestand Crash:
Kopiëren
Insluiten
class Crash badBadEvent
Hieronder volgt een voorbeeld waarin de stijl movement wordt toegepast op de toestanden Moving en Crash:
Kopiëren
Insluiten
class Moving,Crash movement
Hier is een voorbeeld. Let op: op de toestand Crash zijn twee classDef-stijlen toegepast: movement en badBadEvent
Kopiëren
Insluiten
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. Stijlen op toestanden toepassen met de operator :::
Je kunt met de operator ::: classDef-stijlen op toestanden toepassen. De syntaxis is:
Kopiëren
Insluiten
[state]:::[style name]
Je kunt het toepassen in een verklaring die een klasse gebruikt, waaronder begin- en eindtoestanden. Bijvoorbeeld:
Kopiëren
Insluiten
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 --> [*]
Spaties in toestandsnamen
Je kunt een toestand eerst met een id definiëren en daarna naar die id verwijzen om spaties aan de toestand toe te voegen.
In het onderstaande voorbeeld is er een toestand met de ID yswsii, beschreven als ''Your state with spaces in it'. Na de definitie wordt yswsii gebruikt in de eerste overgang van het diagram ([*] --> yswsii), en ook gebruikt bij de overgang naar YetAnotherState (yswsii --> YetAnotherState). yswsii is van een stijl voorzien zodat deze verschilt van de andere toestanden.
Kopiëren
Insluiten
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 --> [*]
