Mermaid live editor क्या है?

यह एक in-browser टूल है जो Mermaid कोड को रियल-टाइम में एक रेंडर किए गए diagram में बदलता है, ताकि आप flowcharts, sequence diagrams, और अधिक को अपने स्रोत के बगल में प्रीव्यू कर सकें और उन्हें SVG के रूप में एक्सपोर्ट कर सकें।

Mermaid live editor किन diagram प्रकारों को सपोर्ट करता है?

यह flowcharts, sequence diagrams, gantt charts, class diagrams, और state diagrams सहित मानक Mermaid syntax रेंडर करता है, वही syntax जो GitHub और कई docs tools में उपयोग होता है।

मैं एक Mermaid diagram को एक image के रूप में कैसे एक्सपोर्ट करूँ?

एक बार आपका diagram रेंडर हो जाए, इसे एक SVG फ़ाइल के रूप में सहेजने हेतु download पर क्लिक करें जिसे आप docs में डाल सकते हैं या किसी भी vector editor में खोल सकते हैं।

मेरा Mermaid diagram एक syntax त्रुटि क्यों दिखाता है?

renderer Mermaid कोड validate करता है और parser संदेश इनलाइन दिखाता है; अधिकांश त्रुटियाँ एक गायब diagram-type घोषणा या असंतुलित brackets व arrows से आती हैं।

क्या रेंडर किया गया diagram मेरे dark mode से मेल खाता है?

हाँ। Mermaid live editor पता लगाता है कि आप light या dark mode में देख रहे हैं और मेल खाता Mermaid theme स्वचालित रूप से लागू करता है।

क्या मेरा Mermaid diagram कोड निजी रखा जाता है?

हाँ। आपका Mermaid स्रोत आपके browser में स्थानीय रूप से रेंडर होता है और कभी आपके डिवाइस से बाहर नहीं जाता, इसलिए कुछ भी किसी सर्वर पर अपलोड नहीं होता।

Mermaid डायग्राम रेंडरर

Mermaid डायग्राम (फ़्लो, सीक्वेंस, गैंट) को अपने ब्राउज़र में SVG के रूप में रेंडर करें।

आपका Mermaid कोड आपके browser में स्थानीय रूप से रेंडर होता है और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

एक एक्सपोर्ट किया गया diagram छोटा करना है? SVG Optimizer आज़माएँ।

Mermaid डायग्राम रेंडरर के बारे में

यह mermaid live editor सादे Mermaid कोड को आपके टाइप करते ही रेंडर किए गए diagrams में बदल देता है, जिसमें रेंडरिंग आपके पेस्ट करते ही शुरू हो जाती है। एक flowchart, sequence diagram, gantt chart, class diagram, या state diagram डालें और SVG को अपने स्रोत के बगल में तुरंत दिखते देखें। यह उन डेवलपर्स, तकनीकी लेखकों, और architects के लिए बनाया गया है जो docs, README फ़ाइलों, या design notes में diagrams रखते हैं और उन्हें प्रीव्यू व एक्सपोर्ट करने का एक त्वरित तरीका चाहते हैं। mermaid diagram renderer आपके view से मेल कराने के लिए light और dark themes का स्वतः पता लगाता है, syntax त्रुटियों को इनलाइन रिपोर्ट करता है ताकि आप उन्हें तेज़ी से ठीक कर सकें, और आपको परिणाम को एक साफ SVG के रूप में डाउनलोड करने देता है। क्योंकि सब कुछ आपके browser में स्थानीय रूप से प्रोसेस होता है, आपका diagram स्रोत कभी आपके डिवाइस से बाहर नहीं जाता और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

विशेषताएँ

आपके टाइप करते ही Mermaid कोड को SVG में लाइव रेंडरिंग
flowcharts, sequence, gantt, class, state और अधिक diagram प्रकारों को सपोर्ट करता है
इनलाइन syntax त्रुटि संदेश आपके कोड में समस्याओं को सटीक रूप से इंगित करते हैं
आपके वर्तमान view से मेल कराने के लिए light और dark theme का स्वतः पता लगाता है
रेंडर किए गए diagram को एक साफ SVG फ़ाइल के रूप में डाउनलोड करें
strict security मोड रेंडरिंग के दौरान diagram सामग्री को सैनिटाइज़ करता है
पूरी तरह आपके browser में चलता है इसलिए कुछ भी किसी सर्वर पर अपलोड नहीं होता

Mermaid डायग्राम रेंडरर का उपयोग कैसे करें

अपना Mermaid कोड इनपुट बॉक्स में पेस्ट या टाइप करें।
आउटपुट पैनल में diagram को स्वचालित रूप से रेंडर होते देखें।
यदि कोई इनलाइन syntax त्रुटि संदेश दिखें तो उन्हें ठीक करें।
light या dark स्टाइलिंग प्रीव्यू करने के लिए अपना browser या app theme स्विच करें।
परिणाम को diagram.svg के रूप में सहेजने हेतु download पर क्लिक करें।

उदाहरण

इनपुट

graph TD
  A[Start] --> B{Works?}
  B -->|Yes| C[Ship it]
  B -->|No| D[Fix it]
  D --> B

आउटपुट

एक रेंडर किया गया SVG flowchart: एक Start बॉक्स एक Works? निर्णय हीरे में प्रवाहित होता है, Yes शाखा Ship it की ओर इशारा करती है, No शाखा Fix it की ओर इशारा करती है, और Fix it वापस निर्णय पर लूप करता है।

एक सरल flowchart डाउनलोड करने योग्य SVG में रेंडर किया गया।

सामान्य त्रुटियाँ और समस्या निवारण

diagram के बजाय Parse error या "Syntax error in text" दिखाया जाता है। — जाँचें कि पहली लाइन एक मान्य diagram प्रकार घोषित करती है (जैसे graph TD, sequenceDiagram, gantt) और कि arrows व brackets संतुलित हैं।
कोष्ठक या quotes जैसे विशेष अक्षरों वाले node labels रेंडरिंग तोड़ देते हैं। — label टेक्स्ट को double quotes में लपेटें, उदाहरण के लिए A["My (label)"], ताकि Mermaid अक्षरों को शाब्दिक रूप से माने।
diagram रेंडर होता है पर रंग आपके background के विरुद्ध गलत दिखते हैं। — renderer आपके light या dark theme का स्वचालित रूप से अनुसरण करता है; मेल खाती स्टाइलिंग पाने के लिए अपना app theme स्विच करें।
इंडेंटेशन या tabs flowcharts में अप्रत्याशित layout का कारण बनते हैं। — इंडेंटेशन के लिए सुसंगत spaces का उपयोग करें और प्रत्येक node या link को उसकी अपनी लाइन पर रखें।

अक्सर पूछे जाने वाले प्रश्न

Mermaid live editor क्या है?: यह एक in-browser टूल है जो Mermaid कोड को रियल-टाइम में एक रेंडर किए गए diagram में बदलता है, ताकि आप flowcharts, sequence diagrams, और अधिक को अपने स्रोत के बगल में प्रीव्यू कर सकें और उन्हें SVG के रूप में एक्सपोर्ट कर सकें।
Mermaid live editor किन diagram प्रकारों को सपोर्ट करता है?: यह flowcharts, sequence diagrams, gantt charts, class diagrams, और state diagrams सहित मानक Mermaid syntax रेंडर करता है, वही syntax जो GitHub और कई docs tools में उपयोग होता है।
मैं एक Mermaid diagram को एक image के रूप में कैसे एक्सपोर्ट करूँ?: एक बार आपका diagram रेंडर हो जाए, इसे एक SVG फ़ाइल के रूप में सहेजने हेतु download पर क्लिक करें जिसे आप docs में डाल सकते हैं या किसी भी vector editor में खोल सकते हैं।
मेरा Mermaid diagram एक syntax त्रुटि क्यों दिखाता है?: renderer Mermaid कोड validate करता है और parser संदेश इनलाइन दिखाता है; अधिकांश त्रुटियाँ एक गायब diagram-type घोषणा या असंतुलित brackets व arrows से आती हैं।
क्या रेंडर किया गया diagram मेरे dark mode से मेल खाता है?: हाँ। Mermaid live editor पता लगाता है कि आप light या dark mode में देख रहे हैं और मेल खाता Mermaid theme स्वचालित रूप से लागू करता है।
क्या मेरा Mermaid diagram कोड निजी रखा जाता है?: हाँ। आपका Mermaid स्रोत आपके browser में स्थानीय रूप से रेंडर होता है और कभी आपके डिवाइस से बाहर नहीं जाता, इसलिए कुछ भी किसी सर्वर पर अपलोड नहीं होता।