مخطط الحالة
تتوافق صيغة مخطط الحالة في 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 في مخطط الحالة:
١. لا يمكن تطبيقه على حالة البداية أو حالة النهاية
٢. لا يمكن تطبيقه على حالة مركّبة أو داخل حالة مركّبة
يمكنك استخدام صيغة 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 عندما تُستخدم الحالة في عبارة انتقال (مثل، سهم متّجه إلى/من حالة أخرى)
١. عبارة 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
٢. استخدام المعامل ::: لتطبيق تنسيق على الحالة
يمكنك استخدام المعامل ::: لتطبيق تنسيق 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 لاحقًا لإضافة مسافات إلى الحالة.
في المثال التالي، توجد حالة معرّفها 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 --> [*]
