टिप: प्रीव्यू में क्लिक‑ड्रैग (या टच‑ड्रैग) करके पैन करें। फ़ाइलें लोड करने के लिए उन्हें प्रीव्यू पर ड्रॉप करें।
Mermaid क्या है?
Mermaid एक JavaScript‑आधारित डायग्रामिंग और चार्टिंग टूल है जो Markdown‑प्रेरित टेक्स्ट परिभाषाओं का उपयोग करके डायग्रामों को डायनेमिक रूप से बनाता और बदलता है। यह एक ओपन‑सोर्स प्रोजेक्ट है जो सरल टेक्स्ट विवरणों से डायग्राम बनाने देता है।
जटिल ड्रॉइंग टूल्स की बजाय, आप कोड जैसी सिंटैक्स लिखते हैं जो आपके डायग्राम का वर्णन करती है, और Mermaid उसे विज़ुअल डायग्राम के रूप में रेंडर करता है। यह तरीका डायग्रामों को संस्करण‑नियंत्रण योग्य, अपडेट करने में आसान और दस्तावेज़ीकरण के लिए आदर्श बनाता है।
Mermaid दस्तावेज़ीकरण प्लेटफ़ॉर्म, विकी और Markdown फ़ाइलों के साथ सहजता से एकीकृत होता है, जिससे यह डेवलपर्स और तकनीकी लेखकों का पसंदीदा टूल बन जाता है।
Mermaid क्यों उपयोग करें?
वर्ज़न कंट्रोल: डायग्राम टेक्स्ट फ़ाइलें हैं, इसलिए उन्हें आपके कोड के साथ Git में ट्रैक किया जा सकता है
त्वरित अपडेट: पूरे डायग्राम फिर से बनाने की बजाय कुछ पंक्तियाँ बदलें
संगति: Mermaid लेआउट और स्टाइलिंग को स्वतः संभालता है, जिससे सुसंगत डायग्राम बनते हैं
डिज़ाइन टूल्स की जरूरत नहीं: Visio, Lucidchart या अन्य महंगे टूल्स की आवश्यकता नहीं
कोड के रूप में दस्तावेज़ीकरण: डायग्रामों को अपने दस्तावेज़ों के उसी रिपॉज़िटरी में रखें
क्रॉस‑प्लैटफॉर्म: ब्राउज़र और Node.js में चलता है और कई प्लेटफ़ॉर्म के साथ एकीकृत होता है
मुफ़्त और ओपन‑सोर्स: कोई लाइसेंस लागत नहीं, सक्रिय समुदाय
कई प्रकार के डायग्राम: फ्लोचार्ट, सीक्वेंस, क्लास डायग्राम आदि का समर्थन
Mermaid Viewer का उपयोग करने और डायग्राम बनाने से जुड़े सामान्य प्रश्न
क्या यह Mermaid एडिटर सच में मुफ्त है?
हाँ, यह पूरी तरह मुफ्त है। आप अनलिमिटेड डायग्राम बना सकते हैं, SVG/PNG में एक्सपोर्ट कर सकते हैं, URL से शेयर कर सकते हैं और बिना साइन-अप या भुगतान के सभी फीचर्स इस्तेमाल कर सकते हैं। टूल को non-intrusive विज्ञापनों से सपोर्ट मिलता है।
क्या मुझे कुछ इंस्टॉल करना होगा?
नहीं, कुछ भी इंस्टॉल करने की जरूरत नहीं है। यह पूरी तरह ब्राउज़र-आधारित टूल है। बस साइट खोलें और तुरंत डायग्राम बनाना शुरू करें, चाहे डेस्कटॉप हो, टैबलेट या मोबाइल।
मैं अपने डायग्राम कैसे सेव करूँ?
सेव करने के कई तरीके हैं: 1) SVG या PNG के रूप में एक्सपोर्ट, 2) URL से शेयर (कोड URL में encoded रहता है), 3) Mermaid टेक्स्ट को अपने फाइलों में कॉपी करना, 4) .mmd या .mermaid फाइल अपलोड/डाउनलोड करना।
क्या मैं इन्हें दस्तावेज़ों में उपयोग कर सकता/सकती हूँ?
बिल्कुल। आप डायग्राम को SVG (scalable) या PNG में एक्सपोर्ट करके documentation, presentations या websites में उपयोग कर सकते हैं। Mermaid code को GitHub, GitLab, Notion जैसी platforms में सीधे embed भी किया जा सकता है।
SVG और PNG में क्या अंतर है?
SVG vector format है, इसलिए किसी भी size पर sharp रहता है और docs/web के लिए बेहतर है। PNG raster image है, जल्दी शेयर करने के लिए ठीक है, लेकिन resize करने पर quality घट सकती है।
मेरा डायग्राम रेंडर क्यों नहीं हो रहा?
अपने Mermaid code में syntax errors जांचें। सामान्य समस्याएँ: quotes बंद न होना, colon/semicolon छूट जाना, गलत node IDs, या unsupported syntax। समस्या पहचानने के लिए डायग्राम को सरल करके देखें।
क्या मैं दूसरों के साथ सहयोग कर सकता/सकती हूँ?
रियल-टाइम collaboration built-in नहीं है, लेकिन URL शेयर करके आसानी से साथ काम किया जा सकता है। दूसरे लोग लिंक खोलकर edit कर सकते हैं और अपनी version वापस भेज सकते हैं। Mermaid का text-based format Git के लिए भी बहुत अच्छा है।
क्या यह ऑफलाइन भी काम करता है?
पहली बार लोड होने के लिए इंटरनेट चाहिए। एक बार लोड हो जाने के बाद basic editing अक्सर offline भी काम करती है। लेकिन export जैसे कुछ features को connectivity की जरूरत हो सकती है।
Mermaid सिंटैक्स कैसे सीखें?
शुरुआत हमारे Mermaid Guide से करें, जिसमें सभी diagram types के उदाहरण हैं। quick start के लिए Templates panel इस्तेमाल करें और mermaid.js.org की official documentation भी देखें।
क्या मैं रूप-रंग कस्टमाइज़ कर सकता/सकती हूँ?
हाँ। Diagrams साइट theme को follow करते हैं: ऊपर की बार में थीम बटन से light और dark के बीच switch करें, और diagram मिलती-जुलती Mermaid theme के साथ फिर से render हो जाता है। advanced customization के लिए %%{init:...}%% directive से colors, fonts और अन्य visual properties define कर सकते हैं।
कौन-कौन से डायग्राम प्रकार समर्थित हैं?
यह editor प्रमुख Mermaid diagram types सपोर्ट करता है: Flowcharts, Sequence Diagrams, Class Diagrams, State Diagrams, ER Diagrams, Gantt Charts, Pie Charts, Git Graphs, User Journey maps और अन्य।
क्या मेरा डायग्राम डेटा निजी है?
आपका diagram code हमारे servers पर नहीं भेजा जाता। सारा rendering आपके browser में ही होता है। URL से शेयर करने पर code उसी URL में encoded होता है; हम आपके diagram content को store या track नहीं करते।
टेक्स्ट-आधारित डायग्राम क्यों उपयोग करें?
Text-based diagrams के फायदे हैं: version control (Git के लिए आदर्श), तेज़ updates, consistent style, आसान search, lightweight format और programmatic generation। pull requests में review करना भी आसान होता है।
क्या मैं Mermaid को वेबसाइट में एम्बेड कर सकता/सकती हूँ?
हाँ। आप अपनी website में Mermaid JavaScript library जोड़कर Mermaid code blocks इस्तेमाल कर सकते हैं। GitHub, GitLab, Notion, Obsidian जैसी कई platforms पहले से Mermaid को native support देती हैं।
डायग्राम का सुझाया गया अधिकतम आकार क्या है?
कोई hard limit नहीं है, लेकिन बहुत बड़े diagrams (लगभग 100+ nodes) कुछ devices पर धीमे render हो सकते हैं। complex systems के लिए कई छोटे, focused diagrams बनाना बेहतर रहता है।