תרשים מצב
תחביר תרשים המצבים של 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
דרך נוספת להגדיר מצב עם תיאור היא להגדיר תחילה את מזהה המצב, ואחר כך להוסיף נקודתיים ותיאור:
העתק
הטמעה
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" דומה ל-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 על מצב:
- החלת סגנון classDef על מצב אחד או יותר בהצהרה אחת באמצעות תחביר class
- החלת סגנון 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 --> [*]
