Diagram Status
Sintaks diagram status Mermaid kompatibel dengan sintaks yang digunakan di plantUml, hal ini akan memudahkan pengguna untuk berbagi diagram antara mermaid dan plantUml.
Salin
Sematkan
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Editor lama:
Salin
Sematkan
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Editor baru:
Dalam diagram status, sistem dideskripsikan berdasarkan status dan bagaimana suatu status berubah menjadi status lain melalui transisi. Contoh diagram di atas menunjukkan tiga status: diam, bergerak, dan bertabrakan. Anda mulai dari status diam, dan dari status diam dapat berubah menjadi status bergerak. Dari status bergerak, Anda dapat kembali ke status diam, atau berubah menjadi status bertabrakan. Tidak ada transisi dari status diam ke status bertabrakan. (Jika tetap diam, Anda tidak akan bertabrakan.)
状态
Status dapat dideklarasikan dengan berbagai cara; cara paling sederhana adalah mendefinisikan status hanya dengan sebuah id:
Salin
Sematkan
stateDiagram-v2
stateId
Cara lain adalah menggunakan sintaks state, dan menambahkan deskripsi berikut:
Salin
Sematkan
stateDiagram-v2
state "This is a state description" as s2
Cara lain untuk mendefinisikan status dengan deskripsi adalah mendefinisikan ID status terlebih dahulu, lalu menambahkan titik dua dan deskripsi:
Salin
Sematkan
stateDiagram-v2
s2 : This is a state description
Transisi
Transisi adalah garis penghubung saat suatu status berpindah ke status lain, direpresentasikan dengan panah teks "-->".
Ketika Anda mendefinisikan transisi antara dua status, dan status tersebut belum didefinisikan, status yang belum didefinisikan akan didefinisikan menggunakan id dari transisi tersebut. Setelah itu, Anda dapat menambahkan deskripsi untuk status yang didefinisikan dengan cara ini.
Salin
Sematkan
stateDiagram-v2
s1 --> s2
Anda dapat menambahkan teks pada transisi untuk mendeskripsikan apa yang direpresentasikannya:
Salin
Sematkan
stateDiagram-v2
s1 --> s2: A transition
Mulai dan selesai
Ada dua status khusus yang merepresentasikan awal dan akhir diagram. Kedua status ini direpresentasikan menggunakan sintaks [*], dan arah transisi ke status tersebut menentukan apakah itu status awal atau status akhir.
Salin
Sematkan
stateDiagram-v2
[*] --> s1
s1 --> [*]
Status komposit
Saat menggunakan diagram status di dunia nyata, Anda akan sering menjumpai diagram multi-dimensi, karena suatu status dapat memiliki beberapa status internal, yang disebut status komposit.
Untuk mendefinisikan status komposit, Anda perlu menggunakan sintaks state, diikuti sebuah id, dan menuliskan isi status komposit di dalam kurung kurawal {}. Anda dapat menamai status komposit pada baris tersendiri, seperti mendefinisikan status sederhana. Silakan lihat contoh di bawah ini:
Salin
Sematkan
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Anda dapat mengoperasikannya pada beberapa tingkat:
Salin
Sematkan
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Anda juga dapat mendefinisikan transisi antar status komposit:
Salin
Sematkan
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Catatan: transisi antar status internal yang termasuk dalam status komposit yang berbeda tidak dapat didefinisikan.
Pilihan
Terkadang Anda perlu memodelkan pilihan di antara dua jalur atau lebih, hal ini dapat dilakukan menggunakan <<choice>>.
Salin
Sematkan
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Percabangan/penggabungan
Anda dapat menggunakan <<fork>> <<join>> untuk menentukan percabangan/penggabungan dalam diagram.
Salin
Sematkan
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 --> [*]
Catatan
Penggunaan komentar dalam diagram status dapat menyatakan dengan lebih jelas; Anda dapat memilih untuk menempatkan komentar di sisi kanan atau kiri simpul.
Salin
Sematkan
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.
Konkurensi
Seperti pada plantUml, Anda dapat menggunakan simbol tanda hubung -- untuk menentukan konkurensi.
Salin
Sematkan
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
}
Mengatur arah diagram
Untuk diagram status, Anda dapat menggunakan pernyataan arah untuk mengatur arah rendering diagram, seperti yang ditunjukkan pada contoh ini.
Salin
Sematkan
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Komentar
Komentar dapat dimasukkan dalam diagram status, dan editor akan mengabaikannya. Komentar harus diawali dengan dua tanda persen (%%), semua teks dari penanda tersebut hingga karakter baris baru berikutnya akan dianggap sebagai komentar, termasuk sintaks diagram apa pun. Komentar dapat menempati satu baris tersendiri, atau diletakkan di akhir pernyataan.
Salin
Sematkan
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Mengatur gaya menggunakan classDefs
Batasan classDef diagram status saat ini:
1. Tidak dapat diterapkan pada status awal atau akhir
2. Tidak dapat diterapkan pada status komposit atau di dalam status komposit
Anda dapat menggunakan sintaks classDef (singkatan dari class definition, di mana "class" mirip dengan kelas dalam CSS) untuk mendefinisikan gaya. Setelah classDef adalah nama gaya, diikuti satu atau lebih 'properti-nilai', setiap 'properti-nilai' terdiri dari nama properti CSS yang valid, sebuah titik dua (:), dan nilai yang sesuai.
Berikut adalah contoh classDef yang hanya memiliki satu 'properti-nilai':
Salin
Sematkan
classDef movement font-style:italic;
- Nama gayanya adalah movement
- Satu-satunya properti adalah font-style, nilainya italic
Jika Anda ingin memiliki beberapa 'properti-nilai', Anda dapat meletakkan satu koma (,) di antara setiap 'properti-nilai'.
Berikut adalah contoh yang berisi tiga 'properti-nilai':
Salin
Sematkan
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Nama gayanya adalah badBadEvent
- Properti pertama adalah fill, nilainya #f00
- Properti kedua adalah color, nilainya white
- Properti ketiga adalah font-weight, nilainya bold
- Properti keempat adalah stroke-width, nilainya 2px
- Properti kelima adalah stroke, nilainya yellow
Menerapkan gaya classDef pada status
Ada dua cara untuk menerapkan gaya classDef pada status:
- Menggunakan sintaks class untuk menerapkan gaya classDef pada satu atau lebih status dalam satu pernyataan
- Menggunakan operator ::: untuk menerapkan gaya classDef saat status digunakan dalam pernyataan transisi (misalnya, dengan panah menuju/dari status lain)
1. Pernyataan class
Pernyataan class memberi tahu Mermaid agar menerapkan classDef yang ditentukan pada satu atau lebih kelas. Bentuknya adalah:
Salin
Sematkan
class [one or more state names, separated by commas] [name of a style defined with classDef]
Berikut adalah contoh penerapan gaya badBadEvent pada status bernama Crash:
Salin
Sematkan
class Crash badBadEvent
Berikut adalah contoh penerapan gaya movement pada dua status, Moving dan Crash:
Salin
Sematkan
class Moving,Crash movement
Berikut adalah sebuah contoh. Perhatikan bahwa status Crash menerapkan dua gaya classDef: movement dan badBadEvent
Salin
Sematkan
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. Menerapkan gaya pada status menggunakan operator :::
Anda dapat menggunakan operator ::: untuk menerapkan gaya classDef pada status. Sintaksnya adalah:
Salin
Sematkan
[state]:::[style name]
Anda dapat menerapkannya pada pernyataan yang menggunakan kelas, ini mencakup status awal dan status akhir. Misalnya:
Salin
Sematkan
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 --> [*]
Spasi pada nama status
Anda dapat mendefinisikan status terlebih dahulu menggunakan id, lalu mereferensikan id tersebut di kemudian hari untuk menambahkan spasi pada status.
Pada contoh berikut, ada sebuah status dengan ID yswsii, yang dideskripsikan sebagai ''Your state with spaces in it''. Setelah didefinisikan, yswsii digunakan pada transisi pertama diagram ([*] --> yswsii), dan juga digunakan saat bertransisi ke YetAnotherState (yswsii --> YetAnotherState). yswsii telah diberi gaya sehingga berbeda dari status lainnya.
Salin
Sematkan
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 --> [*]
