Mermaid डायग्राम एम्बेड करें
एक Mermaid डायग्राम बनाएं और एक शेयर करने योग्य iframe कोड प्राप्त करें जिसे आप किसी भी वेबसाइट में एम्बेड कर सकते हैं। मुफ्त, तत्काल, कोई खाता आवश्यक नहीं।
Mermaid डायग्राम एम्बेड करें
एक Mermaid डायग्राम बनाएं और एक शेयर करने योग्य iframe कोड प्राप्त करें जिसे आप किसी भी वेबसाइट में एम्बेड कर सकते हैं। मुफ्त, तत्काल, कोई खाता आवश्यक नहीं।
आपका Mermaid कोड
लाइव पूर्वावलोकन
एम्बेड कोड
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Example
Embedded Mermaid diagram example
A simple Mermaid flowchart showing how code becomes a live preview and exportable PNG.
Mermaid code
graph TD
A[User opens Mermaid Editor] --> B[Write Mermaid code]
B --> C{Preview looks right?}
C -- Yes --> D[Export PNG]
C -- No --> E[Edit diagram]
E --> Bडेवलपर्स के लिए
आप इस एडिटर का उपयोग किए बिना प्रोग्रामेटिक रूप से एम्बेड URL जेनरेट कर सकते हैं। डायग्राम कोड URL-सुरक्षित base64 के रूप में एन्कोड किया गया है।
URL प्रारूप
https://mermaideditor.com/embed?code={encoded}&theme={theme}कैसे एन्कोड करें
// JavaScript const encoded = btoa(encodeURIComponent(mermaidCode)) const embedUrl = `https://mermaideditor.com/embed?code=${encoded}&theme=default` // Python import base64, urllib.parse encoded = base64.b64encode(urllib.parse.quote(mermaid_code).encode()).decode() embed_url = f"https://mermaideditor.com/embed?code={encoded}&theme=default"समर्थित थीम: default · dark · forest · neutral
Mermaid डायग्राम को कैसे एम्बेड करें
ऊपर के एडिटर में अपना Mermaid डायग्राम कोड लिखें
एक क्लिक से जेनरेट किए गए iframe कोड को कॉपी करें
इसे किसी भी वेबसाइट, ब्लॉग पोस्ट या डॉक्यूमेंटेशन पेज में पेस्ट करें
कहाँ उपयोग करें
GitHub और GitLab
विकि पेजों, issue विवरणों या प्रोजेक्ट डॉक्यूमेंटेशन में लाइव डायग्राम एम्बेड करें।
डॉक्यूमेंटेशन साइट्स
Confluence, Notion या किसी भी HTML-आधारित डॉक्यूमेंटेशन प्लेटफ़ॉर्म में इंटरैक्टिव डायग्राम जोड़ें।
ब्लॉग पोस्ट
आर्किटेक्चर डायग्राम, फ्लोचार्ट और सीक्वेंस डायग्राम के साथ तकनीकी लेखों को समृद्ध करें।
आंतरिक विकि
एम्बेडेड डायग्राम के साथ टीम नॉलेज बेस को विज़ुअल और अप-टू-डेट रखें।
अक्सर पूछे जाने वाले सवाल
क्या एम्बेड सुविधा मुफ्त है?
हां, पूरी तरह से मुफ्त। कोई उपयोग सीमा नहीं, कोई खाता आवश्यक नहीं, और जेनरेट किए गए iframe URL अनिश्चित काल तक काम करते हैं।
कौन से ब्राउज़र एम्बेडेड डायग्राम का समर्थन करते हैं?
एम्बेड व्यूअर Chrome, Firefox, Safari और Edge सहित सभी आधुनिक ब्राउज़रों में काम करता है। यह मानक HTML5 और JavaScript का उपयोग करता है।
क्या मैं iframe का आकार अनुकूलित कर सकता हूं?
हां — बस जेनरेट किए गए iframe कोड में width और height विशेषताओं को अपने लेआउट के अनुसार संपादित करें। आप इसे उत्तरदायी बनाने के लिए CSS भी जोड़ सकते हैं।