इस लेख में
Mermaid डेवलपर का डायग्रामिंग टूल क्यों है
तकनीकी दस्तावेज़ीकरण अक्सर सिस्टम आर्किटेक्चर, वर्कफ़्लो और डेटा प्रवाह समझाने के लिए डायग्राम पर निर्भर करता है। पारंपरिक डायग्रामिंग टूल में कैनवास पर आकृतियाँ खींचनी पड़ती हैं और ऐसी इमेज एक्सपोर्ट करनी पड़ती हैं जिनका वर्शन कंट्रोल करना कठिन होता है। Mermaid एक अलग तरीका अपनाता है — आप अपने डायग्राम को सरल टेक्स्ट सिंटैक्स में वर्णित करते हैं, और रेंडरर एक स्वच्छ SVG तैयार करता है जो आपके कोड के साथ Markdown फ़ाइलों, विकी और पुल रिक्वेस्ट में रह सकता है।
चूँकि Mermaid डायग्राम सादे टेक्स्ट होते हैं, इन्हें diff में समीक्षा करना, Git में संग्रहीत करना और स्वतः पुनर्जनन करना आसान होता है। यह इन्हें उस दस्तावेज़ीकरण के लिए आदर्श बनाता है जिसे कोडबेस के साथ विकसित होना हो। एक लाइव प्रीव्यू टूल आपको डायग्राम सिंटैक्स पर रियल टाइम में काम करने देता है, जिससे आप बिल्ड चरण या अलग ऐप्लिकेशन का इंतज़ार किए बिना टाइप करते ही रेंडर किया गया आउटपुट देख पाते हैं।
Mermaid प्रीव्यू टूल का उपयोग कैसे करें
CheckTown का Mermaid प्रीव्यू आपके डायग्राम कोड को तुरंत रेंडर करता है ताकि आप ब्राउज़र छोड़े बिना डायग्राम डिज़ाइन और डिबग कर सकें।
- अपने Mermaid सिंटैक्स को एडिटर में टाइप या पेस्ट करें — कोड बदलते ही प्रीव्यू रियल टाइम में अपडेट हो जाता है
- यह टूल फ़्लोचार्ट, सीक्वेंस डायग्राम, क्लास डायग्राम, स्टेट डायग्राम, एंटिटी-रिलेशनशिप डायग्राम, Gantt चार्ट, पाई चार्ट और अन्य का समर्थन करता है
- सिंटैक्स त्रुटियाँ स्पष्ट संदेशों के साथ हाइलाइट होती हैं, ताकि आप अनुमान लगाने के बजाय तुरंत समस्याओं का पता लगाकर उन्हें ठीक कर सकें
- प्रस्तुतियों, दस्तावेज़ीकरण या इश्यू ट्रैकर में उपयोग के लिए रेंडर किए गए डायग्राम को SVG या PNG के रूप में एक्सपोर्ट करें
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
Mermaid प्रीव्यू खोलें →Mermaid डायग्राम के सर्वोत्तम तरीके
कुछ परंपराएँ आपके Mermaid डायग्राम को जटिलता बढ़ने पर भी पठनीय और रखरखाव-योग्य बनाए रखती हैं।
- नोड्स को वर्णनात्मक ID और लेबल दें — सामान्य A और B के बजाय userService और authDB जैसे सार्थक नाम इस्तेमाल करें ताकि स्रोत कोड दस्तावेज़ की तरह पढ़ा जाए
- डायग्राम को एक ही अवधारणा पर केंद्रित रखें — किसी जटिल सिस्टम को सब कुछ एक अपठनीय चार्ट में ठूँसने के बजाय कई छोटे डायग्राम में बाँटें
- संबंधित नोड्स को समूहित करने के लिए सबग्राफ़ का उपयोग करें — यह दृश्य संरचना जोड़ता है और बड़े डायग्राम को एक नज़र में समझना आसान बनाता है
अक्सर पूछे जाने वाले प्रश्न
कौन-कौन से Mermaid डायग्राम प्रकार समर्थित हैं?
प्रीव्यू सभी प्रमुख Mermaid डायग्राम प्रकारों का समर्थन करता है, जिनमें फ़्लोचार्ट, सीक्वेंस डायग्राम, क्लास डायग्राम, स्टेट डायग्राम, एंटिटी-रिलेशनशिप डायग्राम, Gantt चार्ट, पाई चार्ट, जर्नी मैप और रिक्वायरमेंट डायग्राम शामिल हैं। रेंडरर Mermaid.js की नवीनतम रिलीज़ के साथ अद्यतित रहता है।
क्या मैं जनरेट किए गए डायग्राम को GitHub या GitLab में एम्बेड कर सकता हूँ?
हाँ। GitHub और GitLab दोनों Markdown फ़ाइलों में Mermaid कोड ब्लॉक को मूल रूप से रेंडर करते हैं। आप एडिटर से सिंटैक्स कॉपी करके सीधे अपने README या विकी पेज के फ़ेंस्ड कोड ब्लॉक में डाल सकते हैं। प्रीव्यू टूल सिंटैक्स को अपने रिपॉज़िटरी में कमिट करने से पहले उस पर काम करने के लिए उपयोगी है।
क्या डायग्राम के आकार की कोई सीमा है?
कोई कठोर अक्षर सीमा नहीं है। हालाँकि, सैकड़ों नोड्स वाले अत्यधिक बड़े डायग्राम ब्राउज़र में धीरे रेंडर हो सकते हैं। यदि आपका डायग्राम भारी-भरकम हो जाए, तो उसे छोटे केंद्रित डायग्राम में बाँटने पर विचार करें जिनमें से प्रत्येक सिस्टम के एक हिस्से का वर्णन करे।