मुफ़्त Mermaid डायग्राम एडिटर
लाइव प्रीव्यू के साथ Mermaid सिंटैक्स में फ्लोचार्ट, सीक्वेंस डायग्राम, Gantt चार्ट और अधिक लिखें। SVG या PNG के रूप में एक्सपोर्ट करें। पूरी तरह आपके ब्राउज़र में चलता है।
खिसकाने के लिए खींचें या स्क्रॉल करें। ज़ूम के लिए पिंच करें, या Ctrl + स्क्रॉल करें। पूर्वावलोकन को ऊँचा करने के लिए निचला किनारा खींचें।
💡 Mermaid सिंटैक्स में डायग्राम लिखें — फ़्लोचार्ट, सीक्वेंस डायग्राम, गैंट चार्ट, क्लास डायग्राम और बहुत कुछ — और SVG या PNG में एक्सपोर्ट करें। सब कुछ आपके ब्राउज़र में चलता है: आपका डायग्राम टेक्स्ट कभी अपलोड नहीं होता, और Mermaid रेंडरिंग इंजन किसी तीसरे पक्ष के CDN से नहीं, इसी साइट से आता है।
सामान्य उपयोग
- फ्लोचार्ट बनाएंटेक्स्ट से फ्लोचार्ट बनाएं और इसे इमेज के रूप में एक्सपोर्ट करें।
- अनुक्रम आरेख बनाएंआरेख दिखाएं कि कैसे सिस्टम या लोग समय के साथ बातचीत करते हैं।
- README में आरेख जोड़ेंऐसे आरेख बनाएं जिन्हें GitHub आपके README में मूल रूप से प्रस्तुत करता है।
- गैंट चार्ट बनाएंटेक्स्ट से प्रोजेक्ट टाइमलाइन को गैंट चार्ट के रूप में बिछाएं।
- क्लास आरेख बनाएंसॉफ्टवेयर डिजाइन के लिए क्लास और उनके संबंधों को आरेखित करें।
यह कैसे काम करता है
Mermaid आपको डायग्राम को टेक्स्ट के रूप में लिखने देता है और उन्हें अपने आप रेंडर करता है — वर्शन कंट्रोल में डायग्राम रखने के लिए बढ़िया। यह लाइव एडिटर है जो टाइप करते ही रेंडर करता है।
- 1Mermaid इंजन लोड होता हैपहली बार टूल इस्तेमाल करने पर Mermaid लाइब्रेरी LibraTool से लोड होती है, फिर आपका ब्राउज़र उसे कैश कर लेता है।
- 2आप डायग्राम कोड लिखते हैंफ़्लोचार्ट, सीक्वेंस डायग्राम, गैंट चार्ट, क्लास डायग्राम, पाई चार्ट और बहुत कुछ — Mermaid के टेक्स्ट सिंटैक्स से।
- 3यह लाइव रेंडर होता हैआपका कोड टाइप करते समय ही पार्स होकर आपके ब्राउज़र में SVG के रूप में रेंडर होता है, लाइट और डार्क थीम के साथ।
- 4SVG या PNG एक्सपोर्ट करेंडायग्राम को स्केलेबल SVG या 2× PNG के रूप में डाउनलोड करें और डॉक्स, स्लाइड या README में लगाएँ।
आपका डायग्राम कोड — जो आंतरिक सिस्टम का वर्णन कर सकता है — पूरी तरह आपके ब्राउज़र में रेंडर होता है और कभी अपलोड नहीं होता।
संबंधित टूल
मार्कडाउन संपादक
वास्तविक समय में मार्कडाउन लिखें और पूर्वावलोकन करें। शीर्षकों, बोल्ड, इटैलिक, कोड ब्लॉक, तालिकाओं और सूचियों का समर्थन करता है।
CSS ग्रिड जनरेटर
CSS ग्रिड को विज़ुअली डिज़ाइन करें — ट्रैक, इकाइयाँ और अंतराल — और जेनरेट किए गए CSS और HTML को कॉपी करें।
ASCII ट्री जेनरेटर
इंडेंटेड सूची को README और दस्तावेज़ों के लिए क्लीन फोल्डर ट्री (├── └──) में बदलें। Unicode या प्लेन-ASCII आउटपुट। पूरी तरह आपके ब्राउज़र में चलता है।