Dayagram ng estado
Ang Mermaid state diagram syntax ay compatible sa syntax na ginagamit sa plantUml, gagawin nitong mas madali para sa user na magbahagi ng diagram sa pagitan ng mermaid at plantUml.
Kopyahin
Embed
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Lumang editor:
Kopyahin
Embed
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Bagong editor:
Sa state diagram, ang system ay inilalarawan batay sa estado at kung paano nagbabago ang isang estado patungo sa ibang estado sa pamamagitan ng transition. Ang halimbawang diagram sa itaas ay nagpapakita ng tatlong estado: Still, Moving, at Crash. Nagsisimula ka sa Still state, at mula sa Still ay maaari kang lumipat sa Moving. Mula sa Moving, maaari kang bumalik sa Still, o lumipat sa Crash. Walang transition mula Still patungong Crash. (Kung mananatiling Still, hindi ka mababangga.)
状态
Maaaring ideklara ang estado sa iba't ibang paraan, ang pinakasimpleng paraan ay tukuyin ang estado gamit lamang ang isang id:
Kopyahin
Embed
stateDiagram-v2
stateId
Ang isa pang paraan ay gamitin ang state syntax, at idagdag ang sumusunod na paglalarawan:
Kopyahin
Embed
stateDiagram-v2
state "This is a state description" as s2
Ang isa pang paraan upang tukuyin ang estado na may paglalarawan ay tukuyin muna ang state ID, pagkatapos ay magdagdag ng colon at paglalarawan:
Kopyahin
Embed
stateDiagram-v2
s2 : This is a state description
Transition
Ang transition ay ang linya ng koneksyon kapag ang isang estado ay pumapasok sa ibang estado, kinakatawan gamit ang text arrow "-->".
Kapag tinukoy mo ang transition sa pagitan ng dalawang estado, at ang estado ay hindi pa tinukoy, ang hindi natukoy na estado ay tutukuyin gamit ang id sa transition. Pagkatapos, maaari kang magdagdag ng paglalarawan para sa estado na tinukoy sa paraang ito.
Kopyahin
Embed
stateDiagram-v2
s1 --> s2
Maaari kang magdagdag ng teksto sa transition upang ilarawan ang kinakatawan nito:
Kopyahin
Embed
stateDiagram-v2
s1 --> s2: A transition
Simula at pagtatapos
May dalawang espesyal na estado na kumakatawan sa simula at paghinto ng chart. Ang dalawang estado na ito ay kinakatawan gamit ang [*] syntax, at ang direksyon ng transition patungo sa estado ay tumutukoy kung ito ay start state o end state.
Kopyahin
Embed
stateDiagram-v2
[*] --> s1
s1 --> [*]
Composite state
Kapag gumagamit ng state diagram sa totoong mundo, madalas kang makatagpo ng multi-dimensional na diagram, dahil ang isang estado ay maaaring may maraming panloob na estado, tinatawag itong composite state.
Upang tukuyin ang composite state, kailangan mong gamitin ang state syntax, na sinusundan ng isang id, at isulat ang body ng composite state sa loob ng curly braces {}. Maaari mong pangalanan ang composite state sa isang hiwalay na linya, tulad ng pagtukoy ng simpleng estado. Tingnan ang halimbawa sa ibaba:
Kopyahin
Embed
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Maaari kang gumana sa ilang antas:
Kopyahin
Embed
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Maaari mo ring tukuyin ang mga transition sa pagitan ng mga composite state:
Kopyahin
Embed
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Tandaan: hindi maaaring tukuyin ang transition sa pagitan ng mga panloob na estado na kabilang sa magkaibang composite state.
Choice
Minsan kailangan mong gayahin ang pagpili sa pagitan ng dalawa o higit pang path, maaari mong gamitin ang <<choice>> upang ipatupad ito.
Kopyahin
Embed
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Fork/merge
Maaari mong gamitin ang <<fork>> <<join>> upang tumukoy ng fork/join sa chart.
Kopyahin
Embed
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 --> [*]
Tandaan
Ang paggamit ng komento sa state diagram ay nagbibigay ng mas malinaw na pagpapahayag, maaari mong piliing ilagay ang komento sa kanan o kaliwa ng node.
Kopyahin
Embed
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.
Concurrency
Tulad ng sa plantUml, maaari mong gamitin ang gitling simbolo -- upang tukuyin ang concurrency.
Kopyahin
Embed
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
}
Itakda ang direksyon ng chart
Para sa state diagram, maaari mong gamitin ang direction statement upang itakda ang rendering direction ng chart, tulad ng ipinapakita sa halimbawang ito.
Kopyahin
Embed
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Komento
Maaari kang maglagay ng komento sa state diagram, at hindi papansinin ng editor ang mga komentong ito. Ang komento ay dapat magsimula sa double percent sign (%%), ang lahat ng teksto mula sa marker na ito hanggang sa susunod na line break ay ituturing na komento, kabilang ang anumang chart syntax. Ang komento ay maaaring sumakop sa isang hiwalay na linya, o ilagay sa dulo ng statement.
Kopyahin
Embed
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Gumamit ng classDefs upang magtakda ng estilo
Kasalukuyang limitasyon ng classDef sa state diagram:
1. Hindi maaaring ilapat sa start o end state
2. Hindi maaaring ilapat sa composite state o sa loob ng composite state
Maaari mong gamitin ang classDef syntax (ibig sabihin, abbreviation ng class definition, kung saan ang "class" ay katulad ng class sa CSS) upang tukuyin ang estilo. Ang classDef ay sinusundan ng style name, pagkatapos ay isa o higit pang 'property-value', ang bawat 'property-value' ay binubuo ng isang valid na CSS property name, isang colon (:), at ng katumbas na value.
Ang sumusunod ay halimbawa ng classDef na may isang 'property-value' lamang:
Kopyahin
Embed
classDef movement font-style:italic;
- Ang style name ay movement
- Ang tanging property ay font-style, ang value ay italic
Kung gusto mong magkaroon ng maraming 'property-value', maaari kang maglagay ng kuwit (,) sa pagitan ng bawat 'property-value'.
Ang sumusunod ay halimbawa na naglalaman ng tatlong 'property-value':
Kopyahin
Embed
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Ang style name ay badBadEvent
- Ang unang property ay fill, ang value nito ay #f00
- Ang ikalawang property ay color, ang value nito ay white
- Ang ikatlong property ay font-weight, ang value nito ay bold
- Ang ikaapat na property ay stroke-width, ang value nito ay 2px
- Ang ikalimang property ay stroke, ang value nito ay yellow
Ilapat ang classDef style sa estado
May dalawang paraan upang ilapat ang classDef style sa estado:
- Gamitin ang class syntax upang ilapat ang classDef style sa isa o higit pang estado sa isang statement
- Gamitin ang ::: operator upang ilapat ang classDef style kapag ang estado ay ginagamit sa transition statement (halimbawa, may arrow na tumuturo/ nagmumula sa ibang estado)
1. class statement
Sinasabi ng class statement sa Mermaid na ilapat ang tinukoy na classDef sa isa o higit pang class. Ang form ay:
Kopyahin
Embed
class [one or more state names, separated by commas] [name of a style defined with classDef]
Ang sumusunod ay halimbawa ng paglalapat ng badBadEvent style sa estadong pinangalanang Crash:
Kopyahin
Embed
class Crash badBadEvent
Ang sumusunod ay halimbawa ng paglalapat ng movement style sa dalawang estadong Moving at Crash:
Kopyahin
Embed
class Moving,Crash movement
Narito ang isang halimbawa. Tandaan, ang Crash state ay nilagyan ng dalawang classDef style: movement at badBadEvent
Kopyahin
Embed
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. Paggamit ng ::: operator upang ilapat ang estilo sa estado
Maaari mong gamitin ang operator ::: upang ilapat ang classDef style sa estado. Ang syntax ay:
Kopyahin
Embed
[state]:::[style name]
Maaari mong ilapat ito sa statement na gumagamit ng class, kabilang dito ang start state at end state. Halimbawa:
Kopyahin
Embed
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 --> [*]
Espasyo sa pangalan ng estado
Maaari mo munang tukuyin ang estado gamit ang id, pagkatapos ay i-reference ang id na iyon upang magdagdag ng espasyo sa estado.
Sa sumusunod na halimbawa, may isang estado, na ang ID ay yswsii, na inilarawan bilang ''Your state with spaces in it'. Pagkatapos tukuyin, ang yswsii ay ginamit sa unang transition ng chart ([*] --> yswsii), at ginamit din ito sa transition patungong YetAnotherState (yswsii --> YetAnotherState). Ang yswsii ay nilagyan ng estilo, upang maiiba ito sa ibang estado.
Kopyahin
Embed
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 --> [*]
