Mermaid डायग्राम एडिटर

Bee Tools का मुफ़्त ऑनलाइन Mermaid एडिटर। फ़्लोचार्ट, सीक्वेंस, Gantt, क्लास और ER डायग्राम समर्थित। लाइव प्रीव्यू, SVG/PNG एक्सपोर्ट। 100% आपके ब्राउज़र में रेंडर होता है।

टेक्स्ट-आधारित सिंटैक्स से पेशेवर डायग्राम बनाएँ और तुरंत प्रीव्यू देखें। Mermaid के घोषणात्मक सिंटैक्स में कोई भी डायग्राम लिखें और Bee Tools उसे आपके ब्राउज़र में ही साफ़ वेक्टर ग्राफ़िक के रूप में रेंडर कर देगा। दस्तावेज़ों, स्लाइड और ब्लॉग के लिए PNG या SVG में एक्सपोर्ट करें।

Mermaid चीट शीट

Mermaid क्या है

Mermaid को Knut Sveidqvist ने 2014 में डायग्राम बताने के लिए एक घोषणात्मक, Markdown-शैली भाषा के रूप में बनाया था। ड्रैग-एंड-ड्रॉप टूल के मुक़ाबले Mermaid आपके डायग्राम को वर्ज़न-नियंत्रित स्रोत फ़ाइलों में रहने देता है।

तेज़ संदर्भ

  • flowchart TD/LR — फ़्लोचार्ट। A-->B एक लिंक है, A{?} एक निर्णय है, A([Start]) स्टेडियम आकार है।
  • sequenceDiagram — सीक्वेंस। Alice->>Bob: Hello सिंक मैसेज भेजता है; Bob-->>Alice: Hi उसका जवाब है।
  • gantt — Gantt चार्ट। पहले dateFormat घोषित करें, फिर आरंभ तिथि और अवधि के साथ कार्य बताएँ।
  • classDiagram — क्लास डायग्राम। क्लास और संबंध परिभाषित करें, जैसे उत्तराधिकार Animal <|-- Dog।
  • stateDiagram-v2 — स्टेट मशीन, UI/ऑर्डर/पाइपलाइन प्रवाह के लिए बेहतरीन।
  • pie — "Label" : value जोड़ों से पाई चार्ट।

व्यावहारिक सुझाव

  1. नोड लेबल छोटे रखें — लंबे लेबल लेआउट बिगाड़ देते हैं।
  2. जटिल डायग्राम को पठनीय हिस्सों में बाँटने के लिए सबग्राफ़ का उपयोग करें।
  3. बेहतर पठनीयता के लिए classDef से रंग अपनी पसंद के अनुसार तय करें।
  4. स्रोत को सँभालने योग्य बनाए रखने के लिए बीच-बीच में %% comments डालें।

बाईं तरफ़ के नमूने में बदलाव करें और दाईं तरफ़ रेंडर हुआ डायग्राम देखें।

ओपन-सोर्स सूचना: रेंडरिंग mermaid से संचालित है, MIT License. Copyright (c) 2014-2022 Knut Sveidqvist.

सामान्य प्रश्न

Mermaid क्या है?
Mermaid एक JavaScript-आधारित डायग्रामिंग भाषा है, जिसे Knut Sveidqvist ने बनाया था। Markdown जैसे टेक्स्ट से यह फ़्लोचार्ट, सीक्वेंस डायग्राम, Gantt चार्ट और बहुत कुछ बनाती है। GitHub, GitLab, Docusaurus और Obsidian में इसका मूल समर्थन शामिल है।
कौन-कौन से डायग्राम प्रकार समर्थित हैं?
हम flowchart, sequenceDiagram, gantt, classDiagram, stateDiagram-v2, pie, erDiagram, gitGraph और requirementDiagram शुरू से ही समर्थित करते हैं।
क्या मेरे डायग्राम सहेजे या अपलोड किए जाते हैं?
नहीं। सब कुछ पूरी तरह आपके ब्राउज़र के भीतर बनता है। टैब बंद करने पर सब मिट जाता है।
क्या SVG/PNG एक्सपोर्ट में गुणवत्ता घटती है?
SVG वेक्टर है — किसी भी ज़ूम स्तर पर साफ़। PNG 2× रिज़ॉल्यूशन पर रैस्टर होता है, जो अधिकांश दस्तावेज़ों और स्लाइड के लिए पर्याप्त है।
Markdown में Mermaid कैसे एम्बेड करूँ?
कोड को `mermaid` फ़ेंस्ड ब्लॉक में लपेटें। GitHub, GitLab, Hugo, Hexo और Obsidian उसे अपने आप रेंडर कर देते हैं।