Tilakaavio
Mermaidin tilakaaviosyntaksi on yhteensopiva plantUml:ssa käytetyn syntaksin kanssa, mikä helpottaa kaavioiden jakamista mermaidin ja plantUml:n välillä.
Kopioi
Upotus
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Vanha editori:
Kopioi
Upotus
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Uusi editori:
Tilakaaviossa järjestelmää kuvataan tilojen sekä sen kautta, miten tila muuttuu toiseksi siirtymän avulla. Yllä oleva esimerkkikaavio näyttää kolme tilaa: paikallaan, liikkeessä ja törmäys. Aloitat paikallaan-tilasta, josta voit siirtyä liikkeessä-tilaan. Liikkeessä-tilasta voit palata paikallaan-tilaan tai siirtyä törmäys-tilaan. Paikallaan-tilasta ei ole siirtymää törmäys-tilaan. (Jos pysyt paikallaan, et törmää.)
状态
Tila voidaan määritellä usealla tavalla; yksinkertaisin tapa on määritellä tila pelkällä tunnisteella:
Kopioi
Upotus
stateDiagram-v2
stateId
Toinen tapa on käyttää state-syntaksia ja lisätä seuraava kuvaus:
Kopioi
Upotus
stateDiagram-v2
state "This is a state description" as s2
Toinen tapa määritellä tila, jossa on kuvaus, on määritellä ensin tilan tunniste ja lisätä sitten kaksoispiste ja kuvaus:
Kopioi
Upotus
stateDiagram-v2
s2 : This is a state description
Siirtymä
Siirtymä tarkoittaa yhdistävää viivaa, kun tila siirtyy toiseen tilaan, ja se esitetään tekstinuolella "-->".
Kun määrität siirtymän kahden tilan välillä eikä tilaa ole vielä määritetty, määrittelemätön tila määritellään siirtymän tunnisteella. Myöhemmin voit lisätä kuvauksen tällä tavalla määritetylle tilalle.
Kopioi
Upotus
stateDiagram-v2
s1 --> s2
Siirtymään voidaan lisätä tekstiä kuvaamaan sitä, mitä se edustaa:
Kopioi
Upotus
stateDiagram-v2
s1 --> s2: A transition
Alku ja loppu
Kaaviossa on kaksi erityistä tilaa, jotka edustavat alkua ja loppua. Nämä kaksi tilaa esitetään [*]-syntaksilla, ja siirtymän suunta kyseiseen tilaan määrittää, onko se aloitustila vai lopetustila.
Kopioi
Upotus
stateDiagram-v2
[*] --> s1
s1 --> [*]
Yhdistetila
Kun tilakaavioita käytetään tosielämässä, kohtaat usein moniulotteisia kaavioita, koska tilalla voi olla useita sisäisiä tiloja; tätä kutsutaan yhdistetilaksi.
Yhdistetilan määrittämiseksi sinun on käytettävä state-syntaksia, jota seuraa tunniste, ja kirjoitettava yhdistetilan runko aaltosulkeiden {} sisään. Voit nimetä yhdistetilan omalla rivillään samalla tavalla kuin määrittelisit yksinkertaisen tilan. Katso alla oleva esimerkki:
Kopioi
Upotus
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Voit toimia usealla tasolla:
Kopioi
Upotus
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Voit myös määrittää siirtymiä yhdistetilojen välillä:
Kopioi
Upotus
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Huomautus: eri yhdistetiloihin kuuluvien sisäisten tilojen välisiä siirtymiä ei voi määrittää.
Valinta
Joskus sinun on mallinnettava valintaa kahden tai useamman polun välillä; se voidaan toteuttaa komennolla <<choice>>.
Kopioi
Upotus
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Haarautuminen/Yhdistäminen
Kaaviossa voidaan määrittää haarautuminen/yhdistäminen komennoilla <<fork>> <<join>>.
Kopioi
Upotus
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 --> [*]
Huomautus
Kommenttien käyttö tilakaaviossa ilmaisee asiat selkeämmin; kommentti voidaan sijoittaa solmun oikealle tai vasemmalle puolelle.
Kopioi
Upotus
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.
Rinnakkaisuus
Kuten plantUml:ssa, voit määrittää rinnakkaisuuden viivasymbolilla --.
Kopioi
Upotus
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
}
Aseta kaavion suunta
Tilakaaviossa voit asettaa kaavion renderöintisuunnan suuntalauseella, kuten tässä esimerkissä.
Kopioi
Upotus
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Kommentti
Tilakaavioon voi syöttää kommentteja, jotka editori jättää huomiotta. Kommentin on alettava kaksoisprosenttimerkillä (%%); kaikki teksti kyseisestä merkistä seuraavaan rivinvaihtoon asti tulkitaan kommentiksi, mukaan lukien mahdollinen kaaviosyntaksi. Kommentti voi olla omalla rivillään tai lauseen lopussa.
Kopioi
Upotus
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Tylittely classDef-komennoilla
Tilakaavion classDef:n nykyiset rajoitukset:
1. Sitä ei voi soveltaa alku- tai lopputilaan
2. Sitä ei voi soveltaa yhdistetilaan tai yhdistetilan sisään
Voit määrittää tyylin classDef-syntaksilla (lyhenne sanoista class definition, jossa "class" on kuin CSS:n luokka). classDef-komentoa seuraa tyylin nimi sekä yksi tai useampi 'ominaisuus-arvo', joista jokainen koostuu kelvollisesta CSS-ominaisuuden nimestä, kaksoispisteestä (:) ja vastaavasta arvosta.
Seuraavassa on esimerkki classDef-tyylistä, jossa on vain yksi 'ominaisuus-arvo':
Kopioi
Upotus
classDef movement font-style:italic;
- Tyylin nimi on movement
- Ainoa ominaisuus on font-style, ja arvo on italic
Jos haluat useita 'ominaisuus-arvo'-pareja, voit sijoittaa pilkun (,) kunkin 'ominaisuus-arvo'-parin väliin.
Seuraavassa on esimerkki, joka sisältää kolme 'ominaisuus-arvo'-paria:
Kopioi
Upotus
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Tyylin nimi on badBadEvent
- Ensimmäinen ominaisuus on fill, jonka arvo on #f00
- Toinen ominaisuus on color, jonka arvo on white
- Kolmas ominaisuus on font-weight, jonka arvo on bold
- Neljäs ominaisuus on stroke-width, jonka arvo on 2px
- Viides ominaisuus on stroke, jonka arvo on yellow
Sovella classDef-tyyli tilaan
On kaksi tapaa soveltaa classDef-tyyliä tilaan:
- Sovella classDef-tyyli yhteen tai useampaan tilaan class-syntaksilla yhdessä lauseessa
- Sovella classDef-tyyli :::-operaattorilla, kun tilaa käytetään siirtymälauseessa (esimerkiksi nuoli toiseen tilaan / toisesta tilasta)
1. class-lause
class-lause kertoo Mermaidille, että määritetty classDef sovelletaan yhteen tai useampaan luokkaan. Muoto on:
Kopioi
Upotus
class [one or more state names, separated by commas] [name of a style defined with classDef]
Seuraavassa on esimerkki badBadEvent-tyylin soveltamisesta tilaan nimeltä Crash:
Kopioi
Upotus
class Crash badBadEvent
Seuraavassa on esimerkki movement-tyylin soveltamisesta kahteen tilaan Moving ja Crash:
Kopioi
Upotus
class Moving,Crash movement
Tässä on esimerkki. Huomaa, että Crash-tilaan sovelletaan kahta classDef-tyyliä: movement ja badBadEvent
Kopioi
Upotus
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. Tylin soveltaminen tilaan :::-operaattorilla
Voit soveltaa classDef-tyyliä tilaan :::-operaattorilla. Syntaksi on:
Kopioi
Upotus
[state]:::[style name]
Voit soveltaa sitä lauseessa, joka käyttää luokkaa; tämä sisältää aloitus- ja lopetustilan. Esimerkiksi:
Kopioi
Upotus
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 --> [*]
Välilyönnit tilan nimessä
Voit ensin määritellä tilan tunnisteella ja viitata sitten tunnisteeseen lisätäksesi välilyöntejä tilaan.
Seuraavassa esimerkissä on tila, jonka ID on yswsii ja kuvaus ''Your state with spaces in it''. Määrittelyn jälkeen yswsii:tä käytetään kaavion ensimmäisessä siirtymässä ([*] --> yswsii) ja myös siirryttäessä tilaan YetAnotherState (yswsii --> YetAnotherState). yswsii on tyylitelty niin, että se eroaa muista tiloista.
Kopioi
Upotus
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 --> [*]
