फ्लोचार्ट
ग्राफ़िकल अभिव्यक्ति
माइंड मैप
संरचित अभिव्यक्ति
नोट्स
कुशल अभिव्यक्ति
ट्री-मैप
ब्रैकेट आरेख
डिफ़ॉल्ट मोड
Mermaid एक ऐसा टूल है जो टेक्स्ट सिंटैक्स से डायग्राम बनाता है। सरल Mermaid कोड लिखकर आप फ़्लोचार्ट, सीक्वेंस डायग्राम, क्लास डायग्राम, स्टेट डायग्राम, ER डायग्राम, गैंट चार्ट, माइंड मैप और आर्किटेक्चर डायग्राम जैसे कई प्रकार के डायग्राम बना सकते हैं।
पारंपरिक ड्रैग-एंड-ड्रॉप ड्रॉइंग टूल्स के विपरीत, Mermaid मुख्य रूप से कोड के ज़रिए डायग्राम के नोड, संबंध, समय-क्रम और डेटा संरचना का वर्णन करता है। कोड बदलने पर डायग्राम अपने आप फिर से बन जाता है, इसलिए यह तकनीकी दस्तावेज़, प्रोडक्ट डिज़ाइन, प्रोजेक्ट मैनेजमेंट, सॉफ़्टवेयर डेवलपमेंट और नॉलेज ऑर्गनाइज़िंग जैसे परिदृश्यों के लिए ख़ास तौर पर उपयुक्त है।
यह लेख Mermaid के बुनियादी सिंटैक्स का परिचय देता है और उन डायग्राम प्रकारों को सूचीबद्ध करता है जिन्हें Mermaid एडिटर रेंडर कर सकता है, साथ ही डिक्लरेशन सिंटैक्स, कोड उदाहरण और उपयोग परिदृश्य भी। अगर आप Mermaid कोड सीधे ऑनलाइन लिखना और प्रीव्यू करना चाहते हैं, तो आप मुफ़्त में आज़मा सकते हैं ProcessOn का Mermaid ऑनलाइन एडिटर।
Mermaid एक ऐसा टूल है जो टेक्स्ट सिंटैक्स से डायग्राम बनाता है। नीचे दिया गया कोड एक सरल Mermaid फ़्लोचार्ट बनाता है:
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
रेंडर का नतीजा इस प्रकार है:
इसमें: flowchart TD का इस्तेमाल ऊपर से नीचे व्यवस्थित फ़्लोचार्ट घोषित करके बनाने के लिए किया जाता है।
Mermaid का कार्य तर्क इस प्रकार संक्षेपित किया जा सकता है:
Mermaid कोड लिखें → कोड पार्स करें → रेंडर करें डायग्राम → कोड में बदलाव करें → डायग्राम रीयल-टाइम में अपडेट
इसलिए Mermaid सीखने की मुख्य बातों में से एक यह है कि अलग-अलग डायग्रामों के लिए उनके घोषणा सिंटैक्स को समझा जाए।
अलग-अलग डायग्राम प्रकार अलग Mermaid डिक्लरेशन सिंटैक्स का उपयोग करते हैं, फ़िलहाल आम Mermaid डायग्राम इस प्रकार हैं:
| डायग्राम प्रकार | Mermaid घोषणा सिंटैक्स | सामान्य उपयोग |
| फ़्लोचार्ट | flowchart | बिज़नेस प्रक्रिया, एल्गोरिदम, वर्कफ़्लो |
| सीक्वेंस डायग्राम | sequenceDiagram | सिस्टम इंटरैक्शन, API कॉल |
| क्लास डायग्राम | classDiagram | सॉफ़्टवेयर संरचना, ऑब्जेक्ट-ओरिएंटेड मॉडलिंग |
| स्टेट डायग्राम | stateDiagram-v2 | स्टेट ट्रांज़िशन, स्टेट मशीन |
| ER डायग्राम | erDiagram | डेटाबेस एंटिटी रिलेशनशिप |
| गैंट चार्ट | gantt | प्रोजेक्ट प्लान, टास्क प्रगति |
| यूज़र जर्नी डायग्राम | journey | यूज़र एक्सपीरियंस, कस्टमर जर्नी |
| माइंड मैप | mindmap | नॉलेज ऑर्गनाइज़िंग, ब्रेनस्टॉर्मिंग |
| टाइमलाइन | timeline | टाइमलाइन, ऐतिहासिक घटनाएँ |
| पाई चार्ट | pie | अनुपात, संरचना विश्लेषण |
| क्वाड्रंट चार्ट | quadrantChart | वर्गीकरण, प्राथमिकता, पोज़िशनिंग विश्लेषण |
| Git डायग्राम | gitGraph | Git ब्रांच, कमिट, मर्ज |
| सैंकी डायग्राम | sankey-beta | डेटा, संसाधन, ट्रैफ़िक प्रवाह |
| XY डायग्राम | xychart-beta | डेटा ट्रेंड, संख्यात्मक तुलना |
| रडार चार्ट | radar | मल्टी-डाइमेंशनल मेट्रिक तुलना |
| C4 डायग्राम | C4Context आदि | सॉफ़्टवेयर आर्किटेक्चर मॉडलिंग |
| आर्किटेक्चर डायग्राम | architecture-beta | सिस्टम, सर्विस और रिसोर्स आर्किटेक्चर |
| कानबन डायग्राम | kanban | टास्क, कार्य स्थिति प्रबंधन |
| ब्लॉक डायग्राम | block-beta | मॉड्यूल, संरचना और सिस्टम संबंध |
| पैकेट डायग्राम | packet-beta | नेटवर्क पैकेट संरचना |
| रिक्वायरमेंट डायग्राम | requirementDiagram | रिक्वायरमेंट विश्लेषण और रिक्वायरमेंट संबंध |
Mermaid एडिटर के अलग-अलग वर्शन में डायग्राम सिंटैक्स और फ़ीचर सपोर्ट अलग हो सकता है, इसलिए असल उपयोग में एडिटर द्वारा सपोर्ट किए गए सिंटैक्स को ही मान्य मानें।
बुनियादी सिंटैक्स
Mermaid में flowchart घोषणा से फ़्लोचार्ट बनाया जाता है। सबसे सरल तरीक़ा:
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
रेंडर का नतीजा
इसमें:
Mermaid फ़्लोचार्ट में LR (बाएँ से दाएँ), RL (दाएँ से बाएँ), BT (नीचे से ऊपर) जैसी दिशा सेटिंग्स भी उपयोग की जा सकती हैं। उदाहरण के लिए:
flowchart LR
A[Start] --> B[Arrange] --> C[End]
यह फ़्लोचार्ट को बाएँ से दाएँ व्यवस्थित दर्शाता है।
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| (text) | गोल कोने वाला आयत | प्रक्रिया की शुरुआत, अंत या सामान्य कार्य दर्शाता है |
| [text] | आयत | विशिष्ट चरण, टास्क या प्रोसेसिंग दर्शाता है |
| {text} | डायमंड | निर्णय या शर्त शाखा दर्शाता है |
| ((text)) | वृत्त | कनेक्शन पॉइंट या इवेंट दर्शाता है |
| [[text]] | दोहरा आयत | सब-फ़्लोचार्ट या सब-मॉड्यूल कॉल दर्शाता है |
| [(text)] | सिलेंडर | डेटाबेस नोड दर्शाता है |
| >text] | असममित आकार | इनपुट/आउटपुट दर्शाता है |
| [/text/] | समांतर चतुर्भुज | इनपुट या आउटपुट डेटा दर्शाता है |
| --> | एरो | प्रक्रिया की दिशा दर्शाता है |
| --- | बिना एरो वाला कनेक्शन | एसोसिएशन संबंध दर्शाता है |
| -.-> | बिंदुदार एरो | वैकल्पिक प्रक्रिया या संदर्भ संबंध दर्शाता है |
| ==> | मोटा एरो | मुख्य प्रक्रिया या मज़बूत संबंध दर्शाता है |
Mermaid में फ़्लोचार्ट बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/flowchart
फ़्लोचार्ट बिज़नेस प्रक्रिया, वर्कफ़्लो, एल्गोरिदम फ़्लो, सिस्टम फ़्लो और निर्णय प्रक्रिया जैसे परिदृश्यों के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का फ़्लोचार्ट ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में sequenceDiagram घोषणा से सीक्वेंस डायग्राम बनाया जाता है। सबसे सरल उदाहरण:
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
रेंडरिंग परिणाम
इसमें:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| sequenceDiagram | सीक्वेंस डायग्राम | एक सीक्वेंस डायग्राम बनाएँ |
| A->B: message | ठोस रेखा | सिंक्रोनस मैसेज कॉल या सामान्य इंटरैक्शन दर्शाता है |
| A-->B: message | बिंदुदार रेखा | रिटर्न मैसेज या कमज़ोर एसोसिएशन वाला इंटरैक्शन दर्शाता है |
| A->>B: message | ठोस एरो | एसिंक्रोनस मैसेज कॉल दर्शाता है |
| A-->>B: message | बिंदुदार एरो | एसिंक्रोनस रिस्पॉन्स या रिटर्न मैसेज दर्शाता है |
| participant A | पार्टिसिपेंट | इंटरैक्शन में शामिल ऑब्जेक्ट, एक्टर या सिस्टम परिभाषित करता है |
| actor A | एक्टर | उपयोगकर्ता, बाहरी सिस्टम जैसे सक्रिय पार्टिसिपेंट दर्शाता है |
| activate A | एक्टिवेशन बॉक्स | ऑब्जेक्ट द्वारा रिक्वेस्ट प्रोसेस करना शुरू करने को दर्शाता है |
| deactivate A | एक्टिवेशन समाप्त | ऑब्जेक्ट द्वारा मौजूदा प्रोसेसिंग पूरी करने को दर्शाता है |
| loop text | लूप बॉक्स | बार-बार चलने वाली इंटरैक्शन प्रक्रिया दर्शाता है |
| alt text | शर्त शाखा | अलग-अलग शर्तों के तहत इंटरैक्शन पथ दर्शाता है |
| opt text | वैकल्पिक प्रक्रिया | संभावित रूप से चलने वाला इंटरैक्शन दर्शाता है |
| par text | समानांतर बॉक्स | कई ऑपरेशन का एक साथ चलना दर्शाता है |
Mermaid में सीक्वेंस डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/sequence-diagram
सीक्वेंस डायग्राम उपयोगकर्ता और सिस्टम, सिस्टम और सिस्टम, तथा सर्विस और सर्विस के बीच समय-क्रम में होने वाले इंटरैक्शन का वर्णन करने के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का सीक्वेंस डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में classDiagram घोषणा से क्लास डायग्राम बनाया जाता है।
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
रेंडरिंग परिणाम
इसमें:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| classDiagram | क्लास डायग्राम | एक क्लास डायग्राम बनाएँ |
| class ClassName | क्लास | एक क्लास ऑब्जेक्ट परिभाषित करता है |
| ClassName : attribute | एट्रिब्यूट | क्लास के मेंबर वेरिएबल दर्शाता है |
| ClassName : method() | मेथड | क्लास मेथड परिभाषित करता है |
| <|-- | खोखला त्रिभुज+ ठोस रेखा | इनहेरिटेंस संबंध दर्शाता है |
| <|.. | खोखला त्रिभुज+ बिंदुदार रेखा | रियलाइज़ेशन संबंध दर्शाता है |
| *-- | भरा हुआ डायमंड+ ठोस रेखा | कंपोज़िशन संबंध दर्शाता है |
| o-- | खोखला डायमंड+ ठोस रेखा | एग्रीगेशन संबंध दर्शाता है |
| --> | ठोस एरो | एसोसिएशन संबंध दर्शाता है |
| ..> | बिंदुदार एरो | डिपेंडेंसी संबंध दर्शाता है |
| -- | ठोस रेखा | सामान्य कनेक्शन संबंध दर्शाता है |
| +attribute | प्लस चिह्न | पब्लिक एट्रिब्यूट या मेथड दर्शाता है |
| -attribute | माइनस चिह्न | प्राइवेट एट्रिब्यूट या मेथड दर्शाता है |
क्लास मेंबर के आगे लगे +, -, # जैसे चिह्न अलग-अलग विज़िबिलिटी दर्शाते हैं।
Mermaid में क्लास डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/class-diagram
क्लास डायग्राम सॉफ़्टवेयर डिज़ाइन, ऑब्जेक्ट-ओरिएंटेड मॉडलिंग, प्रोग्राम संरचना विश्लेषण जैसे परिदृश्यों के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का क्लास डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में stateDiagram-v2 घोषणा से स्टेट डायग्राम बनाया जाता है।
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
रेंडरिंग परिणाम
इसमें:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| stateDiagram-v2 | स्टेट डायग्राम | एक स्टेट डायग्राम बनाएँ |
| state StateName | गोल कोने वाला आयत | बुनियादी स्टेट नोड परिभाषित करता है |
| state StateName : text | टेक्स्ट वाला गोल कोने आयत | स्टेट के साथ विवरण टेक्स्ट जोड़ता है |
| [*] | भरा हुआ छोटा वृत्त या दोहरी रिंग | स्टेट के शुरू या ख़त्म होने को दर्शाता है |
| [*] --> StateName | प्रारंभ एरो | पहले स्टेट में प्रवेश दर्शाता है |
| StateName --> [*] | समाप्ति एरो | स्टेट फ़्लो के समाप्त होने को दर्शाता है |
| A --> B | ठोस एरो | स्टेट ट्रांज़िशन दर्शाता है |
| A --> B: event | लेबल वाला ठोस एरो | ट्रिगर इवेंट वाला स्टेट ट्रांज़िशन |
| state StateName { ... } | नेस्टेड गोल कोने आयत | कंपोज़िट स्टेट परिभाषित करता है |
| state Node <<choice>> | डायमंड | शाखा निर्णय चयन नोड |
| state Fork <<fork>> | मोटी क्षैतिज विभाजक रेखा | समानांतर फ़्लो की शुरुआत दर्शाता है |
| state Join <<join>> | मोटी क्षैतिज विभाजक रेखा | समानांतर फ़्लो के समाप्त होकर विलय होने को दर्शाता है |
Mermaid में स्टेट डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/state-diagram
स्टेट डायग्राम ऑर्डर स्टेट, वर्कफ़्लो स्टेट, यूज़र स्टेट, सिस्टम स्टेट और स्टेट मशीन, मुफ़्त में आज़माएँ Mermaid का स्टेट डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में erDiagram घोषणा से एंटिटी रिलेशनशिप डायग्राम, यानी ER डायग्राम बनाया जाता है।
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
रेंडरिंग परिणाम
इसमें:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| erDiagram | ER डायग्राम | ER डायग्राम बनाता है |
| ENTITY { } | आयत | एक एंटिटी परिभाषित करता है |
| type field | एट्रिब्यूट मार्कर | एंटिटी एट्रिब्यूट परिभाषित करता है |
| type field PK | प्राइमरी की | एंटिटी प्राइमरी की परिभाषित करता है |
| type field FK | फ़ॉरेन की | एंटिटी फ़ॉरेन की परिभाषित करता है |
| type field UK | यूनिक की | यूनिक कंस्ट्रेंट फ़ील्ड परिभाषित करता है |
| || | एक | अनिवार्य और केवल एक |
| o| | शून्य या एक | शून्य या एक |
| |{ | एक या अधिक | कम से कम एक |
| o{ | शून्य या एक या अधिक | शून्य या अधिक |
Mermaid में ER डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/er-diagram
ER डायग्राम एंटिटी, एट्रिब्यूट और एंटिटी के आपसी संबंध दर्शा सकता है, इसका उपयोग आम तौर पर डेटाबेस डिज़ाइन में होता है, मुफ़्त में आज़माएँ Mermaid का ER डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में mindmap घोषणा से माइंड मैप बनाया जाता है।
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
रेंडरिंग परिणाम
इसमें:
| सिंटैक्स | डायग्राम | अर्थ |
| mindmap | माइंड मैप | एक माइंड मैप बनाएँ |
| root[text] | आयत | आयताकार रूट थीम |
| root(text) | गोल कोने वाला आयत | गोल कोने वाला आयताकार रूट थीम |
| root((text)) | वृत्त | वृत्ताकार रूट थीम |
| root{{text}} | षट्भुज | षट्भुज रूट थीम |
| root)text( | बबल चार्ट | बबल रूट थीम |
| [text] | आयत | आयताकार नोड |
| (text) | गोल कोने वाला आयत | गोल कोने वाला आयताकार नोड |
| ((text)) | वृत्त | वृत्ताकार नोड |
| {{text}} | षट्भुज | षट्भुज नोड |
| )text( | बबल चार्ट | बबल नोड |
Mermaid में माइंड मैप बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/mindmap
माइंड मैप मुख्य रूप से इंडेंटेशन के ज़रिए पदानुक्रम दर्शाता है, इसलिए यह नॉलेज ऑर्गनाइज़िंग, ब्रेनस्टॉर्मिंग, कोर्स नोट्स और इन्फ़ॉर्मेशन आर्किटेक्चर के लिए बहुत उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का माइंड मैप ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में gantt घोषणा से गैंट चार्ट बनाया जाता है।
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements Analysis:a1, 2026-01-01, 3d
UI Design:after a1, 2d
section Development
Front-end Development:2026-01-06, 4d
Back-end Development:2026-01-07, 4d
रेंडरिंग परिणाम
इनमें से:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| gantt | गैंट चार्ट | एक गैंट चार्ट बनाएँ |
| title text | शीर्षक | गैंट चार्ट का शीर्षक सेट करता है |
| dateFormat text | तारीख़ कॉन्फ़िगरेशन पहचानकर्ता | टाइमलाइन की तारीख़ पार्स करने का फ़ॉर्मैट परिभाषित करता है |
| section text | ग्रुप कलर ब्लॉक टाइटल बार | टास्क ग्रुप बाँटता है |
| TaskName : id, startDate, endDate | क्षैतिज टास्क बार | टास्क के संबंधित एट्रिब्यूट परिभाषित करता है |
| startDate | क्षैतिज टास्क बार | शुरुआत का समय परिभाषित करता है |
| endDate | क्षैतिज टास्क बार | समाप्ति का समय परिभाषित करता है |
| duration | क्षैतिज टास्क बार | टास्क की अवधि परिभाषित करता है |
| id | कस्टम | टास्क की आईडी परिभाषित करता है |
| after id | क्षैतिज टास्क बार | पूर्ववर्ती टास्क के बाद शुरू होने वाले टास्क को परिभाषित करता है |
| 16d, 2w | क्षैतिज टास्क बार | दिन या हफ़्ता दर्शाता है |
| milestone, date | भरा हुआ डायमंड | माइलस्टोन नोड सेट करता है |
Mermaid में गैंट चार्ट बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/gantt
Mermaid गैंट चार्ट प्रोजेक्ट प्लान, टास्क शेड्यूलिंग, डेवलपमेंट प्रगति और प्रोजेक्ट मैनेजमेंट के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का गैंट चार्ट ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में journey घोषणा से यूज़र जर्नी डायग्राम बनाया जाता है।
journey
title User purchases a product
section Browse
Search for products: 5: User
View details: 4: User
section Place order
Add to cart: 5: User
Complete payment: 3: User
रेंडरिंग परिणाम
इनमें से:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| journey | यूज़र जर्नी डायग्राम | एक यूज़र जर्नी डायग्राम बनाएँ |
| title text | शीर्षक | यूज़र जर्नी डायग्राम शीर्षक |
| section text | सेक्शन ब्लॉक | प्रक्रिया चरण ग्रुप बाँटता है |
| TaskName:num:Actor | प्रोसेस नोड + संतुष्टि स्केल अक्ष | चरण के भीतर इंटरैक्शन टास्क, संतुष्टि स्कोर और भाग लेने वाले एक्टर परिभाषित करता है |
| num (1~5) | संतुष्टि रेटिंग | 1 सबसे कम, 5 सबसे बेहतर |
| Me, Cat | एक्टर | इस टास्क में भाग लेने वाले कई एक्टर परिभाषित करता है |
Mermaid में यूज़र जर्नी डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/user-journey-diagram
यूज़र जर्नी डायग्राम ग्राहक द्वारा प्रोडक्ट से जुड़ने से लेकर लक्ष्य पूरा करने तक के अलग-अलग चरणों और अनुभवों का विश्लेषण करने के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का यूज़र जर्नी डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में timeline घोषणा से टाइमलाइन बनाई जाती है।
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
रेंडरिंग परिणाम
इसमें:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| timeline | टाइमलाइन | एक टाइमलाइन बनाएँ |
| title text | शीर्षक | टाइमलाइन का शीर्षक सेट करता है |
| section text | सेक्शन ब्लॉक | समय चरण ग्रुप बाँटता है |
| date : Event1 | घटना | समय बिंदु से जुड़ी घटना परिभाषित करता है |
| : Event2 | कई घटनाएँ | एक ही समय से जुड़ी अन्य घटनाएँ |
| स्पेस | लाइन ब्रेक | बहुत लंबे इवेंट विवरण को लाइन ब्रेक करना |
Mermaid में टाइमलाइन बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/timeline
टाइमलाइन ऐतिहासिक घटनाएँ, प्रोजेक्ट विकास, प्रोडक्ट इटरेशन और समय-क्रम की जानकारी दिखाने के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का टाइमलाइन ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में quadrantChart घोषणा से क्वाड्रंट चार्ट बनाया जाता है।
quadrantChart
title Product Positioning
x-axis Low Price--> High Price
y-axis Low Quality--> High Quality
quadrant-1 High-end
quadrant-2 Quality-focused
quadrant-3 Basic
quadrant-4 Value-for-money
Product A: [0.8, 0.7]
Product B: [0.3, 0.8]
रेंडरिंग परिणाम
इसमें:
Mermaid में क्वाड्रंट चार्ट बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/quadrant-chart
क्वाड्रंट चार्ट प्रोडक्ट पोज़िशनिंग, प्राथमिकता विश्लेषण, प्रतिस्पर्धी विश्लेषण और द्वि-आयामी वर्गीकरण के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का क्वाड्रंट चार्ट ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid कानबन डायग्राम टास्क की स्थिति के अनुसार कार्य आइटम व्यवस्थित करने के लिए इस्तेमाल होता है, जैसे टू-डू, इन प्रोग्रेस और डन। इसकी सामान्य संरचना इस प्रकार दर्शाई जा सकती है:
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
रेंडरिंग परिणाम
इसमें;
Mermaid में कानबन डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/kanban
कानबन डायग्राम प्रोजेक्ट मैनेजमेंट, टास्क ट्रैकिंग, R&D प्रक्रिया और वर्कफ़्लो मैनेजमेंट के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का कानबन डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
रिक्वायरमेंट डायग्राम का इस्तेमाल रिक्वायरमेंट, फ़ंक्शन और सिस्टम एलिमेंट के बीच के संबंध दर्शाने के लिए किया जा सकता है, Mermaid में requirementDiagram घोषणा से रिक्वायरमेंट डायग्राम बनाया जाता है।
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
रेंडरिंग परिणाम
इसमें:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| requirementDiagram | रिक्वायरमेंट डायग्राम | एक रिक्वायरमेंट डायग्राम बनाएँ |
| Requirement name { } | रिक्वायरमेंट | आधारभूत रिक्वायरमेंट परिभाषित करता है |
| functionalRequirement name { } | फ़ंक्शन | फ़ंक्शनल रिक्वायरमेंट परिभाषित करता है |
| interfaceRequirement name { } | इंटरफ़ेस | इंटरफ़ेस रिक्वायरमेंट परिभाषित करता है |
| performanceRequirement name { } | परफ़ॉर्मेंस | परफ़ॉर्मेंस रिक्वायरमेंट परिभाषित करता है |
| physicalRequirement name { } | फ़िज़िकल | फ़िज़िकल रिक्वायरमेंट परिभाषित करता है |
| element name {type: name docRef: name} | एलिमेंट | सिस्टम / कंपोनेंट / टेस्ट जैसे एंटिटी एलिमेंट परिभाषित करता है |
| X - satisfies -> Y | बिंदुदार एरो | एंटिटी संबंधित रिक्वायरमेंट पूरा करती है |
| X - contains -> Y | ठोस रेखा, शुरुआत में क्रॉस प्लस वाला गोल एंडपॉइंट | एक रिक्वायरमेंट में दूसरा रिक्वायरमेंट शामिल है |
| X - derives -> Y | बिंदुदार एरो | रिक्वायरमेंट किसी दूसरे रिक्वायरमेंट से व्युत्पन्न होता है |
| X - copies -> Y | बिंदुदार एरो | रिक्वायरमेंट दूसरे रिक्वायरमेंट की कॉपी करता है |
| X - traces -> Y | बिंदुदार एरो | रिक्वायरमेंट का दो-तरफ़ा ट्रेस संबंध |
Mermaid रिक्वायरमेंट डायग्राम बनाने का पूरा सिंटैक्स इस पेज पर देखें: https://www.processon.io/hi/mermaid/requirement-diagram
रिक्वायरमेंट डायग्राम प्रोडक्ट रिक्वायरमेंट विश्लेषण, सिस्टम इंजीनियरिंग और रिक्वायरमेंट ट्रैकिंग के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का रिक्वायरमेंट डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में pie घोषणा से पाई चार्ट बनाया जाता है।
pie showData
title Population Share by Continent
"Asia" : 59.5
"Africa" : 18.0
"Europe" : 9.0
"North America" : 7.5
"South America" : 5.5
"Oceania" : 0.5
रेंडरिंग परिणाम
इसमें:
Mermaid में पाई चार्ट बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/pie-chart
पाई चार्ट अनुपात और संरचना संबंध दर्शाने के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का पाई चार्ट ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
सैंकी डायग्राम मुख्य रूप से अलग-अलग नोड के बीच फ़्लो, संसाधन, फ़ंड या डेटा की दिशा दर्शाने के लिए इस्तेमाल होता है, Mermaid में sankey-beta घोषणा से सैंकी डायग्राम बनाया जाता है।
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
रेंडरिंग परिणाम
इसमें:
Mermaid में सैंकी डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/sankey-diagram
सैंकी डायग्राम एक विज़ुअलाइज़ेशन चार्ट है जो एक मान-समूह से दूसरे मान-समूह तक के प्रवाह को दिखाता है, मुफ़्त में आज़माएँ Mermaid का सैंकी डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में xychart-beta घोषणा से XY डायग्राम बनाया जाता है।
xychart-beta
title "Monthly Sales Data"
x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
y-axis " Sales (million)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
रेंडरिंग परिणाम
इसमें:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| xychart-beta | XY कॉर्डिनेट चार्ट | एक XY कॉर्डिनेट चार्ट बनाएँ |
| xychart-beta horizontal | क्षैतिज XY कॉर्डिनेट चार्ट | एक क्षैतिज XY कॉर्डिनेट चार्ट बनाएँ |
| title "name" | शीर्षक | XY डायग्राम का शीर्षक परिभाषित करता है |
| x-axis "axisTitle" [a,b,c] | X अक्ष | क्षैतिज अक्ष की श्रेणी और शीर्षक परिभाषित करता है |
| y-axis "axisTitle" min --> max | Y अक्ष | ऊर्ध्वाधर अक्ष की रेंज और शीर्षक परिभाषित करता है |
| y-axis "axisTitle" | केवल शीर्षक वाला Y अक्ष | केवल ऊर्ध्वाधर अक्ष का नाम सेट होता है, मान की रेंज अपने आप फ़िट हो जाती है |
| bar [num1, num2, num3] | बार चार्ट | बार चार्ट का डेटा सीरीज़ परिभाषित करता है |
| line [num1, num2, num3] | लाइन चार्ट | लाइन चार्ट का डेटा सीरीज़ परिभाषित करता है |
Mermaid में xy डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/xy-chart
XY डायग्राम डेटा में बदलाव, संख्यात्मक तुलना और सरल डेटा विज़ुअलाइज़ेशन दिखाने के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का XY चार्ट ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
रडार चार्ट कई ऑब्जेक्ट के कई डाइमेंशन पर प्रदर्शन की तुलना करने के लिए उपयुक्त है, जैसे क्षमता मूल्यांकन, प्रोडक्ट मेट्रिक और विकल्पों की तुलना। Mermaid में radar-beta घोषणा से रडार चार्ट बनाया जाता है।
radar-beta
title "Competency Assessment Radar Chart"
axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]
curve A["Chenlaoda"] {80, 90, 70, 85}
curve B["Wangxiaoer"] {60, 70, 90, 80}
रेंडरिंग परिणाम
इसमें:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| radar-beta | रडार चार्ट | एक रडार चार्ट बनाएँ |
| title "name" | शीर्षक | रडार चार्ट का शीर्षक परिभाषित करता है, जो radar-beta के ठीक बाद आता है |
| title "name" | शीर्षक | रडार चार्ट का शीर्षक परिभाषित करता है, जो radar-beta से पहले रखा जाता है और ऊपर-नीचे दोनों तरफ़ 3 डैश जोड़ने होते हैं |
| axis id ["axisTitle"] | डाइमेंशन अक्ष | रडार चार्ट के डाइमेंशन और उनके नाम परिभाषित करता है |
| curve id ["name"]{[values]} | डेटा कर्व | डेटा सीरीज़ का नाम और हर डाइमेंशन का मान परिभाषित करता है |
| max value | अधिकतम मान | रडार चार्ट की मान रेंज का अधिकतम मान सेट करता है |
| min value | न्यूनतम मान | रडार चार्ट की मान रेंज का न्यूनतम मान सेट करता है |
Mermaid में रडार चार्ट बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/radar-chart
रडार चार्ट उन डेवलपर्स, डेटा साइंटिस्ट्स और इंजीनियर्स के लिए ख़ास तौर पर उपयोगी है जिन्हें डेटा को गोल रूप में स्पष्ट और संक्षेप में दिखाना होता है, मुफ़्त में आज़माएँ Mermaid का रडार चार्ट ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में gitGraph घोषणा से Git डायग्राम बनाया जाता है।
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
रेंडरिंग परिणाम
इसमें:
Mermaid में Git डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/git-graph
Git डायग्राम Git कमिट, ब्रांच बनाना, ब्रांच बदलना और मर्ज जैसी वर्ज़न कंट्रोल प्रक्रियाएँ दर्शाने के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का Git डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid C4 डायग्राम सॉफ़्टवेयर आर्किटेक्चर मॉडलिंग के लिए इस्तेमाल होता है और अलग-अलग स्तरों पर सॉफ़्टवेयर सिस्टम, कंटेनर, कंपोनेंट और उनके आपसी संबंधों का वर्णन कर सकता है।
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
रेंडरिंग परिणाम
इसमें:
सामान्य सिंटैक्स
| सिंटैक्स | डायग्राम | अर्थ |
| C4Context | सिस्टम कॉन्टेक्स्ट डायग्राम | एक C4 सिस्टम कॉन्टेक्स्ट डायग्राम बनाएँ |
| C4Container | कंटेनर डायग्राम | एक C4 कंटेनर डायग्राम बनाएँ |
| C4Component | कंपोनेंट डायग्राम | एक C4 कंपोनेंट डायग्राम बनाएँ |
| C4Dynamic | डायनेमिक इंटरैक्शन डायग्राम | एक C4 डायनेमिक इंटरैक्शन डायग्राम बनाएँ |
| C4Deployment | डिप्लॉयमेंट डायग्राम | एक C4 डिप्लॉयमेंट डायग्राम बनाएँ |
| title | शीर्षक | C4 डायग्राम का शीर्षक सेट करता है |
| Person(alias, "label", "description") | व्यक्ति | सिस्टम इस्तेमाल करने वाले उपयोगकर्ता या एक्टर को दर्शाता है |
| Person_Ext(alias, "label", "description") | बाहरी व्यक्ति | सिस्टम के बाहर इंटरैक्शन में भाग लेने वाले व्यक्ति या संगठन की भूमिका को दर्शाता है |
| System(alias, "label", "description") | सिस्टम नोड | विश्लेषण किए जाने वाले सॉफ़्टवेयर सिस्टम को दर्शाता है |
| System_Ext(alias, "label", "description") | बाहरी सिस्टम नोड | सिस्टम द्वारा निर्भर थर्ड-पार्टी सर्विस या बाहरी सॉफ़्टवेयर सिस्टम को दर्शाता है |
| System_Boundary(alias, "label") | सिस्टम बाउंड्री | सिस्टम के दायरे की सीमा दर्शाता है |
| Container(alias, "label", "technology") | कंटेनर | सिस्टम के अंदर स्वतंत्र रूप से चलने वाली सॉफ़्टवेयर यूनिट दर्शाता है |
| Container_Boundary(alias, "label") | कंटेनर बाउंड्री | एक कंटेनर या सर्विस के दायरे को दर्शाता है |
Mermaid में C4 डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/c4-diagram
C4 डायग्राम सॉफ़्टवेयर आर्किटेक्चर डिज़ाइन, सिस्टम विश्लेषण और तकनीकी दस्तावेज़ों के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का C4 डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
Mermaid में architecture-beta घोषणा से आर्किटेक्चर डायग्राम बनाया जाता है।
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
रेंडरिंग परिणाम
इसमें:
Mermaid में आर्किटेक्चर डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/architecture-diagram
आर्किटेक्चर डायग्राम सर्वर, डेटाबेस, क्लाउड सर्विस, एप्लिकेशन सर्विस और अलग-अलग सिस्टम कंपोनेंट के बीच के संबंध दर्शाने के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का आर्किटेक्चर डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
ब्लॉक डायग्राम मुख्य रूप से मॉड्यूल और कनेक्शन संबंधों के ज़रिए सिस्टम की संरचना का वर्णन करता है, Mermaid में block-beta घोषणा से ब्लॉक डायग्राम बनाया जाता है।
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
रेंडरिंग परिणाम
इसमें:
Mermaid में ब्लॉक डायग्राम बनाने का विस्तृत सिंटैक्स देखने के लिए नीचे दिए पेज पर जाएँ: https://www.processon.io/hi/mermaid/block-diagram
ब्लॉक डायग्राम सिस्टम मॉड्यूल, फ़ंक्शनल स्ट्रक्चर, टेक्निकल आर्किटेक्चर और कंपोनेंट संबंध जैसे परिदृश्यों के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का ब्लॉक डायग्राम ऑनलाइन एडिटर।
बुनियादी सिंटैक्स
पैकेट डायग्राम मुख्य रूप से नेटवर्क पैकेट या प्रोटोकॉल डेटा संरचना में फ़ील्ड और लंबाई दर्शाने के लिए इस्तेमाल होता है, Mermaid में packet-beta घोषणा से पैकेट डायग्राम बनाया जाता है।
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
रेंडरिंग परिणाम
इसमें:
पैकेट डायग्राम नेटवर्क प्रोटोकॉल, पैकेट संरचना और तकनीकी स्पेसिफ़िकेशन दस्तावेज़ों के लिए उपयुक्त है, मुफ़्त में आज़माएँ Mermaid का पैकेट डायग्राम ऑनलाइन एडिटर।
Mermaid सिंटैक्स की जानकारी न होने का मतलब यह नहीं कि आप Mermaid इस्तेमाल नहीं कर सकते डायग्राम बना सकते हैं, इसके लिए ये कुछ तरीक़े अपना सकते हैं:
Mermaid टेम्पलेट मुफ़्त में इस्तेमाल करें
पहले अपनी ज़रूरत के क़रीब का टेम्पलेट चुनें, फिर उसमें नोड, टेक्स्ट और संबंध बदलें। यह तरीक़ा पहली बार Mermaid इस्तेमाल करने वाले उपयोगकर्ताओं के लिए उपयुक्त है।
AI से Mermaid कोड जनरेट करें
ज़रूरत का डायग्राम सीधे नैचुरल लैंग्वेज में बता सकते हैं, जैसे:
एक ई-कॉमर्स ऑर्डर प्रोसेसिंग फ़्लोचार्ट बनाएँ, जिसमें उपयोगकर्ता द्वारा ऑर्डर देना, भुगतान, इन्वेंटरी जाँच, शिपिंग और ऑर्डर पूरा होना शामिल हो।
AI विवरण के आधार पर Mermaid कोड जनरेट कर सकता है, जिसे बाद में असल ज़रूरत के हिसाब से बदला जा सकता है।
AI से कोड जाँचें और ठीक करें
अगर Mermaid कोड में सिंटैक्स एरर आ जाए, तो AI की मदद से समस्या का पता लगाकर कोड ठीक किया जा सकता है।
इमेज रिकग्निशन से कोड जनरेट करें
पहले से मौजूद फ़्लोचार्ट, आर्किटेक्चर डायग्राम या दूसरे स्ट्रक्चर्ड चार्ट के लिए इमेज रिकग्निशन की मदद से Mermaid कोड जनरेट करके आगे एडिट किया जा सकता है।
Mermaid ऑनलाइन एडिटर को आम तौर पर तीन मुख्य समस्याएँ हल करनी होती हैं: कोड लिखना, डायग्राम प्रीव्यू और नतीजा एक्सपोर्ट करना। इसके अलावा, टेम्पलेट और AI भी Mermaid इस्तेमाल करने की दहलीज़ कम कर सकते हैं।
उदाहरण के लिए ProcessOn Mermaid ऑनलाइन एडिटर लेकर, आप सीधे ब्राउज़र में यह कर सकते हैं:
इसलिए, जिन उपयोगकर्ताओं को बार-बार Mermaid डायग्राम बनाने पड़ते हैं, ProcessOn Mermaid ऑनलाइन एडिटर में Mermaid कोड लिखना, डायग्राम बनाना, दोबारा एडिट करना और बदलाव करना, एक्सपोर्ट और शेयर एक ही वर्कस्पेस में कर सकते हैं।
Mermaid फ़्लोचार्ट, सीक्वेंस डायग्राम, क्लास डायग्राम से लेकर गैंट चार्ट, माइंड मैप, क्वाड्रंट चार्ट, सैंकी डायग्राम, Git डायग्राम, C4 डायग्राम और आर्किटेक्चर डायग्राम तक, सभी को Mermaid सिंटैक्स से बनाया और एडिट किया जा सकता है।
आइए इस्तेमाल करें Mermaid ऑनलाइन एडिटर, ऑनलाइन Mermaid कोड लिखें और डायग्राम बनाएँ।
Mermaid सिंटैक्स सीखना मुश्किल है?
Mermaid का बुनियादी सिंटैक्स काफ़ी सरल है; ज़्यादातर डायग्रामों के लिए सिर्फ़ डायग्राम घोषणा, नोड, कनेक्शन और टेक्स्ट जैसे बुनियादी तरीक़े जानना काफ़ी है। उदाहरण के लिए, sequenceDiagram सीक्वेंस डायग्राम घोषित करने के लिए और flowchart फ़्लोचार्ट घोषित करने के लिए इस्तेमाल होता है। अलग-अलग प्रकार के डायग्रामों के सिंटैक्स नियम अलग होते हैं, जटिल डायग्रामों के लिए उनके पैरामीटर और कॉन्फ़िगरेशन अलग से सीखने पड़ते हैं।
Mermaid कोड ग़लत लिखने पर डायग्राम क्यों नहीं बनता?
Mermaid सिंटैक्स स्ट्रक्चर के प्रति काफ़ी संवेदनशील है। आम कारणों में डायग्राम घोषणा ग़लत लिखना, नोड या कनेक्शन का सिंटैक्स अधूरा होना, इंडेंटेशन या स्पेशल कैरेक्टर का ग़लत तरीक़े से हैंडल होना, और मौजूदा Mermaid वर्शन में न सपोर्ट किया जाने वाला सिंटैक्स इस्तेमाल करना शामिल है।
Mermaid और पारंपरिक ड्रॉइंग सॉफ़्टवेयर में क्या अंतर है?
Mermaid मुख्य रूप से टेक्स्ट कोड के ज़रिए डायग्राम का वर्णन करता है, जबकि पारंपरिक ड्रॉइंग सॉफ़्टवेयर में आम तौर पर आकृतियाँ खींचकर, कनेक्शन जोड़कर और स्टाइल बदलकर डायग्राम बनाए जाते हैं।
Mermaid डायग्राम को सेव और दोबारा इस्तेमाल किया जा सकता है?
हाँ। Mermaid डायग्राम का मुख्य हिस्सा टेक्स्ट कोड होता है, इसलिए कोड को Markdown, कोड फ़ाइल या Mermaid सपोर्ट करने वाले दूसरे दस्तावेज़ों में सेव किया जा सकता है और ज़रूरत पड़ने पर दोबारा रेंडर किया जा सकता है।
यह भी Mermaid और सिर्फ़ इमेज वाले डायग्राम के बीच एक बड़ा अंतर है: इमेज में सिर्फ़ अंतिम नतीजा सेव होता है, जबकि Mermaid कोड डायग्राम की स्ट्रक्चर जानकारी भी साथ सेव करता है।
Mermaid और Markdown में क्या संबंध है?
Mermaid का इस्तेमाल अक्सर Markdown के साथ होता है, लेकिन दोनों एक ही तरह का सिंटैक्स नहीं हैं।
Markdown मुख्य रूप से स्ट्रक्चर्ड टेक्स्ट लिखने के लिए इस्तेमाल होता है, जबकि Mermaid कोड के ज़रिए डायग्राम बनाने के लिए। Mermaid सपोर्ट करने वाले Markdown एडिटर में Mermaid कोड को Markdown दस्तावेज़ में एम्बेड किया जा सकता है, जिससे डायग्राम और टेक्स्ट विवरण एक ही दस्तावेज़ में रहते हैं।
कोशिश करने के लिए ट्यूटोरियल के बाद
ProcessOn का निःशुल्क उपयोग करें
