.mmd फ़ाइल कैसे खोलें
.mmd फ़ाइल एक साधारण पाठ फ़ाइल है जिसमें एक Mermaid आरेख होता है। वह न चित्र है न कोई द्विआधारी रूप — आप उसे किसी भी पाठ संपादक में खोलकर पढ़ सकते हैं। आरेख के रूप में देखने के लिए उसे नीचे वाले चौखटे पर छोड़िए। वह आपके अपने ब्राउज़र में बनता है और कुछ भी किसी सर्वर तक नहीं जाता।
अपनी .mmd फ़ाइल यहाँ छोड़ें
.mermaid, .md और .txt भी चलती हैं। फ़ाइल ब्राउज़र में पढ़ी जाती है और कभी भेजी नहीं जाती।
.mmd फ़ाइल क्या है
Mermaid आरेखों के लिए एक पाठ-आधारित सिंटैक्स है। आप आरेख को शब्दों में बताते हैं और इंजन उसे बना देता है — ठीक वैसे जैसे Markdown स्वरूपण बताता है और इंजन पन्ना तैयार करता है। .mmd फ़ाइल में वही पाठ होता है और कुछ नहीं: न कोई शैली, न चित्र का डेटा, न कोई मेटाडेटा।
इस रूप के होने की पूरी वजह यही है। पाठ होने के कारण आरेख उसी Git भंडार में उस कोड के पास रह सकता है जिसका वह वर्णन करता है, और कोई बदलाव पढ़ने लायक डिफ़ के रूप में दिखता है, न कि बदली हुई द्विआधारी फ़ाइल के रूप में। यह रहा एक पूरा और मान्य .mmd:
flowchart LR
commit[main में पुश] --> build[परीक्षण चलाएँ]
build -->|सफल| deploy[प्रोडक्शन में तैनात करें]
build -->|विफल| alert[लेखक को बताएँ]
deploy --> smoke[त्वरित जाँच]
smoke --> done[रिलीज़ पूरी हुई].mmd फ़ाइल किससे खुलती है
संक्षेप में: दोहरे क्लिक से .mmd फ़ाइल लगभग कुछ भी नहीं खोलता, क्योंकि यह विस्तार किसी अनुप्रयोग से बँधा ही नहीं है। असल में आपको ऐसा कुछ चाहिए जो Mermaid बना सके। नीचे वह है जो मैंने जाँचा और वे जगहें जहाँ यह नहीं चलता।
यही साइटखोलता है
फ़ाइल तुरंत बना देती है
फ़ाइल को ऊपर वाले चौखटे पर छोड़िए और आरेख मिल जाएगा। कोई अपलोड चरण नहीं है: फ़ाइल ब्राउज़र में File API से पढ़ी जाती है और वहीं बनती है, जो उन आरेखों के लिए भी काम करता है जिन्हें आप बाहर नहीं भेज सकते।
अगर आप आरेख देखना ही नहीं बल्कि बदलना चाहते हैं, तो पूर्वावलोकन के नीचे वाले लिंक से उसे एडिटर में खोलिए।
कोई भी पाठ संपादकखोलता है
स्रोत दिखाता है, आरेख नहीं
Notepad, Notepad++, vim — कोई भी। .mmd फ़ाइल UTF-8 पाठ है, इसलिए स्रोत तुरंत दिख जाता है। आरेख नहीं दिखेगा, और इसमें कुछ ख़राब नहीं है — फ़ाइल के भीतर दिखाने लायक कोई चित्र है ही नहीं।
किसी की भेजी फ़ाइल सचमुच Mermaid है या नहीं, यह जाँचने का सबसे तेज़ तरीका यही है: उसे खोलिए और देखिए कि पहली ग़ैर-ख़ाली पंक्ति flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram या gantt जैसा कोई आरेख-कुंजी-शब्द है या नहीं।
GitHubनहीं खोलता
Markdown के ```mermaid खंड बनाता है, .mmd फ़ाइलें नहीं
GitHub, Mermaid को बाड़ लगे कोड-खंडों के भीतर बनाता है। दस्तावेज़ ठीक-ठीक बताते हैं कि कहाँ: issue, Discussions, pull request, wiki और Markdown फ़ाइलें। अकेली .mmd फ़ाइल उस सूची में नहीं है, और भंडार के फ़ाइल-ब्राउज़र में खोलने पर स्रोत पाठ ही दिखता है।
इसलिए अगर आप चाहते हैं कि आरेख GitHub पर दिखे, तो उसे किसी .md फ़ाइल के भीतर ```mermaid खंड में होना चाहिए, अपनी अलग .mmd में नहीं। .mmd को स्रोत रखकर वही सामग्री README में दोहराना आम और उचित दोहराव है।
GitLabनहीं खोलता
```mermaid खंड बनाता है, .mmd फ़ाइलें नहीं, और वह भी पुराने Mermaid पर
वही ढर्रा जो GitHub पर है: Mermaid, Markdown के बाड़ लगे खंडों में, issue, merge request और wiki में बनता है, पर कहीं यह नहीं लिखा कि अकेली .mmd फ़ाइल बनती है।
एक दूसरी बात भी जानने लायक है, क्योंकि उससे असली उलझन होती है। GitLab.com बताता है कि वह Mermaid का दसवाँ संस्करण समर्थित करता है। यह साइट 11.12.2 पर चलती है। दसवें के बाद जोड़ा गया सिंटैक्स यहाँ बनता है और वहाँ गिरता है — और «ब्राउज़र में चलता है पर हमारे GitLab पर नहीं» की व्याख्या आम तौर पर यही होती है। ख़ुद होस्ट किए GitLab में एक तीसरा जाल भी है: जब Cross-Origin-Resource-Policy शीर्षक same-site या same-origin पर सेट हो, तो Mermaid आरेख चुपचाप गिर जाते हैं — न त्रुटि, न आरेख।
.mmd, .mermaid और .md
.mmd और .mermaid एक ही चीज़ हैं। दोनों में सिर्फ़ Mermaid का स्रोत होता है, और मेरे जाने हुए सभी औज़ार जो एक को लेते हैं दूसरे को भी लेते हैं। .mmd छोटा और ज़्यादा प्रचलित है; आधिकारिक कमांड-लाइन औज़ार डिफ़ॉल्ट रूप से उसी को लेता है। एक चुनिए और परियोजना भर में उसी पर टिके रहिए — इस चुनाव का कोई तकनीकी नतीजा नहीं है।
.md जाति से ही अलग है। Markdown फ़ाइल एक दस्तावेज़ है जिसमें Mermaid आरेख हो सकता है, तीन उल्टे उद्धरण चिह्नों और mermaid शब्द से शुरू होने वाले खंड में लिपटा हुआ। आरेख किसी बड़े पाठ के भीतर एक टुकड़ा होता है।
फ़ाइल के न बनने का सबसे आम कारण यही अंतर है, और यह दोनों दिशाओं में काम करता है। .md फ़ाइल की सामग्री Mermaid व्यूअर में चिपकाइए तो वह गिर जाएगी, क्योंकि बाड़ वाली पंक्ति Mermaid सिंटैक्स नहीं है। नंगा Mermaid आरेख बिना बाड़ के .md फ़ाइल में सहेजिए तो GitHub उसे पाठ का पैराग्राफ़ बनाकर दिखाएगा। नियम सरल है: .mmd फ़ाइल किसी आरेख-कुंजी-शब्द से शुरू होनी चाहिए, और .md फ़ाइल में आरेख बाड़ लगे खंड के भीतर होना चाहिए।
यह व्यूअर .mmd, .mermaid, .md और .txt लेता है, पर जो कुछ पढ़ता है उसे कच्चा Mermaid मानता है। अगर आप ऐसा Markdown छोड़ रहे हैं जिसमें आरेख के इर्द-गिर्द लिखाई है, तो पहले आरेख के अलावा सब हटा दीजिए।
नहीं बन रहा — असल में ग़लत क्या है
Mermaid की त्रुटियाँ सटीक हैं पर दोस्ताना नहीं। एक काम की तरकीब यह है कि सिर्फ़ संदेश का अंत पढ़ें: `got` के बाद Mermaid उस टोकन का नाम लेता है जिस पर वह अटका, और वह टोकन पंक्ति-संख्या से कहीं बेहतर बताता है कि दिक़्क़त कहाँ है। नीचे का हर मामला मैंने mermaid 11.12.2 पर दोबारा बनाया: ग़लत रूप सचमुच गिरता है, सुधरा हुआ सचमुच बनता है।
आपको क्या दिखता है
No diagram type detected matching given configuration for text: ```mermaid
क्यों
आपने आरेख किसी Markdown फ़ाइल या चैट से कॉपी किया और बाड़ भी साथ ले आए। तीन उल्टे उद्धरण चिह्न Markdown हैं, Mermaid नहीं, इसलिए पार्सर आरेख तक कभी पहुँचता ही नहीं।
समाधान
खोलने वाली ```mermaid पंक्ति और बंद करने वाली ``` पंक्ति हटा दीजिए। फ़ाइल किसी आरेख-कुंजी-शब्द से शुरू होनी चाहिए।
```mermaid
flowchart TD
A[शुरू] --> B[अंत]
```flowchart TD
A[शुरू] --> B[अंत]आपको क्या दिखता है
Lexical error on line N. Unrecognized text.
क्यों
नोड की पहचान देवनागरी में लिखी है, और हिंदी में यही सबसे बड़ी बाधा है। मापा गया: `आदेश --> भुगतान` इसी त्रुटि से गिरता है, जबकि वही शब्द लेबल में बिलकुल ठीक चलते हैं। यह सीमा सिर्फ़ फ़्लोचार्ट की नोड-पहचान और क्लास के नाम पर लागू है; स्टेट आरेख की पहचान, ER की इकाइयाँ और गैंट के कार्य-नाम देवनागरी में ठीक चलते हैं।
समाधान
पहचानें अंग्रेज़ी अक्षरों में रखिए और देवनागरी लेबल में। पहचान पाठक को दिखती ही नहीं, इसलिए इसमें कुछ खोता नहीं।
flowchart TD
आदेश --> भुगतानflowchart TD
order[ऑर्डर] --> payment[भुगतान]आपको क्या दिखता है
क्लास का नाम देवनागरी में देने पर Lexical error
क्यों
क्लास का नाम भी एक पहचान है, इसलिए `class ऑर्डर` उसी तरह गिरता है जैसे फ़्लोचार्ट की देवनागरी नोड-पहचान। पर यहाँ एक साफ़ रास्ता मौजूद है, जो जाँचा हुआ है।
समाधान
कोष्ठक वाला नाम इस्तेमाल कीजिए: `class Order["ऑर्डर"]`। भीतर की पहचान `Order` रहती है और स्क्रीन पर `ऑर्डर` दिखता है। स्टेट आरेख में इसका समकक्ष `state "लेबल" as पहचान` है।
classDiagram
class ऑर्डर {
+String संख्या
}classDiagram
class Order["ऑर्डर"] {
+String संख्या
}आपको क्या दिखता है
Parse error जो `got 'PS'` पर ख़त्म होती है
त्रुटि इस पर ख़त्म होती है: got 'PS'
क्यों
नोड के लेबल के भीतर एक खुला गोल कोष्ठक है। Mermaid में गोल कोष्ठक आकार-सिंटैक्स हैं — A(पाठ) का अर्थ गोल नोड है — इसलिए चौकोर कोष्ठक के भीतर नंगा गोल कोष्ठक किसी आकार की शुरुआत समझा जाता है।
समाधान
लेबल को उद्धरण चिह्नों में रखिए। उनके भीतर सब कुछ पाठ माना जाता है, कोष्ठक भी।
flowchart TD
a[शुल्क लें(ऑर्डर)] --> b[पूरा हुआ]flowchart TD
a["शुल्क लें(ऑर्डर)"] --> b[पूरा हुआ]आपको क्या दिखता है
जिस पंक्ति में नोड को नाम दिया उसी में Parse error
क्यों
नोड की पहचान में स्थान (स्पेस) है। पहचान तीर से पहले वाला टोकन है, और स्थान उसे काट देता है। हिंदी में चूँकि पहचानें वैसे भी अंग्रेज़ी अक्षरों में लिखनी पड़ती हैं, यह ग़लती अक्सर तब होती है जब कोई अंग्रेज़ी में भी दो शब्द लिख देता है।
समाधान
नोड को एक शब्द की पहचान दीजिए और पढ़ने लायक पाठ लेबल में रखिए।
flowchart TD
auth service --> user databaseflowchart TD
auth[प्रमाणीकरण सेवा] --> db[उपयोगकर्ता डेटाबेस]आपको क्या दिखता है
Parse error जो `got 'end'` पर ख़त्म होती है
त्रुटि इस पर ख़त्म होती है: got 'end'
क्यों
आपने end को नोड की पहचान बनाया। छोटे अक्षरों वाला end सबग्राफ़ बंद करता है, इसलिए पार्सर वहाँ ब्लॉक का अंत देखता है जहाँ उसे नोड चाहिए था। चूँकि हिंदी में पहचानें अंग्रेज़ी में लिखी जाती हैं, आख़िरी नोड का नाम end रख देना बहुत स्वाभाविक लगता है।
समाधान
बड़े अक्षर से लिखिए या नोड को कोई दूसरी पहचान दीजिए। `done` से कोई दिक़्क़त नहीं होती।
flowchart TD
a[शुरू] --> endflowchart TD
a[शुरू] --> done[पूरा हुआ]आपको क्या दिखता है
बन जाता है, पर स्टेट आरेख में एक अवस्था कई डिब्बों में बँट गई है
क्यों
स्टेट-पहचान में स्थान है। फ़्लोचार्ट के विपरीत स्टेट आरेख एतराज़ नहीं करता: वह हर शब्द के लिए अलग डिब्बा बना देता है और बिना पलक झपकाए बना देता है। हिंदी में लगभग कोई अवस्था-नाम एक शब्द में नहीं समाता, इसलिए यह लगातार होता है और कोई संकेत नहीं मिलता।
समाधान
अवस्था को `state "लेबल" as पहचान` से घोषित कीजिए और सिर्फ़ पहचान से उसका ज़िक्र कीजिए।
stateDiagram-v2
[*] --> भुगतान की प्रतीक्षा
भुगतान की प्रतीक्षा --> बंदstateDiagram-v2
state "भुगतान की प्रतीक्षा" as awaitingPayment
[*] --> awaitingPayment
awaitingPayment --> बंदआपको क्या दिखता है
बन जाता है, पर ER आरेख में ऐसी इकाइयाँ हैं जो आपने लिखी नहीं
क्यों
संबंध के लेबल में स्थान है और उद्धरण चिह्न नहीं। हिंदी में यही सबसे ज़्यादा अड़चन डालता है, क्योंकि हमारे संबंध-वाक्यांश कई शब्दों के होते हैं: «आदेश देता है», «का हिस्सा है»। Mermaid कोई त्रुटि नहीं बताता: वह लेबल को पहले स्थान पर काट देता है और बचा हर शब्द एक ख़ाली इकाई बना देता है।
समाधान
जिस भी संबंध-लेबल में स्थान हो उसे उद्धरण चिह्नों में रखिए। हिंदी में व्यावहारिक रूप से हर लेबल में।
erDiagram
ग्राहक ||--o{ ऑर्डर : आदेश देता हैerDiagram
ग्राहक ||--o{ ऑर्डर : "आदेश देता है"आपको क्या दिखता है
No diagram type detected matching given configuration for text: sequencediagram
क्यों
आरेख का कुंजी-शब्द ग़लत लिखा है या बड़े-छोटे अक्षर ग़लत हैं। Mermaid के कुंजी-शब्द बड़े-छोटे अक्षरों के प्रति संवेदनशील हैं: sequenceDiagram चलता है, sequencediagram नहीं। यही stateDiagram-v2 और erDiagram पर लागू है।
समाधान
बड़े-छोटे अक्षर ठीक कीजिए। ध्यान रहे graph अब भी flowchart के पुराने नाम के रूप में स्वीकार होता है, इसलिए वह पुराना सिंटैक्स आपकी समस्या नहीं है।
sequencediagram
क्लाइंट->>एपीआई: नमस्तेsequenceDiagram
क्लाइंट->>एपीआई: नमस्तेआपको क्या दिखता है
खड़ी रेखाओं के बीच किनारे के लेबल में Parse error
क्यों
किनारे के लेबल में कोष्ठक हैं। `|...|` वाला लेबल उसी बंधन में है जिसमें नोड का लेबल: वहाँ भी कोष्ठक सिंटैक्स हैं, पाठ नहीं।
समाधान
किनारे के लेबल को उद्धरण चिह्नों में रखिए।
flowchart TD
a -->|हाँ (हमेशा)| bflowchart TD
a -->|"हाँ (हमेशा)"| bआपको क्या दिखता है
Parse error जो आरेख की आख़िरी पंक्ति बताती है
क्यों
कोई खंड खुला और कभी बंद नहीं हुआ: alt, opt, loop, par और subgraph — हर एक अपना end माँगता है। Mermaid त्रुटि वहाँ बताता है जहाँ उसका इनपुट ख़त्म होता है, इसलिए पंक्ति-संख्या फ़ाइल का अंत बताती है, खुला खंड नहीं।
समाधान
खुले खंड और लिखे हुए end गिन लीजिए। अगर त्रुटि आख़िरी पंक्ति बताती है तो लगभग हमेशा यही वजह है।
sequenceDiagram
क्लाइंट->>एपीआई: अनुरोध
alt सब ठीक
एपीआई-->>क्लाइंट: ठीकsequenceDiagram
क्लाइंट->>एपीआई: अनुरोध
alt सब ठीक
एपीआई-->>क्लाइंट: ठीक
endआपको क्या दिखता है
Lexical error on line 1. Unrecognized text.
क्यों
आरेख-कुंजी-शब्द के बाद दिशा मान्य नहीं है। फ़्लोचार्ट सिर्फ़ TB, TD, BT, LR और RL लेता है, और कुछ नहीं; टाइपो एक भी नोड पढ़े जाने से पहले शाब्दिक विश्लेषण में गिर जाता है।
समाधान
पाँच मान्य दिशाओं में से कोई एक लीजिए। TD और LR लगभग सब कुछ संभाल लेते हैं।
flowchart XY
A --> Bflowchart TD
A --> Bआपको क्या दिखता है
यहाँ बनता है, GitLab, Confluence या किसी पुराने औज़ार में नहीं
क्यों
संस्करण का फ़र्क़। यह व्यूअर Mermaid 11.12.2 पर चलता है; GitLab.com दसवाँ संस्करण दर्ज करता है, और ख़ुद होस्ट की गई wiki बरसों पीछे हो सकती हैं। दूसरे औज़ार के संस्करण के बाद आया सिंटैक्स यहाँ पार्स होता है और वहाँ गिरता है।
समाधान
दूसरे इंजन से उसका संस्करण पूछिए। आरेख में अकेला शब्द info लिखने से Mermaid अपना संस्करण-अंक बना देता है, जो बदलाव-सूची पढ़ने से तेज़ है।
infoवर्ण-कूटन के बारे में एक बात कहनी ज़रूरी है, क्योंकि भारत में इसका एक ख़ास रूप अब भी चलता है। यह साइट और एडिटर फ़ाइल को UTF-8 मानकर पढ़ते हैं और BOM चिह्न हो तो हटा देते हैं, इसलिए Windows Notepad से «UTF-8 with BOM» के रूप में सहेजी फ़ाइल बिना दिक़्क़त खुलती है। पर कृतिदेव, चाणक्य या डेवलिस जैसे फ़ॉन्ट-आधारित पुराने कूटनों में लिखा पाठ Unicode है ही नहीं: उसमें बाइट असल में लातिन अक्षरों के होते हैं जो सिर्फ़ उस ख़ास फ़ॉन्ट के साथ देवनागरी जैसे दिखते हैं। ऐसा पाठ यहाँ चिपकाने पर देवनागरी नहीं बल्कि बेमतलब लातिन अक्षर दिखते हैं। इसका हल फ़ाइल दोबारा सहेजना नहीं बल्कि किसी कृतिदेव-से-यूनिकोड परिवर्तक से उसे बदलना है।
और एक बात जो कोई त्रुटि नहीं देती: ख़ुद होस्ट किए GitLab में Cross-Origin-Resource-Policy शीर्षक same-site या same-origin पर सेट हो तो Mermaid आरेख चुपचाप गिर जाते हैं। न संदेश, न आरेख, पन्ने पर कुछ भी नहीं। अगर कोई आरेख एक ख़ास इंस्टॉलेशन को छोड़कर हर जगह बनता है, तो देखने की जगह ठीक वही है।
PNG, SVG या PDF में बदलना
फ़ाइल को एडिटर में खोलिए और निर्यात के बटन इस्तेमाल कीजिए। SVG आरेख को सदिश पाठ के रूप में रखता है, इसलिए वह हर आकार में तीखा रहता है और लेबल चुने तथा खोजे जा सकते हैं — दस्तावेज़ों के लिए और हर उस चीज़ के लिए यही सही चुनाव है जिसे बाद में फिर निर्यात करना पड़ सकता है। PNG एक बिटमैप है, जिसे यहाँ प्रदर्शन-आकार से दो से तीन गुना बड़ा निर्यात किया जाता है ताकि वह सघन स्क्रीन पर टिक सके; उसे वहाँ लीजिए जहाँ SVG स्वीकार नहीं होता, जो व्यवहार में ज़्यादातर संदेश-ऐप और कुछ wiki हैं।
PDF का बटन नहीं है, और मैं इसे छिपाने के बजाय लिख देना बेहतर समझता हूँ। व्यावहारिक रास्ता यह है कि SVG निर्यात कीजिए और या तो उसे उसी दस्तावेज़ में लगाइए जो आप वैसे भी लिख रहे हैं, या इस पन्ने को ब्राउज़र से PDF में छापिए। PDF में लगा सदिश SVG सदिश ही रहता है।
और हर दोहराए जाने वाले काम के लिए — कोई बिल्ड चरण, फ़ाइलों का जत्था, कोई pre-commit hook — आधिकारिक कमांड-लाइन इंजन @mermaid-js/mermaid-cli मौजूद है: वह वही .mmd फ़ाइल लेता है और चित्र सीधे लिख देता है, बिना ब्राउज़र के।
अक्सर पूछे जाने वाले सवाल
.mmd फ़ाइल ऑनलाइन कैसे खोलें?
.mmd फ़ाइल कौन-सा प्रोग्राम खोलता है?
क्या .mmd और .mermaid एक ही हैं?
मेरी .mmd फ़ाइल GitHub पर क्यों नहीं बनती?
क्या मैं बिना कुछ इंस्टॉल किए .mmd खोल सकता हूँ?
देवनागरी में नाम देने पर Lexical error क्यों आती है?
देवनागरी अक्षरों की जगह अटपटे लातिन अक्षर दिख रहे हैं
यहाँ चलता है, हमारी wiki पर नहीं। क्यों?
वे आरेख-प्रकार जो आप यहाँ खोल सकते हैं
लिखा: Dominik Malsch · अंतिम अद्यतन: