แผนภาพสถานะ
ไวยากรณ์แผนภาพสถานะของ Mermaid เข้ากันได้กับไวยากรณ์ที่ใช้ใน plantUml ซึ่งจะทำให้ผู้ใช้แชร์แผนภาพระหว่าง mermaid และ plantUml ได้ง่ายขึ้น
คัดลอก
ฝัง
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
เอดิเตอร์เก่า:
คัดลอก
ฝัง
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
เอดิเตอร์ใหม่:
ในแผนภาพสถานะ ระบบจะถูกอธิบายตามสถานะและวิธีที่สถานะหนึ่งเปลี่ยนเป็นอีกสถานะหนึ่งผ่านการเปลี่ยนสถานะ แผนภาพตัวอย่างด้านบนแสดงสถานะสามสถานะ: นิ่ง เคลื่อนที่ และชน คุณเริ่มจากสถานะนิ่ง จากสถานะนิ่งสามารถเปลี่ยนเป็นสถานะเคลื่อนที่ได้ จากสถานะเคลื่อนที่ คุณสามารถกลับไปยังสถานะนิ่ง หรือเปลี่ยนเป็นสถานะชนได้ ไม่มีการเปลี่ยนสถานะจากสถานะนิ่งไปยังสถานะชน (หากอยู่นิ่ง คุณจะไม่ชน)
状态
สามารถประกาศสถานะได้หลายวิธี วิธีที่ง่ายที่สุดคือกำหนดสถานะด้วย id เพียงหนึ่งตัว:
คัดลอก
ฝัง
stateDiagram-v2
stateId
อีกวิธีหนึ่งคือใช้ไวยากรณ์ state และเพิ่มคำอธิบายต่อไปนี้:
คัดลอก
ฝัง
stateDiagram-v2
state "This is a state description" as s2
อีกวิธีในการกำหนดสถานะที่มีคำอธิบายคือกำหนด ID ของสถานะก่อน แล้วเพิ่มเครื่องหมายทวิภาคและคำอธิบาย:
คัดลอก
ฝัง
stateDiagram-v2
s2 : This is a state description
การเปลี่ยนสถานะ
การเปลี่ยนสถานะหมายถึงเส้นเชื่อมต่อเมื่อสถานะหนึ่งเข้าสู่อีกสถานะหนึ่ง แสดงด้วยลูกศรข้อความ "-->"
เมื่อคุณกำหนดการเปลี่ยนสถานะระหว่างสองสถานะ และสถานะยังไม่ได้ถูกกำหนด สถานะที่ยังไม่ได้กำหนดจะถูกกำหนดโดยใช้ id ในการเปลี่ยนสถานะนั้น หลังจากนั้น คุณสามารถเพิ่มคำอธิบายให้กับสถานะที่กำหนดด้วยวิธีนี้ได้
คัดลอก
ฝัง
stateDiagram-v2
s1 --> s2
สามารถเพิ่มข้อความลงในการเปลี่ยนสถานะเพื่ออธิบายสิ่งที่มันแสดงถึงได้:
คัดลอก
ฝัง
stateDiagram-v2
s1 --> s2: A transition
เริ่มต้นและสิ้นสุด
มีสถานะพิเศษสองสถานะที่แสดงการเริ่มต้นและการหยุดของแผนภาพ สถานะทั้งสองนี้แสดงด้วยไวยากรณ์ [*] ทิศทางของการเปลี่ยนไปยังสถานะนั้นเป็นตัวกำหนดว่าเป็นสถานะเริ่มต้นหรือสถานะสิ้นสุด
คัดลอก
ฝัง
stateDiagram-v2
[*] --> s1
s1 --> [*]
สถานะผสม
เมื่อใช้แผนภาพสถานะในโลกจริง คุณมักพบแผนภาพหลายมิติ เนื่องจากสถานะหนึ่งสามารถมีสถานะภายในหลายสถานะ ซึ่งเรียกว่าสถานะผสม
ในการกำหนดสถานะผสม คุณต้องใช้ไวยากรณ์ state ตามด้วย id และเขียนเนื้อความของสถานะผสมในวงเล็บปีกกา {} คุณสามารถตั้งชื่อสถานะผสมบนบรรทัดแยกต่างหากได้เหมือนการกำหนดสถานะแบบง่าย โปรดดูตัวอย่างด้านล่าง:
คัดลอก
ฝัง
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
คุณสามารถดำเนินการได้หลายระดับ:
คัดลอก
ฝัง
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
คุณยังสามารถกำหนดการเปลี่ยนสถานะระหว่างสถานะผสมได้:
คัดลอก
ฝัง
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
หมายเหตุ: ไม่สามารถกำหนดการเปลี่ยนสถานะระหว่างสถานะภายในที่เป็นของสถานะผสมที่ต่างกันได้
การเลือก
บางครั้งคุณต้องจำลองการเลือกระหว่างสองเส้นทางหรือมากกว่า สามารถทำได้โดยใช้ <<choice>>
คัดลอก
ฝัง
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
การแตกแขนง/การรวม
สามารถใช้ <<fork>> <<join>> เพื่อระบุการแตกแขนง/การรวมในแผนภาพได้
คัดลอก
ฝัง
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 --> [*]
หมายเหตุ
การใช้ความคิดเห็นในแผนภาพสถานะช่วยให้สื่อสารได้ชัดเจนขึ้น สามารถเลือกวางความคิดเห็นไว้ทางด้านขวาหรือด้านซ้ายของโหนดได้
คัดลอก
ฝัง
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.
การทำงานพร้อมกัน
เช่นเดียวกับใน plantUml คุณสามารถใช้สัญลักษณ์ขีดกลาง -- เพื่อระบุการทำงานพร้อมกันได้
คัดลอก
ฝัง
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
}
ตั้งค่าทิศทางของแผนภาพ
สำหรับแผนภาพสถานะ คุณสามารถใช้คำสั่งทิศทางเพื่อตั้งค่าทิศทางการเรนเดอร์ของแผนภาพได้ ดังที่แสดงในตัวอย่างนี้
คัดลอก
ฝัง
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
ความคิดเห็น
สามารถป้อนความคิดเห็นในแผนภาพสถานะได้ และเอดิเตอร์จะไม่สนใจความคิดเห็นเหล่านี้ ความคิดเห็นต้องขึ้นต้นด้วยเครื่องหมายเปอร์เซ็นต์คู่ (%%) ข้อความทั้งหมดตั้งแต่เครื่องหมายนี้จนถึงตัวขึ้นบรรทัดใหม่ถัดไปจะถือเป็นความคิดเห็น รวมถึงไวยากรณ์ของแผนภาพใด ๆ ความคิดเห็นสามารถอยู่บรรทัดเดียวเดี่ยว ๆ หรือวางไว้ที่ส่วนท้ายของคำสั่งก็ได้
คัดลอก
ฝัง
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
ใช้ classDefs ในการกำหนดสไตล์
ข้อจำกัดปัจจุบันของ classDef ในแผนภาพสถานะ:
1. ไม่สามารถใช้กับสถานะเริ่มต้นหรือสถานะสิ้นสุดได้
2. ไม่สามารถใช้กับสถานะผสมหรือภายในสถานะผสมได้
คุณสามารถใช้ไวยากรณ์ classDef (ตัวย่อของ class definition โดยคำว่า "class" คล้ายกับคลาสใน CSS) เพื่อกำหนดสไตล์ได้ หลัง classDef จะเป็นชื่อสไตล์ ต่อด้วย 'คุณสมบัติ-ค่า' หนึ่งรายการหรือมากกว่า โดยแต่ละ 'คุณสมบัติ-ค่า' ประกอบด้วยชื่อคุณสมบัติ CSS ที่ถูกต้องหนึ่งชื่อ เครื่องหมายทวิภาค (:) และค่าที่สอดคล้องกัน
ต่อไปนี้คือตัวอย่างของ classDef ที่มีเพียง 'คุณสมบัติ-ค่า' เดียว:
คัดลอก
ฝัง
classDef movement font-style:italic;
- ชื่อสไตล์คือ movement
- คุณสมบัติเดียวคือ font-style ค่าคือ italic
หากคุณต้องการมี 'คุณสมบัติ-ค่า' หลายรายการ สามารถวางจุลภาค (,) ระหว่างแต่ละ 'คุณสมบัติ-ค่า' ได้
ต่อไปนี้คือตัวอย่างที่มี 'คุณสมบัติ-ค่า' สามรายการ:
คัดลอก
ฝัง
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- ชื่อสไตล์คือ badBadEvent
- คุณสมบัติแรกคือ fill ค่าของมันคือ #f00
- คุณสมบัติที่สองคือ color ค่าของมันคือ white
- คุณสมบัติที่สามคือ font-weight ค่าของมันคือ bold
- คุณสมบัติที่สี่คือ stroke-width ค่าของมันคือ 2px
- คุณสมบัติที่ห้าคือ stroke ค่าของมันคือ yellow
นำสไตล์ classDef ไปใช้กับสถานะ
มีสองวิธีในการนำสไตล์ classDef ไปใช้กับสถานะ:
- ใช้ไวยากรณ์ class เพื่อนำสไตล์ classDef ไปใช้กับสถานะหนึ่งหรือหลายสถานะในคำสั่งเดียว
- ใช้ตัวดำเนินการ ::: เพื่อนำสไตล์ classDef ไปใช้เมื่อสถานะถูกใช้ในคำสั่งการเปลี่ยนสถานะ (เช่น มีลูกศรชี้ไปยัง/มาจากอีกสถานะหนึ่ง)
1. คำสั่ง class
คำสั่ง class บอก Mermaid ให้นำ classDef ที่ระบุไปใช้กับคลาสหนึ่งหรือหลายคลาส รูปแบบคือ:
คัดลอก
ฝัง
class [one or more state names, separated by commas] [name of a style defined with classDef]
ต่อไปนี้คือตัวอย่างการนำสไตล์ badBadEvent ไปใช้กับสถานะชื่อ Crash:
คัดลอก
ฝัง
class Crash badBadEvent
ต่อไปนี้คือตัวอย่างการนำสไตล์ movement ไปใช้กับสถานะ Moving และ Crash สองสถานะ:
คัดลอก
ฝัง
class Moving,Crash movement
นี่คือตัวอย่าง โปรดทราบว่าสถานะ Crash ถูกนำสไตล์ classDef สองแบบไปใช้: movement และ badBadEvent
คัดลอก
ฝัง
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. ใช้ตัวดำเนินการ ::: เพื่อนำสไตล์ไปใช้กับสถานะ
คุณสามารถใช้ตัวดำเนินการ ::: เพื่อนำสไตล์ classDef ไปใช้กับสถานะได้ ไวยากรณ์คือ:
คัดลอก
ฝัง
[state]:::[style name]
คุณสามารถนำไปใช้ในคำสั่งที่ใช้คลาส ซึ่งรวมถึงสถานะเริ่มต้นและสถานะสิ้นสุด ตัวอย่าง:
คัดลอก
ฝัง
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 --> [*]
ช่องว่างในชื่อสถานะ
สามารถกำหนดสถานะด้วย id ก่อน แล้วอ้างอิง id นั้นในภายหลังเพื่อเพิ่มช่องว่างให้กับสถานะได้
ในตัวอย่างต่อไปนี้ มีสถานะหนึ่งที่มี ID เป็น yswsii มีคำอธิบายว่า 'Your state with spaces in it' หลังจากกำหนดแล้ว yswsii ถูกใช้ในการเปลี่ยนสถานะครั้งแรกของแผนภาพ ([*] --> yswsii) และยังถูกใช้เมื่อเปลี่ยนสถานะไปยัง YetAnotherState (yswsii --> YetAnotherState) yswsii ถูกกำหนดสไตล์ให้แตกต่างจากสถานะอื่น
คัดลอก
ฝัง
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 --> [*]
