Rajah Keadaan
Sintaks gambar rajah keadaan Mermaid serasi dengan sintaks yang digunakan dalam plantUml, ini akan memudahkan pengguna berkongsi carta antara mermaid dan plantUml.
Salin
Benamkan
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Editor lama:
Salin
Benamkan
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Editor baharu:
Dalam gambar rajah keadaan, sistem diterangkan berdasarkan keadaan dan bagaimana sesuatu keadaan berubah kepada keadaan lain melalui peralihan. Carta contoh di atas menunjukkan tiga keadaan: pegun, bergerak dan berlanggar. Anda bermula dari keadaan pegun, dan dari keadaan pegun boleh berubah kepada keadaan bergerak. Dari keadaan bergerak, anda boleh kembali ke keadaan pegun, atau berubah kepada keadaan berlanggar. Tiada peralihan dari keadaan pegun ke keadaan berlanggar. (Jika kekal pegun, anda tidak akan berlanggar.)
状态
Keadaan boleh diisytiharkan dalam pelbagai cara; cara paling mudah ialah mentakrifkan keadaan dengan hanya satu id:
Salin
Benamkan
stateDiagram-v2
stateId
Cara lain ialah menggunakan sintaks state, dan menambah penerangan berikut:
Salin
Benamkan
stateDiagram-v2
state "This is a state description" as s2
Cara lain untuk mentakrifkan keadaan dengan penerangan ialah dengan mentakrifkan ID keadaan dahulu, kemudian menambah titik bertindih dan penerangan:
Salin
Benamkan
stateDiagram-v2
s2 : This is a state description
Peralihan
Peralihan merujuk kepada garis sambungan apabila satu keadaan masuk ke keadaan lain, diwakili menggunakan anak panah teks "-->".
Apabila anda mentakrifkan peralihan antara dua keadaan, dan keadaan tersebut belum ditakrifkan, keadaan yang tidak ditakrifkan akan ditakrifkan menggunakan id dalam peralihan. Selepas itu, anda boleh menambah penerangan untuk keadaan yang ditakrifkan dengan cara ini.
Salin
Benamkan
stateDiagram-v2
s1 --> s2
Teks boleh ditambah pada peralihan untuk menerangkan apa yang diwakilinya:
Salin
Benamkan
stateDiagram-v2
s1 --> s2: A transition
Mula dan tamat
Terdapat dua keadaan khas yang mewakili permulaan dan pemberhentian carta. Kedua-dua keadaan ini diwakili menggunakan sintaks [*], dan arah peralihan ke keadaan tersebut menentukan sama ada ia keadaan mula atau keadaan tamat.
Salin
Benamkan
stateDiagram-v2
[*] --> s1
s1 --> [*]
Keadaan komposit
Apabila menggunakan gambar rajah keadaan dalam dunia sebenar, anda sering menemui carta berbilang dimensi, kerana satu keadaan boleh mempunyai berbilang keadaan dalaman, ini dipanggil keadaan komposit.
Untuk mentakrifkan keadaan komposit, anda perlu menggunakan sintaks state, diikuti dengan id, dan menulis badan keadaan komposit dalam pendakap besar {}. Anda boleh menamakan keadaan komposit pada baris berasingan, sama seperti mentakrifkan keadaan mudah. Sila rujuk contoh di bawah:
Salin
Benamkan
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Anda boleh beroperasi pada beberapa peringkat:
Salin
Benamkan
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Anda juga boleh mentakrifkan peralihan antara keadaan komposit:
Salin
Benamkan
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Nota: peralihan antara keadaan dalaman yang tergolong dalam keadaan komposit berbeza tidak boleh ditakrifkan.
Pilihan
Kadangkala anda perlu memodelkan pemilihan antara dua atau lebih laluan, ia boleh dicapai menggunakan <<choice>>.
Salin
Benamkan
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Pecah/gabung
Anda boleh menggunakan <<fork>> <<join>> untuk menentukan pecah/gabung dalam carta.
Salin
Benamkan
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 --> [*]
Nota
Penggunaan komen dalam gambar rajah keadaan dapat menyatakan dengan lebih jelas; anda boleh memilih untuk meletakkan komen di sebelah kanan atau kiri nod.
Salin
Benamkan
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.
Serentak
Sama seperti dalam plantUml, anda boleh menggunakan simbol sengkang -- untuk menentukan keserentakan.
Salin
Benamkan
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
}
Tetapkan arah carta
Bagi gambar rajah keadaan, anda boleh menggunakan pernyataan arah untuk menetapkan arah pemaparan carta, seperti yang ditunjukkan dalam contoh ini.
Salin
Benamkan
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Komen
Komen boleh dimasukkan dalam gambar rajah keadaan, dan editor akan mengabaikannya. Komen mesti bermula dengan dua tanda peratus (%%); semua teks dari penanda itu hingga aksara baris baharu seterusnya akan dianggap sebagai komen, termasuk sebarang sintaks carta. Komen boleh menduduki satu baris sendiri, atau diletakkan di penghujung pernyataan.
Salin
Benamkan
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Gunakan classDefs untuk menetapkan gaya
Batasan semasa classDef gambar rajah keadaan:
1. Tidak boleh digunakan pada keadaan mula atau tamat
2. Tidak boleh digunakan pada keadaan komposit atau di dalam keadaan komposit
Anda boleh menggunakan sintaks classDef (iaitu singkatan bagi class definition, di mana "class" adalah serupa dengan kelas dalam CSS) untuk mentakrifkan gaya. Selepas classDef ialah nama gaya, diikuti dengan satu atau lebih 'sifat-nilai', setiap 'sifat-nilai' terdiri daripada nama sifat CSS yang sah, satu titik bertindih (:), dan nilai yang sepadan.
Berikut ialah contoh classDef dengan hanya satu 'sifat-nilai':
Salin
Benamkan
classDef movement font-style:italic;
- Nama gaya ialah movement
- Sifat tunggalnya ialah font-style, nilainya italic
Jika anda ingin mempunyai berbilang 'sifat-nilai', anda boleh meletakkan satu koma (,) antara setiap 'sifat-nilai'.
Berikut ialah contoh yang mengandungi tiga 'sifat-nilai':
Salin
Benamkan
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Nama gaya ialah badBadEvent
- Sifat pertama ialah fill, nilainya ialah #f00
- Sifat kedua ialah color, nilainya ialah white
- Sifat ketiga ialah font-weight, nilainya ialah bold
- Sifat keempat ialah stroke-width, nilainya ialah 2px
- Sifat kelima ialah stroke, nilainya ialah yellow
Gunakan gaya classDef pada keadaan
Terdapat dua cara untuk menggunakan gaya classDef pada keadaan:
- Gunakan sintaks class untuk menggunakan gaya classDef pada satu atau lebih keadaan dalam satu pernyataan
- Gunakan operator ::: untuk menggunakan gaya classDef apabila keadaan digunakan dalam pernyataan peralihan (contohnya, dengan anak panah menunjuk ke/dari keadaan lain)
1. Pernyataan class
Pernyataan class memberitahu Mermaid untuk menggunakan classDef yang ditentukan pada satu atau lebih kelas. Bentuknya ialah:
Salin
Benamkan
class [one or more state names, separated by commas] [name of a style defined with classDef]
Berikut ialah contoh penggunaan gaya badBadEvent pada keadaan bernama Crash:
Salin
Benamkan
class Crash badBadEvent
Berikut ialah contoh penggunaan gaya movement pada dua keadaan, Moving dan Crash:
Salin
Benamkan
class Moving,Crash movement
Berikut ialah satu contoh. Sila ambil perhatian bahawa keadaan Crash menggunakan dua gaya classDef: movement dan badBadEvent
Salin
Benamkan
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. Gunakan operator ::: untuk menggunakan gaya pada keadaan
Anda boleh menggunakan operator ::: untuk menggunakan gaya classDef pada keadaan. Sintaksnya ialah:
Salin
Benamkan
[state]:::[style name]
Anda boleh menggunakannya dalam pernyataan yang menggunakan kelas, ini termasuk keadaan mula dan keadaan tamat. Contohnya:
Salin
Benamkan
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 --> [*]
Ruang dalam nama keadaan
Anda boleh mentakrifkan keadaan menggunakan id dahulu, kemudian merujuk id tersebut untuk menambah ruang pada keadaan.
Dalam contoh berikut, terdapat satu keadaan dengan ID yswsii, diterangkan sebagai ''Your state with spaces in it''. Selepas ditakrifkan, yswsii digunakan dalam peralihan pertama carta ([*] --> yswsii), dan juga digunakan semasa peralihan ke YetAnotherState (yswsii --> YetAnotherState). yswsii telah ditetapkan gayanya, supaya berbeza daripada keadaan lain.
Salin
Benamkan
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 --> [*]
