सभी डायग्राम पर वापस जाएँ

स्टेट डायग्राम

सिस्टम या एप्लिकेशन में स्टेट ट्रांज़िशन का प्रतिनिधित्व करें। लाइफसाइकिल स्टेट्स और वर्कफ़्लो को मॉडल करने के लिए बढ़िया।

स्टेट डायग्राम क्या है?

स्टेट डायग्राम, जिन्हें स्टेट मशीन डायग्राम भी कहा जाता है, उन विभिन्न स्टेट्स को विज़ुअलाइज़ करते हैं जिनमें कोई ऑब्जेक्ट या सिस्टम हो सकता है और इवेंट्स के जवाब में यह स्टेट्स के बीच कैसे ट्रांज़िशन करता है। वे लाइफसाइकिल व्यवहार, वर्कफ़्लो और जटिल सशर्त लॉजिक को मॉडल करने के लिए आवश्यक हैं। प्रत्येक स्टेट एक स्थिर स्थिति का प्रतिनिधित्व करता है, जबकि ट्रांज़िशन स्टेट परिवर्तन का कारण बनने वाले ट्रिगर दिखाते हैं।

संपादित करें और पूर्वावलोकन करें

Mermaid सिंटैक्स के साथ स्टेट डायग्राम बनाएँ और तुरंत परिवर्तन देखें।

एडिटर
100%

Example

State diagram example

A Mermaid state diagram for a diagram moving from draft to preview, edit, and export.

Mermaid state diagram example showing draft, preview, editing, and exported states
Mermaid state diagram example showing draft, preview, editing, and exported states

Mermaid code

stateDiagram-v2
    [*] --> Draft
    Draft --> Preview: render
    Preview --> Editing: update code
    Preview --> Exported: download PNG
    Editing --> Preview: render again
    Exported --> [*]

सामान्य उपयोग

एप्लिकेशन स्टेट प्रबंधन

UI स्टेट्स, फॉर्म वैलिडेशन फ्लो और एप्लिकेशन मोड्स को मॉडल करें। React या Vue जैसे फ्रंटएंड फ्रेमवर्क में स्टेट मशीन डिज़ाइन करने के लिए आवश्यक।

वर्कफ़्लो मॉडलिंग

अनुमोदन वर्कफ़्लो, ऑर्डर प्रोसेसिंग स्टेट्स और टिकट लाइफसाइकिल प्रबंधन डिज़ाइन करें। व्यावसायिक प्रक्रियाओं के लिए स्टेटस ट्रांज़िशन और गार्ड शर्तों को मैप करें।

प्रोटोकॉल डिज़ाइन

नेटवर्क प्रोटोकॉल स्टेट्स, कनेक्शन लाइफसाइकिल और कम्युनिकेशन स्टेट मशीनों को विज़ुअलाइज़ करें। एम्बेडेड सिस्टम और IoT डिवाइस प्रोग्रामिंग के लिए महत्वपूर्ण।

गेम डेवलपमेंट

कैरेक्टर स्टेट्स, गेम मोड्स और लेवल प्रगति को मॉडल करें। AI व्यवहार और गेम मैकेनिक्स के लिए फाइनाइट स्टेट मशीन डिज़ाइन करें।

प्रमुख विशेषताएँ

स्टेट प्रकार

सिंपल स्टेट्स, कम्पोज़िट स्टेट्स और इनिशियल, फाइनल और चॉइस स्यूडोस्टेट्स जैसे विशेष स्टेट्स का समर्थन।

ट्रांज़िशन गार्ड्स

गार्ड शर्तों और स्टेट परिवर्तन के दौरान निष्पादित होने वाली कार्रवाइयों के साथ सशर्त ट्रांज़िशन को परिभाषित करें।

नेस्टेड स्टेट्स

जटिल व्यवहार को मॉडल करने के लिए पैरेंट और चाइल्ड स्टेट्स के साथ हाइरार्किकल स्टेट मशीन बनाएँ।

समवर्ती स्टेट्स

समवर्ती व्यवहार वाले सिस्टम के लिए समानांतर स्टेट मशीन और ऑर्थोगोनल रीजन को मॉडल करें।

सर्वोत्तम प्रथाएँ

सरल से शुरू करें

उच्च-स्तरीय स्टेट्स से शुरू करें और धीरे-धीरे परिष्कृत करें। जटिलता को जरूरत पड़ने तक छिपाने के लिए कम्पोज़िट स्टेट्स का उपयोग करें।

स्टेट्स को शर्तों के रूप में नामित करें

क्रियाओं के बजाय विशेषण या भूतकालिक कृदंत का उपयोग करें (जैसे, 'Active', 'Suspended', 'Completed')।

ट्रांज़िशन दस्तावेज़ करें

सभी ट्रांज़िशन को इवेंट्स, गार्ड शर्तों और कार्रवाइयों के साथ लेबल करें। हर तीर को एक स्पष्ट कहानी बतानी चाहिए।

स्टेट विस्फोट से बचें

यदि आपके पास बहुत अधिक स्टेट्स हैं, तो उन्हें संयोजित करने के पैटर्न खोजें या इसके बजाय स्टेट वेरिएबल का उपयोग करें।

अन्य डायग्राम प्रकार देखें

फ्लोचार्ट

नोड्स और दिशात्मक तीरों के साथ प्रक्रियाओं, वर्कफ़्लो और एल्गोरिदम को विज़ुअलाइज़ करें। व्यावसायिक प्रक्रियाओं और निर्णय ट्री के लिए उपयुक्त।

सीक्वेंस डायग्राम

समय के साथ विभिन्न एक्टर्स या सिस्टम के बीच इंटरैक्शन को दस्तावेज़ करें। API डॉक्यूमेंटेशन और सिस्टम डिज़ाइन के लिए आदर्श।

क्लास डायग्राम

क्लासेस, एट्रिब्यूट्स और रिलेशनशिप के साथ ऑब्जेक्ट-ओरिएंटेड सिस्टम को मॉडल करें। सॉफ्टवेयर आर्किटेक्चर प्लानिंग के लिए आवश्यक।

गैंट चार्ट

कार्यों और निर्भरताओं के साथ प्रोजेक्ट टाइमलाइन की योजना बनाएँ और ट्रैक करें। प्रोजेक्ट प्रबंधन और शेड्यूलिंग के लिए उपयुक्त।

ER डायग्राम

एंटिटीज़ और रिलेशनशिप के साथ डेटाबेस स्कीमा डिज़ाइन करें। डेटाबेस मॉडलिंग और डॉक्यूमेंटेशन के लिए आदर्श।

यूज़र जर्नी

टचपॉइंट्स पर यूज़र अनुभवों और इंटरैक्शन को मैप करें। UX डिज़ाइन और कस्टमर जर्नी मैपिंग के लिए उत्कृष्ट।

Git ग्राफ

Git ब्रांचिंग रणनीतियों और कमिट इतिहास को विज़ुअलाइज़ करें। वर्शन कंट्रोल वर्कफ़्लो को समझाने में सहायक।

माइंडमैप

विचारों को व्यवस्थित करें, ब्रेनस्टॉर्म करें और पदानुक्रमिक दृश्य संरचनाएँ बनाएँ। योजना बनाने और ज्ञान मैपिंग के लिए उपयुक्त।

पाई चार्ट

गोलाकार चार्ट के साथ आनुपातिक डेटा वितरण प्रदर्शित करें। प्रतिशत और बाज़ार हिस्सेदारी दिखाने के लिए आदर्श।

टाइमलाइन

समय अक्ष पर कालानुक्रमिक घटनाओं और माइलस्टोन को विज़ुअलाइज़ करें। प्रोजेक्ट इतिहास और रोडमैप के लिए उत्कृष्ट।

कानबन बोर्ड

वर्कफ़्लो चरणों का प्रतिनिधित्व करने वाले कॉलम में कार्यों को व्यवस्थित करें। एजाइल प्रोजेक्ट प्रबंधन और कार्य ट्रैकिंग के लिए उपयुक्त।

क्वाड्रंट चार्ट

तुलना और प्राथमिकता के लिए दो-अक्ष ग्रिड पर आइटम प्लॉट करें। फीचर प्राथमिकता और रणनीतिक विश्लेषण के लिए आदर्श।

सैंकी डायग्राम

आनुपातिक तीरों के साथ नोड्स के बीच प्रवाह मात्रा को विज़ुअलाइज़ करें। ऊर्जा प्रवाह, बजट आवंटन और कन्वर्शन फ़नल के लिए उपयुक्त।

XY चार्ट

अनुकूलन योग्य अक्षों के साथ बार चार्ट और लाइन चार्ट बनाएँ। डेटा विज़ुअलाइज़ेशन और ट्रेंड विश्लेषण के लिए आदर्श।

ब्लॉक डायग्राम

कॉलम और पंक्तियों में व्यवस्थित ब्लॉकों के साथ संरचित लेआउट बनाएँ। सिस्टम आर्किटेक्चर और कंपोनेंट ओवरव्यू के लिए उत्कृष्ट।

आर्किटेक्चर डायग्राम

सर्विस आइकन और कनेक्शन के साथ क्लाउड और सिस्टम आर्किटेक्चर डिज़ाइन करें। इन्फ्रास्ट्रक्चर डॉक्यूमेंटेशन के लिए उपयुक्त।

पैकेट डायग्राम

बिट-स्तरीय फ़ील्ड लेआउट के साथ नेटवर्क प्रोटोकॉल पैकेट संरचनाओं को विज़ुअलाइज़ करें। नेटवर्क प्रोटोकॉल डॉक्यूमेंटेशन के लिए आवश्यक।