Mermaid स्टेट आरेख एडिटर
स्टेट आरेख दिखाता है कि कोई चीज़ किन अवस्थाओं में हो सकती है और कौन-सी घटना उसे एक अवस्था से दूसरी में ले जाती है। यह तब ठीक है जब विषय का कोई जीवनचक्र हो — कोई ऑर्डर, कोई चालान, कोई सदस्यता — और दिलचस्प सवाल यह हो कि कौन-से संक्रमण जायज़ हैं। अगर आप करने लायक चरण बता रहे हैं, न कि रुकने लायक अवस्थाएँ, तो आपको फ़्लोचार्ट चाहिए।
किसी ऑनलाइन ऑर्डर का जीवनचक्र
यही वह जगह है जहाँ स्टेट मशीन अपनी जगह कमाती है: भेजे जाने के बाद तीन परस्पर अपवर्जी परिणाम हैं और उनमें से दो पीछे लौटते हैं। ध्यान दें कि हर अवस्था `state "लेबल" as पहचान` से घोषित है। हिंदी में यह सजावट नहीं बल्कि ज़रूरत है, जिसकी वजह नीचे ग़लतियों वाले हिस्से में है।
stateDiagram-v2
direction LR
state "मसौदा" as draft
state "भुगतान की प्रतीक्षा" as awaitingPayment
state "भेजने को तैयार" as readyToShip
state "रास्ते में" as inTransit
state "पहुँच गया" as delivered
state "वापसी का अनुरोध" as returnRequested
[*] --> draft
draft --> awaitingPayment: ऑर्डर दिया गया
awaitingPayment --> readyToShip: भुगतान मिला
awaitingPayment --> [*]: 24 घंटे बाद समाप्त
readyToShip --> inTransit: कूरियर ने उठाया
inTransit --> delivered: पाने वाले ने हस्ताक्षर किए
delivered --> returnRequested: वापसी की अवधि के भीतर
returnRequested --> awaitingPayment: राशि लौटाई गई
delivered --> [*]: वापसी की अवधि बीत गईहल किए गए उदाहरण
1. सबसे छोटी स्टेट मशीन
`[*]` प्रवेश-बिंदु भी है और निकास-बिंदु भी: कौन-सा, यह इस पर निर्भर है कि वह तीर के किस ओर है। यही सबसे छोटा ढाँचा है जिसे बनाना सार्थक है।
stateDiagram-v2
[*] --> सक्रिय
सक्रिय --> बंद
बंद --> [*]2. नाम वाले संक्रमण
कोलन के बाद का पाठ उस घटना का नाम है जो संक्रमण कराती है। यही हिस्सा आरेख को उपयोगी बनाता है: इसके बिना आपके पास अवस्थाओं की सूची है और एक भी नियम नहीं।
stateDiagram-v2
[*] --> लंबित
लंबित --> भुगतानहुआ: वसूली सफल
लंबित --> समयसमाप्त: अवधि बीती
भुगतानहुआ --> भेजागया: गोदाम से निकला
भेजागया --> मिलगया: पाने वाले ने हस्ताक्षर किए
मिलगया --> [*]
समयसमाप्त --> [*]3. पढ़ने लायक लेबल और सुरक्षित पहचान
देवनागरी स्टेट-पहचान के रूप में चलती तो है, पर स्थान (स्पेस) उसे चुपचाप तोड़ देता है, और हिंदी में लगभग कोई अवस्था-नाम एक शब्द में नहीं समाता। `state "लेबल" as पहचान` इसे एक ही बार में हल कर देता है: लेबल पढ़ने लायक और पहचान सुरक्षित।
stateDiagram-v2
state "भुगतान की प्रतीक्षा" as awaitingPayment
state "भेजने के लिए तैयार" as readyToShip
state "ग्राहक के रास्ते में" as onTheWay
[*] --> awaitingPayment
awaitingPayment --> readyToShip: भुगतान की पुष्टि हुई
readyToShip --> onTheWay: कूरियर ने उठाया
onTheWay --> [*]4. संयुक्त अवस्थाएँ और चयन-बिंदु
संयुक्त अवस्था के भीतर अपनी एक मशीन होती है: इसका उपयोग तब करें जब किसी चरण का भीतरी जीवन मायने रखता हो। `<<choice>>` एक सशर्त शाखा-बिंदु है, और उसे उन संक्रमणों से पहले घोषित करना ज़रूरी है जो उसका उपयोग करते हैं।
stateDiagram-v2
state check <<choice>>
[*] --> processing
state processing {
[*] --> picking
picking --> packing: सामान उठा लिया गया
packing --> [*]
}
processing --> check
check --> passed: गुणवत्ता जाँच पास
check --> failed: दोष मिला
passed --> [*]
failed --> [*]5. समांतर क्षेत्र
अपनी अलग पंक्ति में दो हाइफ़न किसी संयुक्त अवस्था को एक साथ सक्रिय रहने वाले क्षेत्रों में बाँट देते हैं। यही अकेली चीज़ है जो स्टेट आरेख कर पाता है और फ़्लोचार्ट सचमुच नहीं कर पाता।
stateDiagram-v2
[*] --> registration
state registration {
[*] --> emailUnverified
emailUnverified --> emailVerified: लिंक पर क्लिक हुआ
--
[*] --> profileEmpty
profileEmpty --> profileComplete: फ़ॉर्म भेजा गया
}
registration --> active: दोनों पूरे हुए
active --> [*]स्टेट आरेख सिंटैक्स का सार
`stateDiagram` नहीं, `stateDiagram-v2` इस्तेमाल करें। दोनों बनते हैं, पर v2 वह बिछावट-इंजन है जिस पर अब भी काम हो रहा है, और वह संयुक्त तथा समांतर अवस्थाओं को साफ़ तौर पर बेहतर संभालता है।
| सिंटैक्स | अर्थ |
|---|---|
| stateDiagram-v2 | आरेख खोलता है। `stateDiagram` अब भी चलता है पर पुरानी बिछावट लेता है। |
| [*] --> A | आरंभिक अवस्था — प्रवेश-बिंदु। |
| A --> [*] | अंतिम अवस्था। |
| A --> B | बिना नाम का संक्रमण। |
| A --> B: घटना | उस घटना के नाम वाला संक्रमण जो उसे कराती है। |
| state "लेबल" as पहचान | पढ़ने लायक लेबल और बिना स्थान वाली पहचान। हिंदी में यही चलन रखें। |
| state A { ... } | संयुक्त अवस्था, भीतर अपनी मशीन के साथ। |
| -- | संयुक्त अवस्था के भीतर उसे समांतर क्षेत्रों में बाँटता है। |
| state x <<choice>> | सशर्त शाखा-बिंदु। |
| state f <<fork>> / <<join>> | समांतर संक्रमणों में बाँटना और फिर मिलाना। |
| note right of A: पाठ | टिप्पणी जोड़ता है। `note left of` भी है। |
| direction LR | मशीन को ऊपर-से-नीचे के बजाय बाएँ-से-दाएँ बिछाता है। |
वे छह ग़लतियाँ जो स्टेट आरेख को तोड़ती हैं
Mermaid 11.12.2 पर दोबारा बनाई गईं। पहली चार बनना रोक देती हैं। आख़िरी दो इससे भी बुरी हैं: वे बिना पलक झपकाए बन जाती हैं और ऐसा आरेख लौटाती हैं जिसका अर्थ वह नहीं जो आपने लिखा।
आपको क्या दिखता है
बन तो जाता है, पर एक अवस्था कई डिब्बों में बँट गई है
क्यों
स्टेट-पहचान के भीतर स्थान (स्पेस) है। हिंदी में यह सबसे आसानी से होने वाली ग़लती है, क्योंकि हमारे लगभग किसी अवस्था-नाम में एक से ज़्यादा शब्द होते हैं। Mermaid इसे न ठुकराता है और न बाक़ी हिस्से को विवरण मानता है: वह हर शब्द के लिए अलग डिब्बा बना देता है। निकली हुई पहचानों को पढ़कर मापा गया — पहला शब्द ही तीर से जुड़ता है और बाक़ी बिना किसी जोड़ के पड़े रह जाते हैं। आरेख चुपचाप चौड़ा हो जाता है। विवरण की सुविधा सचमुच मौजूद है, पर उसके लिए कोलन चाहिए: `awaitingPayment: भुगतान आने की प्रतीक्षा`।
समाधान
अवस्था को `state "लेबल" as पहचान` से घोषित करें और हमेशा पहचान से ही उसका ज़िक्र करें। हिंदी में इसे नियम मानें, अपवाद नहीं।
stateDiagram-v2
[*] --> भुगतान की प्रतीक्षा
भुगतान की प्रतीक्षा --> बंदstateDiagram-v2
state "भुगतान की प्रतीक्षा" as awaitingPayment
[*] --> awaitingPayment
awaitingPayment --> बंदआपको क्या दिखता है
Parse error जो `got 'INVALID'` पर ख़त्म होती है
क्यों
स्टेट-पहचान में हाइफ़न है। स्थान से बचने की कोशिश में हाइफ़न वाले नाम अपने आप सूझते हैं — `in-progress`, `pre-approved` — पर हाइफ़न को संक्रमण-तीर की शुरुआत पढ़ा जाता है।
समाधान
पहचान के लिए एक शब्द या अंडरस्कोर लें, और पढ़ने लायक पाठ उद्धरण चिह्नों वाले लेबल में रखें।
stateDiagram-v2
[*] --> in-progress
in-progress --> बंदstateDiagram-v2
state "प्रक्रिया में" as inProgress
[*] --> inProgress
inProgress --> बंदआपको क्या दिखता है
संयुक्त अवस्था के भीतर Parse error
क्यों
संयुक्त अवस्था `{` से खुली और कभी बंद नहीं हुई। बंद करने वाला कोष्ठक अपनी अलग पंक्ति में होना चाहिए।
समाधान
ब्लॉक बंद करें।
stateDiagram-v2
[*] --> outer
state outer {
[*] --> innerstateDiagram-v2
[*] --> outer
state outer {
[*] --> inner
}आपको क्या दिखता है
Lexical error on line N. Unrecognized text.
क्यों
समांतर क्षेत्रों का विभाजक ग़लत संख्या में हाइफ़न से लिखा है। संयुक्त अवस्था के भीतर, अपनी अलग पंक्ति में, वे ठीक दो होते हैं। तीन हाइफ़न बिलकुल दूसरा टोकन है।
समाधान
ठीक `--` इस्तेमाल करें।
stateDiagram-v2
state both {
[*] --> A
---
[*] --> B
}stateDiagram-v2
state both {
[*] --> A
--
[*] --> B
}आपको क्या दिखता है
Parse error on line 1 जो `got 'ID'` पर ख़त्म होती है
क्यों
ऐसा संस्करण-प्रत्यय जो है ही नहीं। सिर्फ़ `stateDiagram` और `stateDiagram-v2` हैं, और कुछ नहीं: `-v3` पहली ही पंक्ति में गिर जाता है।
समाधान
`stateDiagram-v2` इस्तेमाल करें।
stateDiagram-v3
[*] --> मसौदाstateDiagram-v2
[*] --> मसौदाआपको क्या दिखता है
बन तो जाता है, पर चयन-बिंदु साधारण अवस्था की तरह बना है
क्यों
`<<choice>>` की घोषणा उन संक्रमणों के बाद आई जो उसका उपयोग करते हैं। Mermaid अवस्था को पहली बार मिलते ही बना देता है, और बाद में जोड़ा गया स्टीरियोटाइप पहले से बनी चीज़ को नहीं बदलता।
समाधान
छद्म-अवस्थाओं को उन संक्रमणों से पहले घोषित करें जो उनका ज़िक्र करते हैं।
stateDiagram-v2
[*] --> check
check --> passed
check --> failed
state check <<choice>>stateDiagram-v2
state check <<choice>>
[*] --> check
check --> passed
check --> failedबनने के बारे में टिप्पणियाँ
Mermaid 11.12.2 पर मापा गया, वही संस्करण जो यह साइट चलाती है।
यही अकेला आरेख है जहाँ देवनागरी पहचान के रूप में चलती है
यह अंतर जानने लायक है क्योंकि यह हिंदी में सीधे काम आता है। फ़्लोचार्ट की नोड-पहचान और क्लास के नाम में देवनागरी `Lexical error` देती है, पर स्टेट-पहचान में वह चलती है — जाँचा गया, `[*] --> लंबित` ठीक बनता है और निकली हुई पहचान `state-लंबित` होती है। ER आरेख की एंटिटी में भी यही बात है। यानी लिपि की पाबंदी सिर्फ़ दो प्रकारों पर है, सब पर नहीं। फिर भी इस पन्ने के उदाहरण अंग्रेज़ी पहचानों का चलन रखते हैं, क्योंकि अगला बिंदु ज़्यादा भारी पड़ता है।
पहचान में स्थान यहीं चुपचाप विफल होता है
प्रकारों के बीच की तुलना जानने लायक है, क्योंकि एक ही चूक बहुत अलग-अलग तरह से दंडित होती है। फ़्लोचार्ट में नोड-पहचान का स्थान Parse error देता है और आपको तुरंत पता चल जाता है। स्टेट आरेख में वह कुछ नहीं देता: आरेख बन जाता है और अवस्था हर शब्द के लिए एक डिब्बे में बँट जाती है। यही अंतर है उस ग़लती में जो बता देती है और उस में जो चुप रह जाती है। चूँकि हिंदी में लगभग कोई अवस्था-नाम एक शब्द में नहीं समाता, असली बचाव यही है कि आदतन `state "…" as पहचान` लिखा जाए।
ऊँचाई प्रति अवस्था लगभग 114 पिक्सल बढ़ती है
मापा गया: तीन अवस्थाएँ लगभग 91×348 का viewBox देती हैं, चालीस अवस्थाएँ 100×4566 — यानी प्रति अवस्था लगभग 114 पिक्सल। फ़्लोचार्ट की तरह यहाँ भी चौड़ाई लगभग हिलती नहीं: स्टेट मशीनें नीचे की ओर बढ़ती हैं। अगर जीवनचक्र लंबा और कम शाखाओं वाला है, तो आरेख में `direction LR` रख देना सामान्य समाधान है।
stateDiagram और stateDiagram-v2 दोनों बनते हैं — और जाल यही है
अक्सर पढ़ने को मिलता है कि «`stateDiagram-v2` के बिना कुछ नहीं बनता»। 11.12.2 में यह सच नहीं है: दोनों कुंजी-शब्द बिना त्रुटि बनते हैं। जो बदलता है वह बिछावट की गुणवत्ता है, ख़ासकर संयुक्त और समांतर अवस्थाओं के साथ, और पुराना इस्तेमाल करने पर कोई चेतावनी नहीं आती। अगर कोई संयुक्त अवस्था भिंची हुई लगे या तीर अजीब रास्तों से घूमें, तो आरेख दोबारा लिखने से पहले देखिए कि आपने उसे किस कुंजी-शब्द से खोला था।
लेबल HTML हैं, इसलिए PNG निर्यात दोबारा बनाता है
फ़्लोचार्ट, क्लास और ER आरेखों की तरह स्टेट के लेबल भी SVG के भीतर `<foreignObject>` में बनते हैं। चूँकि ब्राउज़र उसे कैनवस पर उतारने से मना करते हैं, इस साइट का PNG निर्यात आरेख को पहले सादे SVG पाठ-लेबल के साथ दोबारा बनाता है। PNG सही और पूरे आकार में निकलता है; टाइपसेटिंग स्क्रीन से बहुत थोड़ी अलग रहती है।
कब कोई दूसरा आरेख बेहतर है
अगर आपके लेबल काम बता रहे हैं — जाँचें, भेजें, फिर कोशिश करें — तो आप कोई प्रक्रिया बता रहे हैं, जीवनचक्र नहीं, और ईमानदार विकल्प फ़्लोचार्ट है। सबसे साफ़ संकेत यह है कि आप इस सवाल का जवाब नहीं दे पाते कि «इस अवस्था में जो चीज़ है, वह है क्या?»
अगर कई घटकों में से हर एक का अपना जीवनचक्र है और दिलचस्प बात उनका आपसी मेल है, तो हर घटक के लिए एक स्टेट आरेख और मेल के लिए एक सीक्वेंस आरेख किसी एक विशाल मशीन से बेहतर रहता है।
अगर हर अवस्था हर दूसरी अवस्था से जुड़ी है, तो आरेख जैसे भी बनाइए, उलझा ही रहेगा। आम तौर पर इसका मतलब यह होता है कि जिन्हें आपने अवस्थाएँ गिना है वे दरअसल स्वतंत्र रूप से मिलने वाले झंडे हैं; ऐसे में वैध संयोजनों की एक तालिका किसी चित्र से कहीं ज़्यादा कहती है।
अन्य आरेख प्रकार
लिखा Dominik Malsch · अंतिम अद्यतन: