पूर्ण चरण-दर-चरण ट्यूटोरियल: एक राज्य मशीन आरेख बनाने का तरीका (पूर्ण शुरुआती के लिए)

एक यूएमएल राज्य आरेख एक शक्तिशाली दृश्य उपकरण है जो घटनाओं के प्रतिक्रिया में विभिन्न अवस्थाओं के बीच संक्रमण के रूप में एक प्रणाली के गतिशील व्यवहार का मॉडल बनाता है। यह वस्तु या प्रक्रिया के जीवनचक्र को कैप्चर करता है—कि यह क्या हो सकता है हो सकता है में, क्या बदलाव को तैयार करता है, और राज्य परिवर्तन के दौरान कौन सी क्रियाएँ होती हैं—जिससे यह ट्रैफिक लाइट्स, वेंडिंग मशीन, लॉगिन वर्कफ्लो या गेम कैरेक्टर जैसी जटिल प्रणालियों को समझने के लिए आदर्श बनता है। राज्यों (जैसे “लाल,” “भुगतान का इंतजार,” या “कूदना”) पर ध्यान केंद्रित करके, संक्रमण (जैसे “टाइमर समाप्त होना” या “बटन दबाना” द्वारा चालित), और शर्तों (गार्ड) के रूप में, राज्य आरेख स्पष्टता प्रदान करते हैं, तर्क लापता होने से बचाते हैं, और डिज़ाइन और कोड दोनों के लिए आधार बनाते हैं। चाहे आप सिस्टम मॉडलिंग सीख रहे हों या विश्वसनीय सॉफ्टवेयर बना रहे हों, राज्य आरेखों को सीखने से आपको निर्दिष्टता और स्पष्टता के साथ प्रणाली के व्यवहार के बारे में सोचने, डिज़ाइन करने और संचार करने की क्षमता मिलती है।

State Machines for Everyone — Part 1 Introduction | by Alex Dodge | Well  Red | Medium

💡 लक्ष्य: राज्य मशीनों का उपयोग करके वास्तविक दुनिया की प्रणालियों को मॉडल करना सीखें — विचार से लेकर साफ, पेशेवर दिखने वाले आरेख तक।

🔑 पहले समझने के लिए महत्वपूर्ण अवधारणाएँ

अवधारणा इसका क्या अर्थ है इसका क्यों महत्व है
अवस्था एक ऐसी स्थिति या स्थिति जिसमें प्रणाली है (जैसे लालसिक्के का इंतजार) किसी भी क्षण में क्या हो रहा है, यह दिखाता है
घटना कोई ऐसी चीज जो बदलाव को तैयार करती है (जैसे सिक्का डालेंटाइमर समाप्त हो जाता है) अवस्थाओं के बीच गति का कारण बनता है
संक्रमण एक अवस्था से दूसरी अवस्था तक एक तीर घटनाओं के माध्यम से अवस्थाओं को जोड़ता है
प्रारंभिक अवस्था प्रारंभिक बिंदु (●) हमेशा एक होता है
अंतिम अवस्था प्रक्रिया का अंत (○) वैकल्पिक — हमेशा आवश्यक नहीं होता है
गार्ड [शर्त] संक्रमण होने के लिए आवश्यक शर्त तर्क जोड़ता है (उदाहरण के लिए, क्या पर्याप्त पैसा है?)
क्रिया / प्रवेश/करना जब किसी अवस्था में प्रवेश करना, उसके दौरान या उससे बाहर निकलना हो तो क्या होता है अवस्थाओं में व्यवहार जोड़ता है

📌 सोचें:
“इस प्रणाली में हो सकता है X अवस्थाएँ।
जब Y होता है, तो यह Z.”
यह एक अवस्था मशीन है!


🛠 चरण 0 – माइंडसेट: इन प्रश्नों का उत्तर दें

कुछ भी बनाने से पहले:

  • क्या हैं वे स्पष्ट रूप से अलग स्थितियाँ इस चीज की अवस्था में हो सकती है?

  • क्या घटनाएँक्या उपयोगकर्ता के क्रियाकलाप, समय, त्रुटियाँ बदलाव का कारण बन सकते हैं?

  • क्या इसे एक साथ दो अवस्थाओं में हो सकता है? (नहीं → मूल अवस्था मशीनें परस्पर अपवर्जक होती हैं।)

👉 उदाहरण: एकलाइट स्विचया तो हैचालूयाबंदकभी दोनों नहीं।


🧩 चरण 1 – मॉडल करने के लिए एक वास्तविक चीज चुनें

✅ शुरुआती उम्मीदवारों के लिए अच्छे विकल्प:

  • टर्नस्टाइल (ताला लगा हुआ/खुला)

  • ट्रैफिक लाइट (लाल/हरा/पीला)

  • वेंडिंग मशीन

  • लॉगिन प्रणाली

  • आदेश स्थिति:बनाया गया → भुगतान किया गया → भेजा गया → प्राप्त किया गया

❌ बचें:

  • “पूरी ऑनलाइन दुकान” → बहुत बड़ी

  • “उपयोगकर्ता अनुभव” → बहुत अस्पष्ट

✏️ सरल शुरू करें।पहले छोटे उदाहरण को समझें।


📌 चरण 2 – अवस्थाओं की सूची बनाएं (नामवाचक शब्दों या वर्तमान क्रियावाचक शब्दों का उपयोग करें)

लिखें4–8 वास्तविक अवस्थाएं.

उपयोग करेंविशेषण या वर्तमान क्रियावाचक शब्दअवस्था की तरह दिखाने के लिए:

  • लाल

  • हरा

  • पीला

  • सिक्के का इंतजार

  • वस्तु निकाल रहा है

  • तैयार कर रहा है

  • भुगतान विफल

✅ टिप: यदि आपके पास 10 से अधिक राज्य हैं → प्रणाली को छोटे-छोटे हिस्सों में बांटें।


🖌 चरण 3 – राज्यों को गोल किनारे वाले आयतों के रूप में बनाएं

उपयोग करें गोल किनारे वाले आयत:

[ लाल ]
[ हरा ]
[ सिक्के का इंतजार ]

✅ उपकरण:

  • draw.io / diagrams.net (सबसे अच्छा मुफ्त विकल्प)

  • Excalidraw (हाथ से बनाए गए अनुभव के साथ)

  • PlantUML (टेक्स्ट-आधारित → संस्करण नियंत्रण के लिए आसान)

  • Lucidchart / Miro


🔷 चरण 4 – प्रारंभिक अवस्था जोड़ें (काला बिंदु)

एक बनाएं भरा हुआ काला वृत्त पहले अवस्था की ओर इशारा करते हुए तीर के साथ।

[*] --> लाल

दोनों [*] का अर्थ है “प्रारंभिक अवस्था” — यह शुरुआत का बिंदु है।


➡️ चरण 5 – घटनाओं के साथ संक्रमण बनाएं

प्रत्येक अवस्था के लिए पूछें:

“यहाँ क्या हो सकता है जिससे मैं इस अवस्था से बाहर निकलूं?”

तीरों को निम्न लेबल के साथ चिह्नित करें:

घटना [गार्ड] / क्रिया

🔹 सरल शुरुआत करें: बस घटना या घटना / क्रिया

सामान्य घटनाएँ:

  • सिक्का डालें

  • टाइमर समाप्त होता है

  • भुगतान असफल

  • बटन दबाया गया

  • पैदापार बटन

  • समय समाप्त


✅ चरण 6 – अंतिम अवस्था जोड़ें (वैकल्पिक)

एक का उपयोग करें मोटे किनारे वाला वृत्त अंतिम अवस्था के लिए।

[डिलीवर्ड] --> [●]

सभी प्रणालियों में अंतिम अवस्था नहीं होती है (जैसे लंबे समय तक चलने वाले ट्रैफिक लाइट्स)।


🔁 चरण 7 – वास्तविक धारीदार मामलों को जोड़ें

पूछें:

  • क्या आप रद्द कर सकते हैं? → जोड़ें रद्द करें → वापस जाएं आराम

  • क्या समय समाप्त हो जाता है? → समय समाप्त → वापस जाएं इंतजार

  • क्या यह विफल हो सकता है? → जोड़ें त्रुटि → शुरुआत पर लौटें

  • क्या इसे एक ही अवस्था में रहने दिया जा सकता है? → स्व-संक्रमण

उदाहरण स्व-संक्रमण (अधिक पैसा जोड़ना):

[क्रेडिट है] -- सिक्का डाला गया --> [क्रेडिट है]

🚦 चरण 8 – स्मार्ट तर्क के लिए गार्ड का उपयोग करें

जब एक ही घटना के कारण अलग-अलग परिणाम, उपयोग करें गार्ड.

उदाहरण:

यदि आप दबाते हैं पैड बटन के दौरान हरा, लेकिन अभी तक मांग नहीं है → आप प्रवेश करते हैं हरा जब पैद इंतजार कर रहा है.

लेकिन यदि मांग पहले से ही सेट है → आप इसे बस नजरअंदाज कर देंगे।

[वाहन हरा] --> [वाहन हरा] : पैड बटन / मांग सेट = सत्य

यह एक क्रिया के साथ स्व-संक्रमण — नई अवस्था नहीं।


🎯 चरण 9 – प्रवेश/करना/निकलने के कार्य जोड़ें (वैकल्पिक लेकिन शक्तिशाली)

आप कार्य लिख सकते हैंराज्य बॉक्स के भीतर:

[लाल]
प्रवेश / लाल ऑन करें
निकलना / लाल ऑफ करें
करें / 30 सेकंड का इंतजार करें

संक्रमण को भारी नहीं बनाए बिना व्यवहार को स्पष्ट करता है।


✅ चरण 10 – अंतिम चेकलिस्ट (खुद से पूछें)

✅ चेक करें यह क्यों महत्वपूर्ण है
एक प्रारंभिक अवस्था है? कहीं से शुरू होना चाहिए
सभी अवस्थाओं में बाहर जाने वाली तीर हैं (अंतिम को छोड़कर)? कोई मृत अंत नहीं
कोई पहुंच नहीं वाली अवस्थाएं? प्रत्येक अवस्था को पहुंचा जा सकना चाहिए
संक्रमण घटनाओं के साथ लेबल किए गए हैं? स्पष्ट कारण-प्रभाव
तीर “X पर जाएं” नहीं कहते — तीर दिशा दिखाते हैं साफ
रद्द / समय समाप्त / त्रुटि मार्ग शामिल हैं? वास्तविक प्रणालियाँ विफल होती हैं — इसके लिए तैयार रहें
चित्र स्क्रीन पर फिट होता है? साफ और पढ़ने योग्य

📋 त्वरित संदर्भ: PlantUML सिंटैक्स (UML मानक)

प्रतीक अर्थ
[*] प्रारंभिक अवस्था
[*] --> अवस्था इस अवस्था से शुरू करें
राज्य --> राज्य संक्रमण
घटना [गार्ड] / क्रियाकलाप तीर पर लेबल
राज्य "नाम" नामित राज्य (वैकल्पिक)
राज्य "X" के रूप में X जटिल नामों के लिए उपनाम
राज्य के दाहिने ओर नोट टिप्पणी बॉक्स

🎯 उदाहरण 1: सरल ट्रैफिक लाइट (3-राज्य चक्र)

पूर्णतः शुरुआती लोगों के लिए उपयुक्त।

🧠 वास्तविक दुनिया के उपयोग:

  • मूल ट्रैफिक लाइट चक्र: लाल → हरा → पीला → लाल

✅ राज्य:

  • लाल

  • हरा

  • पीला

🔄 घटनाएँ:

  • टाइमर समाप्त होता है (30 सेकंड, 25 सेकंड, 5 सेकंड के बाद)

🛠 प्लांटयूएमएल कोड (कॉपी-पेस्ट तैयार):

@startuml
skinparam monochrome true
[*] --> लाल
लाल --> हरा : after(30s)ntimer समाप्त होता है
हरा --> पीला : after(25s)ntimer समाप्त होता है
पीला --> लाल   : after(5s)ntimer समाप्त होता है

लाल   : entry / लाल ऑन करें
हरा : entry / हरा ऑन करें
पीला: entry / पीला ऑन करें

note right of लाल
  वाहनों को रुकना चाहिए
end note

note right of हरा
  वाहन जा सकते हैं
end note

note right of पीला
  रुकने की तैयारी करें
end note
@enduml

✅ उपयोग कैसे करें:
जाएँ https://www.plantuml.com/plantuml, कोड पेस्ट करें, और “उत्पन्न” बटन दबाएं।

🖼️ आउटपुट: एक साफ, एनिमेटेड दिखने वाला स्टेट मशीन डायग्राम।


🎯 उदाहरण 2: पैदल यात्री के अनुरोध के साथ वास्तविक ट्रैफिक लाइट

द सबसे शिक्षाप्रद संस्करण — गार्ड्स, सेल्फ-ट्रांजिशन्स और जटिल तर्क को पेश करता है।

🧠 वास्तविक दुनिया के उपयोग:

  • पैदल यात्री पार करने के लिए बटन दबाते हैं।

  • अगर कोई इंतजार कर रहा है, तो लाइट लंबे समय तक रुकती है।

  • हरे रंग खत्म होने के बाद, यह पीले → लाल → चलने के लिए → झपकते हुए न चलो → हरे रंग पर वापस जाता है।

📌 मुख्य स्थितियाँ:

  1. वाहन हरा_मांग नहीं – हरा, कोई पैदल यात्री इंतजार नहीं कर रहा

  2. वाहन हरा_पैदल यात्री इंतजार कर रहा – हरा, किसी ने बटन दबाया

  3. वाहन पीला – पीला लाइट (चलने के लिए नहीं)

  4. सभी लाल – सुरक्षा बफर (बहुत छोटा)

  5. पैदल चलना – चलने का संकेत चालू

  6. पैदल स्पष्टता – झपकते हुए न चलो (स्पष्टता समय)


🧩 मुख्य संक्रमण:

  • पैदल बटन → अगर इंतजार नहीं कर रहा है → मांग सेट करें

  • टाइमर समाप्त होता है → पीले में जाएँ (अगर हरे रंग का समय पूरा हुआ)

  • पैदल बटन जब पीला/लाल → मांग को याद रखें

  • टाइमर वॉक → फ्लैशिंग दो नॉट वॉक पर जाएं

  • टाइमर क्लियरेंस → रीसेट करें और हरे रंग पर लौटें

🚨 नोट: इस संस्करण में गार्ड्स और सेल्फ-ट्रांजिशन्स का उपयोग करता है, दिखाता है क्यों स्टेट मशीन्स शक्तिशाली हैं.


✅ प्लांटयूएमएल कोड (पूरी तरह से कार्यात्मक, उपयोग के लिए तैयार):

@startuml
skinparam monochrome true
skinparam shadowing false
skinparam dpi 120

[*] --> VehicleGreen_NoDemand

state "वाहन हराn(कोई पैदेस्ट्रियन मांग नहीं)" as VG_No
state "वाहन हराn(पैदेस्ट्रियन इंतजार कर रहा है)"   as VG_Wait
state "वाहन पीला"                  as VYellow
state "सभी लालn(सुरक्षा बफर)"      as AllRed
state "पैदेस्ट्रियन वॉक"                    as PedWalk
state "पैदेस्ट्रियन क्लियरेंसn(फ्लैशिंग दो नॉट वॉक)" as PedClear

VG_No --> VG_Wait : pedButton / setPedDemand = true
VG_No --> VYellow : after(35s)nor (pedDemand && minGreenTimeMet)
VG_Wait --> VYellow : after(45s)nपैदेस्ट्रियन इंतजार कर रहा है तो लंबा हरा रहता है
VG_Wait --> VG_Wait : pedButton / अनदेखा करें (पहले से ही इंतजार कर रहा है)
VYellow --> AllRed : after(4s)
AllRed --> PedWalk : after(1s)
PedWalk --> PedClear : after(10s)nवॉक समय समाप्त हो गया है
PedClear --> VG_No : after(5s)nक्लियरेंस पूरा हो गया हैn/ resetPedDemand

note bottom of VG_No
  सामान्य संचालन
  कोई पैदेस्ट्रियन मांग नहीं
end note

note right of PedClear
  पैदेस्ट्रियन पार कर चुके हैं
  फ्लैशिंग दो नॉट वॉक संकेत
end note

note right of VG_Wait
  पैदेस्ट्रियन बटन दबाया
  हरा रंग अधिकतम 10 सेकंड तक बढ़ जाता है
end note

note right of VYellow
  रुकने की तैयारी
  वाहन लाइट बदलती है
end note

note right of PedWalk
  वॉक संकेत चालू है
  पैदेस्ट्रियन पार कर सकते हैं
end note
@enduml

💡 यह सरल संस्करण की तुलना में क्यों बेहतर है?

  • दिखाता है वास्तविक दुनिया की जटिलता

  • दिखाता है गार्ड्स (यदि पैडडिमांड)

  • उपयोग करता है सेल्फ-ट्रांजिशन्स (VG_Wait --> VG_Wait)

  • मॉडल करता है वास्तविक व्यवहार: हरा रंग बढ़ाया जा सकता है!

  • क्लियर अलगाव वाहन और पैदल यात्री तर्क


🎓 सिफारिश किए गए अभ्यास अभ्यास (क्रम में करें)

# उदाहरण समय सीखे गए कौशल
1 प्रकाश स्विच (चालू ↔ बंद) 5 मिनट मूलभूत संक्रमण
2 टर्नस्टाइल (ताला लगा हुआ ↔ खुला) 10 मिनट घटनाएँ, गार्ड्स
3 ट्रैफिक लाइट (3-अवस्था चक्र) 10 मिनट टाइमर, प्रवेश कार्रवाई
4 वेंडिंग मशीन (प्रतीक्षा → भुगतान → वितरण) 15 मिनट बहुत सारी घटनाएँ, पैसे का तर्क
5 लॉगिन (खाली → टाइप करना → जमा करना → सफलता/असफलता) 15 मिनट त्रुटि संभालना, अंतिम अवस्थाएँ
6 आदेश स्थिति (6 अवस्थाएँ) 20 मिनट वास्तविक जीवन के प्रणाली मॉडलिंग

✅ कागज या draw.io में #1–3 से शुरू करें। फिर उपयोग करें PlantUML बाकी के लिए।


🧠 सफलता के लिए अंतिम सुझाव

  • छोटे से शुरू करें — एक साथ सब कुछ शामिल करने की कोशिश न करें।

  • वास्तविक नामों का उपयोग करें — सिक्के का इंतजार, नहीं State1.

  • संक्रमण को स्पष्ट रूप से लेबल करें — बटन दबाया गयासमय समाप्तभुगतान विफल.

  • पहले हाथ से बनाएं — फिर डिजिटाइज़ करें।

  • मानसिक रूप से इसका परीक्षण करें: “क्या इस प्रणाली में फंस सकता है?” → यदि हां, तो एक संक्रमण जोड़ें।


📌 सारांश: आपकी राज्य मशीन चेकलिस्ट

✅ एक [*] (प्रारंभिक अवस्था)
✅ राज्यों के लिए गोल किनारे वाले आयत
✅ संक्रमण के लिए तीर
✅ तीरों पर घटनाएँ (30 सेकंड के बादपैदल यात्री बटन)
✅ आवश्यकता पड़ने पर गार्ड्स ([पैदल यात्री मांग])
✅ दोहराए जाने वाले कार्यों के लिए स्व-संक्रमण
✅ व्यवहार के लिए प्रवेश/निकास कार्रवाई
✅ साफ लेआउट, पढ़ने योग्य फॉन्ट


🎯 अंतिम शब्द: अब आप तैयार हैं!

आपने अभी सीखा है:

  • एक क्या है राज्य मशीन आरेख है

  • कैसे करें राज्यों और घटनाओं में सोचें

  • कैसे करें चित्रित करें और पढ़ें एक प्रो की तरह उन्हें पढ़ें

  • कैसे करें वास्तविक प्रणालियों का मॉडल बनाएं, जैसे ट्रैफिक लाइट्स

  • कैसे करें PlantUML का उपयोग करेंसाफ और बनाए रखने योग्य आरेख लिखने के लिए

🎉 आप सिर्फ UML सीख रहे हैं — आप वास्तविक प्रणालियों के मॉडलिंग कैसे करना सीख रहे हैं, एक अवस्था बाद में।


📌 अगले चरण (आपका अध्ययन मार्ग)

  1. हाथ से 3-अवस्था ट्रैफिक लाइट बनाएं— कोई उपकरण नहीं, सिर्फ कागज।

  2. PlantUML का प्रयोग करेंऊपर दिए गए कोड के साथ — इसे रेंडर करें देखें।

  3. संशोधित करें: प्रतीक्षा समय बदलें। “आपातकालीन ओवरराइड” अवस्था जोड़ें।

  4. वेंडिंग मशीन का प्रयोग करें→ समान तर्क, लेकिन नकदी के साथ।

  5. अपना खुद का बनाएं: एक गेम कैरेक्टर (चलना → कूदना → हमला करना → मृत)।

💬 मदद की आवश्यकता है? इसका प्रयोग करें: “मैं एक मॉडल करने की कोशिश कर रहा हूँ[आपकी प्रणाली]— क्या आप मुझे एक अवस्था मशीन बनाने में मदद कर सकते हैं?”


🙌 अंतिम विचार

🔄 जो कुछ भी बदलता है — चाहे वह एक लाइट हो, लॉगिन हो या ऑर्डर हो — इसे एक अवस्था मशीन के साथ मॉडल किया जा सकता है।
आपको इसे समझने के लिए प्रोग्रामर बनने की आवश्यकता नहीं है। आपको बस पूछना है: पूछें: “यह चीज किस अवस्था में हो सकती है, और इसे क्या बदलता है?”


✅ अब आप एक पेशेवर, कार्यात्मक अवस्था मशीन आरेख बनाने के तरीके को जानते हैं — शुरुआत से आत्मविश्वासी मॉडलर तक।

🎉 आरेख बनाते रहें!
मुझे बताएं अगर आपको एक प्रिंट करने योग्य PDF संस्करण, एक प्रश्नोत्तरी या कोडिंग चुनौती चाहिए जिससे आप अपने कौशल का परीक्षण कर सकें।


Leave a Reply