Mermaid आरेख

आपके एजेंटों के Mermaid आरेख,
कोड की तरह छपे नहीं, आरेख बनकर

Claude Code या Codex से आरेख माँगें, तो वह Mermaid लिखता है: टेक्स्ट का एक ब्लॉक, जिसे टर्मिनल सिर्फ़ ज्यों का त्यों दिखा सकता है। आप जहाँ भी एजेंट का लिखा पढ़ते हैं, AgentsRoom उसे आरेख के रूप में बना देता है, और कोड एक क्लिक दूर रखता है।

बातचीत दृश्य, Markdown फ़ाइलें, योजना की समीक्षा में योजनाएँ, नोट्स, प्रोजेक्ट मेमोरी और बैकलॉग के टिकट: हर mermaid कोड ब्लॉक अपना आरेख बन जाता है, ऐप की लाइट या डार्क थीम में, macOS, Windows और Linux पर। कुछ इंस्टॉल नहीं करना, न कोई स्किल, न कोई MCP सर्वर।

एक ब्लॉक, पढ़ने के दो तरीके
टर्मिनल में
```mermaid
flowchart LR
  A[Login] --> B{Token valid?}
  B -->|yes| C[Dashboard]
  B -->|no| A
```
AgentsRoom मेंकोड दिखाएँ

एक ही mermaid ब्लॉक, जैसा टर्मिनल उसे दिखाता है और जैसा AgentsRoom उसे बनाता है।

Claude Code से पूछें कि कोई रिक्वेस्ट आपके ऐप में कैसे गुज़रती है, या Codex से किसी डेटाबेस माइग्रेशन की टेबलों का खाका बनाने को कहें, और अक्सर आपको एक ब्लॉक मिलता है जो mermaid से शुरू होता है: एक फ़्लोचार्ट, सीक्वेंस आरेख या एंटिटी-रिलेशनशिप आरेख, टेक्स्ट में लिखा हुआ। टर्मिनल उसे सिर्फ़ ज्यों का त्यों दिखा सकता है, इसलिए आप डैश से बने तीर पढ़ते हैं और बॉक्स अपने दिमाग़ में बनाते हैं।

AgentsRoom वही Markdown पढ़ता है और उसे आरेख के रूप में बनाता है। ब्लॉक स्क्रीन पर आते ही अपना आरेख बन जाता है, होवर करने पर दिखने वाला «कोड दिखाएँ» बटन सोर्स वापस लाता है, और «आरेख दिखाएँ» फिर से आरेख पर लौटाता है। अगर एजेंट ने सिंटैक्स की गलती की, तो कोड स्क्रीन पर बना रहता है और एक लाइन बताती है कि आरेख नहीं बनाया जा सका, इसलिए एजेंट का लिखा आप कभी नहीं खोते।

आरेख बनाना CLI पर निर्भर नहीं है: यह काम ऐप का Markdown रीडर टेक्स्ट से करता है। Codex के लिखे README में, Claude Code की लिखी योजना में या किसी भी दूसरे एजेंट के लिखे टिकट में आरेख एक ही तरह बनता है।

एजेंट को पढ़ते समय क्या बदलता है

जहाँ भी ऐप Markdown दिखाता है, वहाँ एक ही नियम: mermaid ब्लॉक आरेख के रूप में दिखता है।

जहाँ भी आप एजेंट को पढ़ते हैं

बातचीत दृश्य, फ़ाइल प्रीव्यू और फ़ाइल टैब में Markdown फ़ाइलें, योजना की समीक्षा में योजनाएँ, नोट्स, प्रोजेक्ट मेमोरी के नोट्स, बैकलॉग के टिकट और उनकी टिप्पणियाँ, और «बिना टोके पूछें» के जवाब।

एजेंट के लिखते-लिखते बनता है

एजेंट आरेख लाइन दर लाइन लिखता है। AgentsRoom आरेख बनाने से पहले टेक्स्ट के एक पल ठहरने का इंतज़ार करता है, और तब तक आख़िरी वैध आरेख स्क्रीन पर रखता है, ताकि ब्लॉक कोड और आरेख के बीच झिलमिलाए नहीं।

सोर्स एक क्लिक दूर

किसी आरेख पर होवर करें और जिस Mermaid टेक्स्ट से वह बना है उसे पढ़ने के लिए «कोड दिखाएँ» दबाएँ, फिर लौटने के लिए «आरेख दिखाएँ»। सोर्स कभी बदला नहीं जाता, बस अलग तरह से दिखाया जाता है।

टूटा आरेख भी पढ़ने लायक रहता है

जब Mermaid ब्लॉक को पार्स नहीं कर पाता, तो कोड स्क्रीन पर बना रहता है और उसके नीचे एक लाइन: «यह आरेख नहीं बनाया जा सका: इसकी जगह इसका कोड दिखाया गया है।» आप उसे जस का तस एजेंट को वापस दे सकते हैं।

Mermaid 11 के सभी आरेख

फ़्लोचार्ट, सीक्वेंस, क्लास, स्टेट और एंटिटी-रिलेशनशिप आरेख, Gantt चार्ट, माइंड मैप, git ग्राफ़: Mermaid 11 जो भी बना सकता है, AgentsRoom उसे बनाता है।

स्क्रीन से बाहर कुछ नहीं बनता

कोई आरेख तभी लेआउट होता है जब वह स्क्रीन के पास आता है, एक बार में एक, और नतीजा सहेज लिया जाता है। आरेखों से भरी लंबी बातचीत में उन आरेखों का कोई ख़र्च नहीं होता जिन तक आपने अभी स्क्रॉल नहीं किया।

docs/checkout-flow.md का AgentsRoom फ़ाइल प्रीव्यू: AI कोडिंग एजेंट का लिखा mermaid फ़्लोचार्ट आरेख के रूप में बना हुआ, कार्ट से स्टॉक और पेमेंट की जाँच होते हुए पुष्टि ईमेल भेजने तक, Show code बटन के साथ
«फ़ाइलें» टैब से खोली गई Markdown फ़ाइल: एजेंट का लिखा mermaid ब्लॉक आरेख बनकर दिखता है, और Show code बटन (हिंदी ऐप में «कोड दिखाएँ») उसका सोर्स वापस लाता है।

इसे कैसे इस्तेमाल करें

कुछ चालू नहीं करना। सवाल से आरेख तक चार चरण।

  1. 1

    आरेख माँगें

    किसी भी एजेंट से सीधे शब्दों में कहें: लॉगिन फ़्लो को Mermaid फ़्लोचार्ट के रूप में बनाओ, या इस API कॉल को सीक्वेंस आरेख के रूप में दिखाओ। एजेंट mermaid ब्लॉक के साथ जवाब दे, इसके लिए आम तौर पर Mermaid कह देना काफ़ी होता है।

  2. 2

    बातचीत दृश्य में पढ़ें

    एजेंट के पैनल को बातचीत दृश्य पर ले जाएँ: ब्लॉक एजेंट के जवाब के अंदर आरेख के रूप में दिखता है। नीचे का टर्मिनल नहीं बदलता और अब भी टेक्स्ट दिखाता है।

  3. 3

    या उसकी लिखी फ़ाइल खोलें

    जब एजेंट आरेख को किसी Markdown फ़ाइल (README, आर्किटेक्चर नोट, योजना) में रखता है, तो उसे उसके जवाब में दिए फ़ाइल लिंक से, दाएँ पैनल के «फ़ाइलें» टैब से या «फ़ाइल > फ़ाइल खोलें» से खोलें (macOS पर Cmd O, Windows और Linux पर Ctrl O): प्रीव्यू और फ़ाइल टैब उसके हर आरेख को बनाते हैं।

  4. 4

    सोर्स जाँचें

    आरेख पर होवर करें और Mermaid टेक्स्ट पढ़ने या कॉपी करने के लिए «कोड दिखाएँ» दबाएँ, फिर आरेख पर लौटने के लिए «आरेख दिखाएँ»।

टर्मिनल, GitHub और Mermaid स्किल पहले से क्या करते हैं

Claude Code और Codex CLI टर्मिनल में चलते हैं, और टर्मिनल अक्षर दिखाता है, चित्र नहीं: mermaid ब्लॉक उसमें अपने सोर्स के रूप में दिखता है। यह CLI में किसी सेटिंग की कमी नहीं है, टर्मिनल होता ही ऐसा है।

इसीलिए लोग Claude Code के लिए Mermaid स्किल, प्लगइन या MCP सर्वर ढूँढ़ते हैं। ये एजेंट को वैध आरेख लिखने या उसे इमेज फ़ाइल में एक्सपोर्ट करने में मदद करते हैं। आरेख पढ़ने के लिए आपको फिर भी उसका कोड किसी ऐसी जगह पेस्ट करना पड़ता है जो उसे बनाए: GitHub Markdown फ़ाइलों और टिप्पणियों में mermaid ब्लॉक बनाता है, mermaid.live आप जो भी पेस्ट करें उसे बनाता है, और किसी एडिटर का Markdown प्रीव्यू यह काम Mermaid एक्सटेंशन के साथ करता है।

AgentsRoom इन टूल्स की जगह नहीं लेता। जब आप वैसे भी एजेंट को पढ़ रहे होते हैं, तो यह कॉपी-पेस्ट हटा देता है: आरेख उसी बातचीत, योजना या फ़ाइल में बनता है जो आपने एजेंट के बगल में पहले से खोल रखी है।

सीमाएँ

  • एजेंट का कच्चा टर्मिनल अब भी सोर्स दिखाता है: आरेख बातचीत दृश्य और Markdown रीडरों में बनता है, टर्मिनल ग्रिड के अंदर नहीं।
  • बातचीत दृश्य उन CLI के लिए है जिनका ट्रांसक्रिप्ट AgentsRoom पढ़ सकता है: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi और Antigravity CLI। बाकी के साथ, एजेंट की लिखी Markdown फ़ाइल खोलें।
  • आरेख Mermaid की dark और neutral थीम इस्तेमाल करते हैं, जो ऐप की लाइट या डार्क थीम के हिसाब से चुनी जाती है। वे आपका एक्सेंट रंग नहीं लेते।
  • आरेख के अंदर का लिंक सिर्फ़ http या https पता खोलता है, Markdown लिंक की तरह। किसी लोकल फ़ाइल का लिंक कुछ नहीं करता।
  • लेबल सादा टेक्स्ट होते हैं: आरेख के अंदर का HTML और स्क्रिप्ट हटा दिए जाते हैं, और आरेख में लिखी कॉन्फ़िगरेशन लाइन इसे नहीं बदल सकती।
  • कोई एक्सपोर्ट बटन नहीं है: किसी आरेख को PNG या SVG फ़ाइल के रूप में रखने के लिए, एजेंट से कहें कि वह उसे Mermaid के कमांड लाइन टूल से एक्सपोर्ट करे।

अक्सर पूछे जाने वाले सवाल

क्या Claude Code Mermaid आरेख रेंडर कर सकता है?

टर्मिनल में नहीं। Claude Code Mermaid आरेख को कोड ब्लॉक में लिखता है, और टर्मिनल उसे सिर्फ़ टेक्स्ट के रूप में दिखा सकता है। वही एजेंट AgentsRoom में चलाएँ और उसके पैनल को बातचीत दृश्य पर ले जाएँ: ब्लॉक जवाब के अंदर आरेख के रूप में बनता है, और «कोड दिखाएँ» बटन सोर्स वापस लाता है।

किसी एजेंट ने Markdown फ़ाइल में जो Mermaid आरेख लिखा है, उसका प्रीव्यू कैसे देखूँ?

फ़ाइल को AgentsRoom में खोलें: एजेंट के जवाब में फ़ाइल लिंक पर क्लिक करें, दाएँ पैनल के «फ़ाइलें» टैब में उसे चुनें, या «फ़ाइल > फ़ाइल खोलें» इस्तेमाल करें (macOS पर Cmd O, Windows और Linux पर Ctrl O)। Markdown प्रीव्यू, और अगर आप उसे टैब में खोलें तो फ़ाइल टैब, फ़ाइल के हर mermaid ब्लॉक को आरेख के रूप में बनाते हैं।

क्या यह Codex और दूसरे एजेंट CLI के साथ काम करता है?

हाँ। आरेख ऐप का Markdown रीडर टेक्स्ट से बनाता है, चाहे उसे किसी भी CLI ने लिखा हो, इसलिए Codex, Claude Code या किसी भी दूसरे एजेंट का आरेख फ़ाइलों, योजनाओं, नोट्स और टिकटों में एक ही तरह बनता है। बातचीत दृश्य, जहाँ जवाब आते ही उनके आरेख बन जाते हैं, Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi और Antigravity CLI को कवर करता है।

क्या मुझे Mermaid स्किल या MCP सर्वर चाहिए?

आरेख पढ़ने के लिए नहीं। कोई स्किल या MCP सर्वर एजेंट को वैध Mermaid लिखने या उसे इमेज में एक्सपोर्ट करने में मदद कर सकता है। AgentsRoom सिर्फ़ वही बनाता है जो पहले से लिखा है, इसलिए दोनों साथ काम करते हैं: स्किल आरेख को बेहतर बनाता है, AgentsRoom उसे दिखाता है।

कौन-से आरेख प्रकार बनते हैं, और अगर सिंटैक्स गलत हो तो?

Mermaid 11 जो भी बनाता है: फ़्लोचार्ट, सीक्वेंस, क्लास, स्टेट और एंटिटी-रिलेशनशिप आरेख, Gantt चार्ट, माइंड मैप, git ग्राफ़ और उसकी सूची का बाकी सब। जिस ब्लॉक को Mermaid पार्स नहीं कर पाता, वह कोड ही रहता है, और उसके नीचे एक लाइन बताती है कि आरेख नहीं बनाया जा सका। एजेंट से उसे ठीक करने को कहें: उसका सुधरा हुआ ब्लॉक आरेख बन जाता है।

आपको यह भी पसंद आ सकता है

बातचीत दृश्य

Claude Code, Codex और पाँच और एजेंट CLI के लिए चैट व्यू: सेशन CLI के अपने ट्रांसक्रिप्ट से पढ़ा जाता है, टूल कॉल समेटे हुए, जवाब लाइव, डेस्कटॉप और फ़ोन पर।

योजना की समीक्षा

आपका एजेंट एक योजना प्रस्तावित करता है: उसे दस्तावेज़ की तरह पढ़ें, किसी भी अंश पर टिप्पणी करें, उसे बदलें या हटाएँ, फिर योजना मंज़ूर करें या एक ही संदेश में वापस भेजें। हर संस्करण सहेजा जाता है।

प्रोजेक्ट मेमोरी

अपने एआई कोडिंग एजेंटों को दीर्घकालिक मेमोरी दें। निर्णय, आर्किटेक्चर और समस्याएं सत्रों के बीच बनी रहती हैं और परियोजना पर सभी के साथ साझा की जाती हैं। मुफ्त, असीमित।

बिना टोके पूछें

व्यस्त AI कोडिंग एजेंट को टोके बिना उससे सवाल पूछें। उसकी बातचीत की एक रीड-ओनली कॉपी टैब वाले बबल में जवाब देती है, जबकि उसका टर्मिनल काम करता रहता है। Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI और Kimi Code, डेस्कटॉप से या आपके फ़ोन से।

अपने एजेंटों के आरेख, आरेख के रूप में पढ़ें

macOS, Windows या Linux के लिए AgentsRoom डाउनलोड करें, किसी एजेंट से Mermaid आरेख माँगें और उसके पैनल को बातचीत दृश्य पर ले जाएँ।

मुफ़्तAgentsRoom डाउनलोड करें

कंपेनियन ऐप: चलते-फिरते अपने एजेंट्स मॉनिटर करें

Claude, Codex, Antigravity CLI या किसी अन्य AI प्रदाता का उपयोग करें।

एक्सटेंशन इंस्टॉल करें
Chrome Web Store

बग और अनुरोध सीधे अपने सार्वजनिक बैकलॉग में भेजें।

मल्टी-प्रोजेक्ट
मल्टी-प्रोवाइडर
मल्टी-एजेंट
लाइव स्टेटस
फाइल डिफ और कमिट
मोबाइल ऐप
लाइव प्रीव्यू
एजेंट टीमें
ब्राउज़र ऑटोमेशन
बैकलॉग-संचालित डेव
प्रॉम्प्ट लाइब्रेरी
स्किल्स लाइब्रेरी
सभी सुविधाएँ देखें