Mermaid ASCII: टर्मिनल में Mermaid डायग्राम रेंडरिंग

 (github.com/lukilabs)
16 पॉइंट द्वारा GN⁺ 2026-01-30 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • beautiful-mermaid Mermaid डायग्राम को SVG या ASCII आर्ट में रेंडर करने वाला बेहद तेज़ TypeScript-आधारित टूल है
  • यह 5 तरह के डायग्राम (Flowchart, State, Sequence, Class, ER) को सपोर्ट करता है और टर्मिनल व ब्राउज़र दोनों में काम करता है
  • 15 बिल्ट-इन थीम और Shiki compatibility के जरिए VS Code थीम को सीधे लागू किया जा सकता है
  • Mono mode सिर्फ दो रंगों के साथ भी एकसमान visual expression देता है, और CSS custom properties के जरिए real-time theme switching को सपोर्ट करता है
  • AI-assisted programming environment में data flow और system structure को visualize करने के लिए यह हल्का और dependency-free टूल खास महत्व रखता है

अवलोकन

  • beautiful-mermaid Mermaid डायग्राम को SVG या ASCII/Unicode टेक्स्ट में रेंडर करने वाला टूल है
    • यह DOM dependency के बिना काम करता है, और बेहद तेज़ रेंडरिंग (500ms के भीतर 100 से अधिक डायग्राम) को सपोर्ट करता है
    • इसे Craft टीम ने Craft Agents के लिए विकसित किया
  • Mermaid-ascii (Go-आधारित प्रोजेक्ट) को TypeScript में पोर्ट करके इसकी क्षमताएँ बढ़ाई गईं
    • Sequence, Class, ER डायग्राम सपोर्ट जोड़ा गया
    • Unicode box characters, spacing और padding configuration जैसी सुविधाएँ शामिल हैं

मुख्य फीचर्स

  • समर्थित डायग्राम प्रकार: Flowchart, State, Sequence, Class, ER
  • आउटपुट फ़ॉर्मैट: SVG (rich UI के लिए), ASCII/Unicode (टर्मिनल के लिए)
  • थीम सिस्टम
    • 15 बिल्ट-इन थीम उपलब्ध (tokyo-night, dracula, nord, github-dark आदि)
    • Mono mode: सिर्फ background (bg) और foreground (fg) दो रंगों से पूरे रंग-पैलेट का स्वतः निर्माण
    • Enriched mode: accent, muted, surface, border आदि वैकल्पिक रंग सेट किए जा सकते हैं
    • CSS custom properties आधारित real-time switching का सपोर्ट
  • Shiki integration
    • VS Code थीम के रंगों को डायग्राम रंगों से स्वतः मैप करता है
    • fromShikiTheme() फ़ंक्शन से bg, fg, accent आदि निकाले जा सकते हैं

इंस्टॉलेशन और उपयोग

  • इंस्टॉलेशन कमांड
    • npm install beautiful-mermaid या bun add beautiful-mermaid, pnpm add beautiful-mermaid
  • SVG रेंडरिंग उदाहरण 
    import { renderMermaid } from 'beautiful-mermaid'
const svg = await renderMermaid(`graph TD; A-->B;`)
  • ASCII रेंडरिंग उदाहरण 
    import { renderMermaidAscii } from 'beautiful-mermaid'
const ascii = renderMermaidAscii(`graph LR; A --> B --> C`)
  • ब्राउज़र उपयोग
    • CDN(unpkg, jsDelivr) के जरिए <script> टैग से सीधे लोड किया जा सकता है
    • global object beautifulMermaid से renderMermaid, renderMermaidAscii, THEMES आदि एक्सेस किए जा सकते हैं

ASCII आउटपुट और विकल्प

  • Unicode mode (डिफ़ॉल्ट) और pure ASCII mode दोनों का सपोर्ट
  • विकल्प
    • useAscii: ASCII उपयोग करना है या नहीं
    • paddingX, paddingY: नोड्स के बीच का अंतर
    • boxBorderPadding: नोड के अंदर की padding
  • उदाहरण आउटपुट 
    ┌───┐     ┌───┐
│ A │────►│ B │
└───┘     └───┘

API सारांश

  • renderMermaid(text, options?): Mermaid डायग्राम को SVG में रेंडर करता है
    • विकल्प: bg, fg, accent, muted, surface, border, font, transparent
  • renderMermaidAscii(text, options?): ASCII/Unicode टेक्स्ट में रेंडर करता है
  • fromShikiTheme(theme): Shiki थीम से रंग निकालता है
  • THEMES: 15 बिल्ट-इन थीम ऑब्जेक्ट
  • DEFAULTS: डिफ़ॉल्ट रंग (#FFFFFF, #27272A)

लाइसेंस और निर्माण

  • MIT लाइसेंस
  • Craft टीम द्वारा निर्मित
  • ASCII इंजन का आधार: Alexander Grooff का mermaid-ascii

तकनीकी महत्व

  • AI coding assistant environment में डायग्राम को टर्मिनल या चैट इंटरफ़ेस के भीतर तुरंत visualize किया जा सकता है
  • हल्की, तेज़ और dependency-free संरचना के कारण CLI टूल्स या server environments में भी इसका उपयोग मूल्यवान है
  • थीम विस्तारशीलता और compatibility के जरिए developer experience बेहतर होता है

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.