स्टेट डायग्राम
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]
निम्नलिखित Crash नाम की अवस्था पर badBadEvent शैली लागू करने का उदाहरण है:
कॉपी करें
एम्बेड
class Crash badBadEvent
निम्नलिखित Moving और Crash दोनों अवस्थाओं पर movement शैली लागू करने का उदाहरण है:
कॉपी करें
एम्बेड
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 --> [*]
