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

 (github.com/lukilabs)
16 पॉइंट द्वारा GN⁺ 2026-01-30 | 1 टिप्पणियां | 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 बेहतर होता है

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

1 टिप्पणियां

 
GN⁺ 2026-01-30
Hacker News की राय

  • Alexander Grooff द्वारा बनाई गई Go लाइब्रेरी mermaid-ascii पर आधारित यह प्रोजेक्ट वाकई शानदार है
    हालांकि, इसमें "start" edge रेंडर नहीं होने वाला एक bug मिला
    टेस्ट agents.craft.do/mermaid पर किया गया

  • समझ नहीं आता कि आजकल ASCII diagram फिर से इतना ध्यान क्यों खींच रहे हैं
    Mermaid और PlantUML पहले से ही text-based हैं, और ज़्यादातर users मशीनों से ज़्यादा इंसानों के लिए पढ़ने में आसान standard diagrams चाहते हैं
    ASCII printable characters तक सीमित होता है, इसलिए इसकी expressive power कम होती है और standardization भी मुश्किल है

    • यह context पर निर्भर करता है. उदाहरण के लिए, README या CLI output जैसे माहौल में जहाँ Mermaid render नहीं हो सकता, वहाँ readability के हिसाब से ASCII सबसे अच्छा विकल्प है
    • code comments के अंदर ASCII diagrams डाले जा सकते हैं. Claude Code जैसे terminal-based tools में भी ये अच्छी तरह दिखते हैं
    • यह कहना कि “ASCII बेकार है” सही नहीं होगा; text-centric workflow (जैसे Org Mode, Git repository management) में यह उल्टा काफ़ी उपयोगी है
      क्योंकि इसमें image files संभालने या Git LFS जैसी जटिल setup की ज़रूरत नहीं पड़ती
    • renderer की ज़रूरत न होना भी एक फ़ायदा है. Markdown docs या source code के अंदर ही इसे सीधे “rendered” रूप में पढ़ा जा सकता है
    • बहुत से developers और coding agents मुख्य रूप से Markdown और CLI environments का इस्तेमाल करते हैं, इसलिए ऐसा ASCII approach स्वाभाविक लगता है

  • मुझे ASCII diagrams सच में बहुत पसंद हैं
    terminal में cat से देखें या वेबसाइट पर render करें, दोनों जगह एक जैसे अच्छे लगते हैं
    बस एक अच्छा monospaced font हो, तो देखने में भी काफ़ी साफ़-सुथरे लगते हैं
    Monodraw नाम का ASCII diagram बनाने वाला app भी सुझाऊँगा

    • ^Unicode
    • source code के ऊपर diagram रख सकना खास तौर पर बहुत अच्छा लगता है

  • असली Mermaid ASCII renderer दरअसल AlexanderGrooff/mermaid-ascii प्रोजेक्ट से लिया गया है
    इस प्रोजेक्ट ने उसे TypeScript में convert किया और अपनी theme जोड़ी

    • सच कहें तो शायद mermaid-ascii को बस WASM में bundle करना भी काफ़ी होता
      मुख्य algorithm लगभग 1:1 conversion है, इसलिए Claude को इसे TS में port करने में शायद एक घंटा भी नहीं लगा होता
      Go code और TS code की तुलना की जा सकती है
    • credit देने के लिए धन्यवाद
    • यह Go-based है, इसलिए package management पर कोई मज़ाक करने की ज़रूरत नहीं. मैं इसे अपने debugger में integrate करने वाला हूँ
    • किसी ने इशारा किया कि कहीं AI ने पूरा प्रोजेक्ट copy करके सिर्फ नाम तो नहीं बदल दिया
    • original link ठीक कर दिया गया. लगता है submitter ने इसे अच्छी नीयत से पोस्ट किया था

  • Mermaid पर ध्यान जा रहा है, लेकिन Kroki(kroki.io) कहीं ज़्यादा तरह के diagram formats को support करता है
    इसमें BlockDiag, BPMN, C4, D2, DBML, Excalidraw, GraphViz आदि लगभग सभी text-based diagrams शामिल हैं
    मेरा Markdown editor KeenWrite(keenwrite.com) Kroki को service के रूप में integrate करता है, इसलिए नया format जुड़ते ही वह अपने आप इस्तेमाल किया जा सकता है
    Mermaid <foreignObject> का इस्तेमाल करता है, इसलिए ज़्यादातर libraries में इसे render करना मुश्किल होता है

    • MermaidJS और Kroki की तुलना करना कुछ-कुछ PDF.js और Adobe Acrobat की तुलना जैसा है
      MermaidJS वेबपेज के अंदर तेज़ी से और local रूप में चलता है, जबकि Kroki बाहरी service dependency पर निर्भर करता है
      अगर बहुत complex diagrams की ज़रूरत नहीं है, तो Mermaid ज़्यादा सरल विकल्प है
    • मैंने पहले NetworkX DAG को ASCII में render करने के लिए phart नाम का tool बनाया था
      README examples में chess graph समेत कई output examples हैं
    • शुरुआत में मुझे लगा कि Kroki का design बहुत shadow और font distortion से भरा हुआ है, इसलिए पसंद नहीं आया, लेकिन बाद में पता चला कि यह गलतफ़हमी थी
      फिर भी Mermaid की default styling ज़्यादा साफ़ लगती है
      वैसे KeenWrite काफ़ी शानदार दिखता है

  • text को ASCII diagram में बदलने वाला tool Diagon भी है
    मैंने एक text→diagram tools list भी बनाई है, लेकिन text→ASCII conversion tools बहुत ज़्यादा नहीं हैं

    • इसे अच्छी list कहकर धन्यवाद दिया गया

  • live demo चलाने के लिए शायद AI agent platform download करना पड़ता है
    बिना install किए सीधे आज़माना चाहता हूँ, इसलिए यह कमी खलती है

    • अच्छा होगा अगर developers GitHub Pages आधारित client-only demo बना दें
      प्रोजेक्ट की structure देखकर यह पूरी तरह संभव लगता है

  • “Subgraph Direction Override” फीचर है, जिससे subgraph की direction अलग से सेट की जा सकती है
    इससे Mermaid में पहले support न होने वाले swim lane diagrams जैसा कुछ बनाया जा सकता है

  • मैंने बनाया हुआ Selkie एक experimental प्रोजेक्ट है, जो Mermaid parser और renderer का Rust में पूरा implementation है
    यह Claude Code से कितना कुछ संभव है, इसे परखने के लिए बनाया गया था, और नतीजे चौंकाने वाले रहे
    इसे Playground में सीधे चलाया जा सकता है
    अगर Kitty terminal support हो, तो diagram को सीधे terminal में भी आउटपुट किया जा सकता है
    मैं जल्द ही पूरी प्रक्रिया पर एक ब्लॉग पोस्ट लिखने वाला हूँ

  • यह प्रोजेक्ट वाकई शानदार है, और Claude Code के साथ इसकी synergy भी प्रभावशाली है
    मैंने भी एक मिलता-जुलता प्रोजेक्ट किया था, लेकिन ASCII की जगह interactive code exploration पर ध्यान दिया
    इसे इंसानी समझ को बेहतर बनाने की दिशा में डिज़ाइन किया गया था, D2 इस्तेमाल किया गया, और Mermaid support भी तैयार हो रहा है
    मैं यह सुनना चाहूँगा कि इंसानों के लिए interactivity ज़्यादा अहम है या agent context
    प्रोजेक्ट लिंक