डेवलपर / आरेख
Mermaid लाइव एडिटर
Mermaid कोड लिखते जाएँ और डायग्राम को तुरंत देखें: फ़्लोचार्ट, सीक्वेंस डायग्राम, क्लास डायग्राम, Gantt चार्ट और पाई चार्ट, SVG और PNG डाउनलोड के साथ।
Mermaid लाइव एडिटर: यह एडिटर Mermaid की मदद से डायग्राम बनाता है। Mermaid एक ओपन-सोर्स लाइब्रेरी है, जिसका इस्तेमाल GitHub, GitLab और कई डॉक्यूमेंटेशन टूल टेक्स्ट में लिखे डायग्राम के लिए करते हैं। यह strict mode में चलता है, इसलिए किसी और का कोड स्क्रिप्ट नहीं चला सकता और न ही क्लिक हैंडलर जोड़ सकता है। SVG डाउनलोड किसी भी आकार में स्पष्ट रहता है; PNG डाउनलोड सफेद बैकग्राउंड पर स्क्रीन पर दिखने वाले आकार से दोगुने आकार में बनाया जाता है। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।
- श्रेणी
- डेवलपर टूल्स
- रन
- आपके ब्राउज़र में
- लागत
- मुफ़्त · साइन अप की ज़रूरत नहीं
- उपलब्धता
- इस्तेमाल के लिए तैयार
पूरी तरह आपके ब्राउज़र में चलता है
डायग्राम आपके ब्राउज़र में Mermaid के strict mode में बनाए जाते हैं, इसलिए डायग्राम कोड scripts नहीं चला सकता। उसे वहाँ दिखाने के लिए यही कोड GitHub, GitLab या Notion Markdown के mermaid code block में पेस्ट करें।
टेक्स्ट के रूप में diagrams
Graphics program में बनाया गया diagram पुराना हो जाता है, क्योंकि उसे बदलने के लिए फ़ाइल फिर से खोलनी पड़ती है। Mermaid diagram टेक्स्ट की कुछ पंक्तियाँ होता है, जो उस code या document के पास रहती हैं जिसे वह दर्शाता है, उसी commit में बदलती हैं और review में readable diff के रूप में दिखाई देती हैं।
हर diagram अपने type से शुरू होता है: flowchart, जिसकी दिशा TD (top down) या LR (left to right) जैसी हो सकती है, sequenceDiagram, classDiagram, gantt या pie। Nodes को उनके label के साथ एक बार लिखा जाता है, A[Start], और फिर नाम से संदर्भित किया जाता है, A --> B।
Export करना
SVG किसी भी आकार में lines और text को स्पष्ट रखता है, इसलिए documents और slides के लिए बेहतर विकल्प है। PNG chat apps और उन जगहों के लिए उपयुक्त है जहाँ SVG स्वीकार नहीं किया जाता। Export किए गए SVG को हाथ से edit करने के लिए उसे SVG एडिटर में खोलें।
इस्तेमाल करने का तरीका
- किसी उदाहरण से शुरू करें या अपना Mermaid कोड पेस्ट करें।
- कोड एडिट करें; आपके लिखते ही डायग्राम दोबारा बनता है या त्रुटि दिखाई जाती है।
- डायग्राम को SVG या PNG के रूप में डाउनलोड करें, या कोड कॉपी करें।
गोपनीयता और सीमाएँ
डायग्राम आपके ब्राउज़र में बनाए जाते हैं और आपका कोड केवल इसी ब्राउज़र में रखा जाता है, इसलिए अगली बार भी उपलब्ध रहता है।
संबंधित टूल्स
अक्सर पूछे जाने वाले सवाल
Mermaid क्या है?
टेक्स्ट के रूप में डायग्राम लिखने का एक तरीका। A --> B जैसी एक लाइन तीर से जुड़े 2 बॉक्स बनाती है, इसलिए डायग्राम Markdown फ़ाइलों, कोड रिव्यू और टेक्स्ट एडिट के साथ बदल सकते हैं—किसी ड्रॉइंग टूल की ज़रूरत नहीं पड़ती।
मैं GitHub पर डायग्राम कैसे दिखाऊँ?
किसी Markdown फ़ाइल, इश्यू या pull request में कोड को mermaid नाम से चिह्नित fenced code block के अंदर रखें: पहले तीन backticks, फिर mermaid शब्द, उसके बाद कोड और अंत में तीन backticks। GitHub, GitLab और Notion उसे वहीं डायग्राम के रूप में दिखाते हैं।
मेरे डायग्राम में त्रुटि क्यों दिखाई दे रही है?
संदेश उस लाइन का नाम बताता है जिसे Mermaid पढ़ नहीं सका। आम कारण हैं: पहली लाइन में डायग्राम प्रकार का न होना, जैसे flowchart TD; ऐसे brackets या quotes जिन्हें बंद नहीं किया गया हो; और special characters वाला ऐसा टेक्स्ट जिसे quotes में रखना ज़रूरी हो।
कौन-से डायग्राम प्रकार समर्थित हैं?
एडिटर द्वारा लोड किए गए Mermaid version में उपलब्ध सभी प्रकार, जिनमें फ़्लोचार्ट, sequence, class, state, entity-relationship, Gantt, pie, mind maps, timelines और git graphs शामिल हैं। उदाहरणों में सबसे आम 5 प्रकार शामिल हैं।
मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं