मूल परिभाषा
फ़्लोचार्ट नोड्स (ज्यामितीय आकृतियों) और कनेक्टिंग लाइनों (तीर या रेखाओं) से बना होता है। Mermaid कोड परिभाषित करता है कि नोड्स और कनेक्टिंग लाइनें कैसे बनाई जाती हैं, और यह कई प्रकार के तीरों, बहुदिशीय तीरों तथा सबग्राफ़ के साथ मनमाने लिंक का समर्थन करता है।
चेतावनी यदि आप फ़्लोचार्ट नोड में "end" शब्द का उपयोग करते हैं, तो पहले अक्षर या पूरे शब्द को बड़े अक्षरों में लिखें (उदाहरण: "End" या "END"); पूरी तरह छोटे अक्षरों में "end" दर्ज करने से फ़्लोचार्ट में त्रुटि होगी।
चेतावनी यदि आप फ़्लोचार्ट नोड्स जोड़ते समय पहले अक्षर के रूप में "o" या "x" का उपयोग करते हैं, तो अक्षर से पहले एक स्पेस जोड़ें या अक्षर को बड़ा करें (उदाहरण: "dev--- ops", "dev---Ops")।
एक नोड (डिफ़ॉल्ट)
कॉपी करें
एम्बेड
---
title: Node
---
flowchart LR
id
id ही वह सामग्री है जो बॉक्स में दिखाई जाती है।
फ़्लोचार्ट बनाने के सिंटैक्स में flowchart के अलावा graph का भी उपयोग किया जा सकता है।
टेक्स्ट वाला एक नोड
आप बॉक्स के लिए id से भिन्न टेक्स्ट भी सेट कर सकते हैं। यदि आप ऐसा कई बार करते हैं, तो सिस्टम उस नोड के लिए अंतिम बार निर्दिष्ट टेक्स्ट का उपयोग करेगा। इसके अलावा, यदि बाद में नोड के लिए कनेक्टिंग लाइन परिभाषित की जाती है, तो टेक्स्ट परिभाषा छोड़ी जा सकती है; बॉक्स रेंडर करते समय पहले परिभाषित टेक्स्ट का उपयोग किया जाएगा।
कॉपी करें
एम्बेड
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode टेक्स्ट
Unicode टेक्स्ट को दोहरे उद्धरण चिह्नों में लपेटें।
कॉपी करें
एम्बेड
flowchart LR
id["This ❤ Unicode"]
Markdown फ़ॉर्मेट
Markdown टेक्स्ट को दोहरे उद्धरण चिह्नों और बैकटिक का उपयोग करके लपेटें
कॉपी करें
एम्बेड
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
दिशा
फ़्लोचार्ट की दिशा घोषित करता है
दर्शाता है कि फ़्लोचार्ट ऊपर से नीचे की ओर व्यवस्थित है (TD या TB)
कॉपी करें
एम्बेड
flowchart TD
Start --> Stop
फ़्लोचार्ट की दिशाओं में शामिल हैं:
- TB - ऊपर से नीचे
- TD - ऊपर से नीचे (ऊपर से नीचे के समान)
- BT - नीचे से ऊपर
- RL - दाएँ से बाएँ
- LR - बाएँ से दाएँ
नोड आकृति
गोल कोनों वाला आयत
कॉपी करें
एम्बेड
flowchart LR
id1(This is the text in the box)
स्टेडियम आकृति
कॉपी करें
एम्बेड
flowchart LR
id1([This is the text in the box])
सबप्रोसेस
कॉपी करें
एम्बेड
flowchart LR
id1[[This is the text in the box]]
डेटाबेस
कॉपी करें
एम्बेड
flowchart LR
id1[(Database)]
वृत्त
कॉपी करें
एम्बेड
flowchart LR
id1((This is the text in the circle))
असममित आकृति
कॉपी करें
एम्बेड
flowchart LR
id1>This is the text in the box]
हीरा (डायमंड)
कॉपी करें
एम्बेड
flowchart LR
id1{This is the text in the box}
षट्भुज
कॉपी करें
एम्बेड
flowchart LR
id1{{This is the text in the box}}
समांतर चतुर्भुज
कॉपी करें
एम्बेड
flowchart TD
id1[/This is the text in the box/]
उल्टा समांतर चतुर्भुज
कॉपी करें
एम्बेड
flowchart TD
id1[\This is the text in the box\]
समलंब चतुर्भुज
कॉपी करें
एम्बेड
flowchart TD
A[/ProcessOn\]
उल्टा समलंब चतुर्भुज
कॉपी करें
एम्बेड
flowchart TD
B[\ProcessOn/]
दोहरा वृत्त
कॉपी करें
एम्बेड
flowchart TD
id1(((This is the text in the circle)))
Mermaid फ़्लोचार्ट नोड आकृति विस्तार
Mermaid ने फ़्लोचार्ट बनाने के लचीलेपन और सटीकता को बढ़ाने के लिए 30 नई आकृतियाँ पेश की हैं। ये नई आकृतियाँ प्रक्रियाओं, निर्णयों, ईवेंट, डेटा स्टोरेज और फ़्लोचार्ट के अन्य तत्वों को सहजता से दर्शाने के लिए अधिक विकल्प प्रदान करती हैं, जिससे स्पष्टता और सिमैंटिक अर्थ बढ़ता है।
आकृति परिभाषित करने का नया सिंटैक्स
Mermaid अब बढ़ती आकृतियों के अनुरूप आकृति प्रकारों को परिभाषित करने के लिए एक सामान्य सिंटैक्स का समर्थन करता है। यह सिंटैक्स आपको स्पष्ट और लचीले फ़ॉर्मेट का उपयोग करके नोड के लिए विशिष्ट आकृति निर्दिष्ट करने की अनुमति देता है।
कॉपी करें
एम्बेड
A@{ shape: rect }
यह सिंटैक्स नोड A को आयत के रूप में बनाता है। यह [A] या A की तरह रेंडर होता है।
नोड आकृतियों की पूरी सूची
निम्नलिखित नई पेश की गई नोड आकृतियों तथा उनके संगत अर्थ, संक्षिप्त नाम और उपनामों की पूरी सूची है:
| सिमैंटिक नाम | ग्राफ़ सिंटैक्स | सिंटैक्स संक्षिप्त नाम | सिंटैक्स विकल्प | विस्तृत विवरण |
|---|---|---|---|---|
| कार्ड | Notched Rectangle | notch-rect | card, notched-rectangle | एक कार्ड दर्शाता है |
| क्रमबद्ध करना | Hourglass | hourglass | collate | क्रमबद्ध करने की क्रिया दर्शाता है |
| संचार लिंक | Lightning Bolt | bolt | com-link, lightning-bolt | संचार लिंक |
| टिप्पणी | Curly Brace | brace | brace-l, comment | टिप्पणी जोड़ें |
| दाईं ओर टिप्पणी | Curly Brace | brace-r | टिप्पणी जोड़ें | |
| दोनों ओर घुंघराले कोष्ठक वाली टिप्पणी | Curly Braces | braces | टिप्पणी जोड़ें | |
| डेटा इनपुट या आउटपुट | Lean Right | lean-r | in-out, lean-right | इनपुट या आउटपुट दर्शाता है |
| डेटा इनपुट या आउटपुट | Lean Left | lean-l | lean-left, out-in | आउटपुट या इनपुट दर्शाता है |
| डेटाबेस | Cylinder | cyl | cylinder, database, db | डेटाबेस स्टोरेज |
| निर्णय | Diamond | diam | decision, diamond, question | निर्णय चरण |
| विलंब | Half-Rounded Rectangle | delay | half-rounded-rectangle | विलंब दर्शाता है |
| प्रत्यक्ष अभिगम स्टोरेज | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | प्रत्यक्ष अभिगम स्टोरेज |
| डिस्क स्टोरेज | Lined Cylinder | lin-cyl | disk, lined-cylinder | डिस्क स्टोरेज |
| डिस्प्ले | Curved Trapezoid | curv-trap | curved-trapezoid, display | दर्शाता है कि सूचना स्क्रीन, टर्मिनल आदि डिवाइस पर प्रदर्शित होती है |
| विभाजित प्रोसेस | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | विभाजित प्रोसेस आकृति |
| दस्तावेज़ | Document | doc | document | एक दस्तावेज़ दर्शाता है |
| ईवेंट | Rounded Rectangle | rounded | event | एक ईवेंट दर्शाता है |
| निष्कर्षण | Triangle | tri | extract, triangle | निष्कर्षण प्रक्रिया |
| फ़ोर्क/मर्ज | Filled Rectangle | fork | join | फ़्लोचार्ट में फ़ोर्क या मर्ज |
| आंतरिक स्टोरेज | Window Pane | win-pane | internal-storage, window-pane | आंतरिक स्टोरेज |
| कनेक्शन पॉइंट | Filled Circle | f-circ | filled-circle, junction | कनेक्शन पॉइंट |
| रेखा सहित दस्तावेज़ | Lined Document | lin-doc | lined-document | रेखा सहित दस्तावेज़ |
| रेखा/छाया प्रोसेस | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | रेखा सहित प्रोसेस आकृति |
| लूप सीमा | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | लूप सीमा चरण |
| मैनुअल फ़ाइल | Flipped Triangle | flip-tri | flipped-triangle, manual-file | मैनुअल फ़ाइल क्रिया |
| मैनुअल इनपुट | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | मैनुअल इनपुट चरण |
| मैनुअल ऑपरेशन | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | एक मैनुअल कार्य दर्शाता है |
| एकाधिक दस्तावेज़ | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| एकाधिक प्रोसेस | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| अनियमित आकृति | Odd | odd | अनियमित आकृति | |
| पेपर टेप | Flag | flag | paper-tape | पेपर टेप |
| तैयारी शर्त | Hexagon | hex | hexagon, prepare | तैयारी या शर्त चरण |
| प्राथमिकता क्रिया | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | प्राथमिकता क्रिया |
| प्रोसेस | Rectangle | rect | proc, process, rectangle | मानक प्रोसेस आकृति |
| प्रारंभ | Circle | circle | circ | प्रारंभ बिंदु |
| प्रारंभ | Small Circle | sm-circ | small-circle, start | छोटा वृत्त प्रारंभ बिंदु |
| स्टॉप | Double Circle | dbl-circ | double-circle | समापन बिंदु दर्शाता है |
| स्टॉप | Framed Circle | fr-circ | framed-circle, stop | समापन बिंदु दर्शाता है |
| डेटा संग्रहीत करें | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | डेटा संग्रहीत करें |
| सबप्रोसेस | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | सबप्रोसेस, सबरूटीन |
| सारांश | Crossed Circle | cross-circ | crossed-circle, summary | सारांश |
| टैग किया गया दस्तावेज़ | Tagged Document | tag-doc | tagged-document | टैग किया गया दस्तावेज़ |
| मानकीकृत प्रोसेस | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| अंतिम बिंदु | Stadium | stadium | pill, terminal | अंतिम बिंदु |
| टेक्स्ट ब्लॉक | Text Block | text | टेक्स्ट ब्लॉक |
निम्नलिखित नई पेश की गई आकृतियों का उपयोग करने वाले फ़्लोचार्ट कोड का उदाहरण है:
कॉपी करें
एम्बेड
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
प्रोसेस
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: rect, label: "This is a process" }
ईवेंट
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: rounded, label: "This is an event" }
चाइल्ड प्रोसेस
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
डेटाबेस (सिलेंडर)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: cyl, label: "Database" }
प्रारंभ (वृत्त)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: circle, label: "Start" }
अनियमित आकृति
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: odd, label: "Odd shape" }
निर्णय (हीरा)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: diamond, label: "Decision" }
तैयारी शर्त (षट्भुज)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
डेटा इनपुट/आउटपुट (दाईं ओर झुका)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
डेटा इनपुट/आउटपुट (बाईं ओर झुका)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
प्राथमिकता क्रिया (समलंब चतुर्भुज)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
मैनुअल ऑपरेशन (उल्टा समलंब चतुर्भुज)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
स्टॉप (दोहरा वृत्त)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
टेक्स्ट ब्लॉक
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: text, label: "This is a text block" }
कार्ड (कटे कोने वाला आयत)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: notch-rect, label: "Card" }
रेखा/छाया सहित प्रोसेस
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
प्रारंभ (छोटा वृत्त)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
स्टॉप (बॉक्स वाला वृत्त)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
फ़ोर्क/मर्ज (लंबा आयत)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
क्रमबद्ध करना (रेतघड़ी)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: hourglass, label: "Collate" }
टिप्पणी (घुंघराले कोष्ठक)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: comment, label: "Comment" }
दाईं ओर टिप्पणी (दायाँ घुंघराला कोष्ठक)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: brace-r, label: "Comment" }
टिप्पणी (दोनों ओर कोष्ठक वाली)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: braces, label: "Comment" }
संचार लिंक (बिजली)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: bolt, label: "Communication link" }
दस्तावेज़
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: doc, label: "Document" }
विलंब (आधा गोल कोने वाला आयत)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
डिस्क स्टोरेज (खाँचेदार सिलेंडर)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
डिस्प्ले (डिस्प्ले आकृति)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: curv-trap, label: "Display" }
विभाजित प्रोसेस (विभाजित आयत)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
निष्कर्षण (छोटा त्रिभुज)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: tri, label: "Extract" }
आंतरिक स्टोरेज (विंडो पैनल)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
कनेक्शन पॉइंट (ठोस वृत्त)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: f-circ, label: "Connect" }
रेखा सहित दस्तावेज़
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
लूप सीमा (कटे कोने वाला पंचभुज)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
मैनुअल फ़ाइल (पलटा त्रिभुज)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
मैनुअल इनपुट (समकोण समलंब चतुर्भुज)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
एकाधिक दस्तावेज़ (स्टैक किए दस्तावेज़)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: docs, label: "Multi-document" }
एकाधिक प्रोसेस (स्टैक किए आयत)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
पेपर टेप (झंडा)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: flag, label: "Paper tape" }
डेटा संग्रहीत करें (बो टाई आयत)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
सारांश (क्रॉस वाला वृत्त)
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
टैग किया गया दस्तावेज़
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
चिह्नित प्रोसेस
कॉपी करें
एम्बेड
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Mermaid फ़्लोचार्ट में विशेष आकृतियाँ
Mermaid ने आपके फ़्लोचार्ट को बेहतर बनाने के लिए इमेज भी पेश की हैं, जिससे आप सीधे फ़्लोचार्ट में इमेज शामिल कर सकते हैं, जो अधिक विज़ुअल संदर्भ और स्पष्टता प्रदान करती हैं।
इमेज आकृति
आप फ़्लोचार्ट में इमेज डालने के लिए image का उपयोग कर सकते हैं; इमेज परिभाषित करने का सिंटैक्स इस प्रकार है:
कॉपी करें
एम्बेड
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
पैरामीटर
- img: प्रदर्शित करने के लिए इमेज का URL पता।
- label: इमेज से जुड़ा टेक्स्ट लेबल, जो कोई भी स्ट्रिंग हो सकता है। यदि परिभाषित नहीं है, तो कोई लेबल प्रदर्शित नहीं होगा।
- pos: लेबल की स्थिति। यदि परिभाषित नहीं है, तो लेबल डिफ़ॉल्ट रूप से इमेज के निचले भाग में होगा।
- w: इमेज की चौड़ाई। यदि परिभाषित नहीं है, तो डिफ़ॉल्ट रूप से इमेज की प्राकृतिक चौड़ाई होगी।
- h: इमेज की ऊँचाई। यदि परिभाषित नहीं है, तो डिफ़ॉल्ट रूप से इमेज की प्राकृतिक ऊँचाई होगी।
- constraint: निर्धारित करता है कि इमेज नोड के आकार को सीमित करती है या नहीं। यह सेटिंग यह भी सुनिश्चित करती है कि इमेज अपना मूल पहलू अनुपात बनाए रखे और चौड़ाई के अनुसार ऊँचाई समायोजित करे। यदि परिभाषित नहीं है, तो डिफ़ॉल्ट रूप से off होता है।
इमेज आपके फ़्लोचार्ट को अतिरिक्त लचीलापन और विज़ुअल आकर्षण प्रदान करती हैं, जिससे यह अधिक सूचनात्मक और आकर्षक बनता है।
नोड्स के बीच कनेक्शन
नोड्स को कनेक्टिंग लाइनों और तीरों के माध्यम से जोड़ा जा सकता है। विभिन्न प्रकार के लिंक होते हैं, और लिंक पर टेक्स्ट स्ट्रिंग भी जोड़ी जा सकती है।
तीर वाला लिंक
कॉपी करें
एम्बेड
flowchart LR
A-->B
एक खुला लिंक
कॉपी करें
एम्बेड
flowchart LR
A --- B
टेक्स्ट वाला लिंक
कॉपी करें
एम्बेड
flowchart LR
A-- This is the text! ---B
या
कॉपी करें
एम्बेड
flowchart LR
A --- | This is the text| B
तीर और टेक्स्ट वाला लिंक
कॉपी करें
एम्बेड
flowchart LR
A-->|text|B
या
कॉपी करें
एम्बेड
flowchart LR
A-- text -->B
बिंदुदार लिंक
कॉपी करें
एम्बेड
flowchart LR
A-.->B;
टेक्स्ट वाला बिंदुदार लिंक
कॉपी करें
एम्बेड
flowchart LR
A-. text .->B;
मोटा लिंक
कॉपी करें
एम्बेड
flowchart LR
A ==> B
टेक्स्ट वाला मोटा लिंक
कॉपी करें
एम्बेड
flowchart LR
A == |text| ==> B
अदृश्य लिंक
कॉपी करें
एम्बेड
flowchart LR
A ~~~ B
लिंक का श्रृंखलाबद्ध कनेक्शन
कॉपी करें
एम्बेड
flowchart LR
A -- text --> B -- text2 --> C
एक ही पंक्ति में कई नोड लिंक भी घोषित किए जा सकते हैं, जैसा कि नीचे दिखाया गया है:
कॉपी करें
एम्बेड
flowchart LR
a --> b & c--> d
आप नीचे दिए गए कोड की तरह निर्भरता भी बता सकते हैं:
कॉपी करें
एम्बेड
flowchart LR
a --> b & c--> d & e--> f
यदि उसी ग्राफ़ को बुनियादी सिंटैक्स से वर्णित किया जाए, तो 8 पंक्तियों की आवश्यकता होगी। ध्यान रखें कि इस विधि का अत्यधिक उपयोग Markdown फ़ॉर्मेट के फ़्लोचार्ट को पढ़ना कठिन बना सकता है।
कॉपी करें
एम्बेड
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
कनेक्टिंग लाइन में ID जोड़ें
Mermaid अब कनेक्टिंग लाइनों में ID जोड़ने का समर्थन करता है, जो नोड्स पर ID और मेटाडेटा संलग्न करने के समान है। यह सुविधा कनेक्टिंग लाइनों पर अधिक उन्नत शैली, क्लास और एनिमेशन क्षमताओं की नींव रखती है।
सिंटैक्स:कनेक्टिंग लाइन में ID जोड़ने के लिए, कनेक्टिंग लाइन सिंटैक्स से पहले ID लिखें और उसके तुरंत बाद @ अक्षर लगाएँ। उदाहरण:
कॉपी करें
एम्बेड
flowchart LR
A e1@--> B
इस उदाहरण में, e1 उस कनेक्टिंग लाइन की ID है जो A और B को जोड़ती है। आप इस ID का उपयोग आगे की परिभाषा या शैली कथनों में नोड की तरह कर सकते हैं।
एनिमेशन चालू करें
कनेक्टिंग लाइन में ID जोड़ने के बाद, आप कनेक्टिंग लाइन के गुणों को परिभाषित करके उसका एनिमेशन चालू कर सकते हैं:
कॉपी करें
एम्बेड
flowchart LR
A e1@==> B
e1@{ animate: true }
यह Mermaid को बताता है कि कनेक्टिंग लाइन e1 एनिमेटेड है।
एनिमेशन प्रकार चुनें
प्रारंभिक संस्करण में दो एनिमेशन गति समर्थित हैं: fast और slow। विशिष्ट एनिमेशन प्रकार चुनना एनिमेशन सक्षम करने और एक ही बार में एनिमेशन गति सेट करने का आसान तरीका है।
कॉपी करें
एम्बेड
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
classDef कथन का उपयोग करके एनिमेशन
आप कनेक्टिंग लाइन को एक क्लास असाइन करके, फिर classDef कथन में एनिमेशन गुण परिभाषित करके भी कनेक्टिंग लाइन में एनिमेशन जोड़ सकते हैं। उदाहरण:
कॉपी करें
एम्बेड
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
इस कोड में:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate ने animate नाम की एक क्लास परिभाषित की, जिसमें शैली और एनिमेशन गुण हैं।
- class e1 animate ने animate क्लास को कनेक्टिंग लाइन e1 पर लागू किया।
अल्पविराम को एस्केप करने के बारे में नोट: stroke-dasharray गुण सेट करते समय, याद रखें कि अल्पविराम को , के रूप में एस्केप करें, क्योंकि Mermaid की शैली परिभाषाओं में अल्पविराम विभाजक के रूप में उपयोग होता है।
नए तीर प्रकार
नए तीर प्रकारों का समर्थन करता है
- ठोस वृत्त वाली कनेक्टिंग लाइन
- क्रॉस चिह्न वाली कनेक्टिंग लाइन
ठोस वृत्त वाली कनेक्टिंग लाइन
कॉपी करें
एम्बेड
flowchart LR
A --o B
क्रॉस चिह्न वाली कनेक्टिंग लाइन
कॉपी करें
एम्बेड
flowchart LR
A --x B
बहुदिशीय तीर
बहुदिशीय तीरों का उपयोग किया जा सकता है, उदाहरण:
कॉपी करें
एम्बेड
flowchart LR
A o--o B
B <--> C
C x--x D
कनेक्टिंग लाइन की लंबाई
फ़्लोचार्ट में प्रत्येक नोड को, उससे जुड़े नोड्स के आधार पर, रेंडर किए गए ग्राफ़ में एक स्तर सौंपा जाता है, अर्थात ऊर्ध्वाधर या क्षैतिज स्तर (फ़्लोचार्ट की दिशा पर निर्भर)। डिफ़ॉल्ट रूप से, लिंक किसी भी संख्या में स्तरों तक फैल सकता है, लेकिन आप कनेक्शन परिभाषा में अतिरिक्त डैश जोड़कर किसी कनेक्शन को अन्य कनेक्शनों से लंबा बना सकते हैं।
इस उदाहरण में, नोड B से नोड E तक के कनेक्शन में दो अतिरिक्त डैश जोड़े गए हैं, जिससे यह सामान्य लिंक की तुलना में दो अधिक स्तरों तक फैलता है:
कॉपी करें
एम्बेड
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
जब कनेक्शन लेबल कनेक्शन के बीच में लिखा जाता है, तो कनेक्शन के दाईं ओर अतिरिक्त डैश जोड़ना आवश्यक है। यह उदाहरण पिछले उदाहरण के समान है:
कॉपी करें
एम्बेड
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
बिंदुदार लाइनों या मोटे लिंक के लिए जोड़े जाने वाले अक्षर बराबर चिह्न या बिंदु हैं, जैसा कि नीचे दी गई तालिका में दिखाया गया है:
| लंबाई | 1 | 2 | 3 |
|---|---|---|---|
| सामान्य कनेक्शन | --- | ---- | ----- |
| तीर सहित सामान्य कनेक्शन | --> | ---> | ----> |
| मोटा कनेक्शन | === | ==== | ===== |
| तीर सहित मोटा कनेक्शन | ==> | ===> | ====> |
| बिंदुदार लाइन | -.- | -..- | -...- |
| तीर सहित बिंदुदार लाइन | -.- | -..-> | -...-> |
विशेष अक्षर
अधिक कठिन अक्षरों को रेंडर करने के लिए टेक्स्ट को उद्धरण चिह्नों में रखा जा सकता है। जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:
कॉपी करें
एम्बेड
flowchart LR
id1["This is the (text) in the box"]
अक्षरों को एस्केप करने के लिए एंटिटी एन्कोडिंग
उदाहरण के सिंटैक्स का उपयोग करके अक्षरों को एस्केप किया जा सकता है।
कॉपी करें
एम्बेड
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
दिया गया नंबर दशमलव है, इसलिए # को #35 के रूप में एन्कोड किया जा सकता है। HTML अक्षर नामों का उपयोग भी समर्थित है।
सबग्राफ़
कॉपी करें
एम्बेड
subgraph title
graph definition
end
नीचे एक उदाहरण है:
कॉपी करें
एम्बेड
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
आप सबग्राफ़ के लिए id भी सेट कर सकते हैं।
कॉपी करें
एम्बेड
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
फ़्लोचार्ट
फ़्लोचार्ट प्रकार के चार्ट का उपयोग करते हुए, आप नीचे दिए गए फ़्लोचार्ट की तरह सबग्राफ़ की ओर और सबग्राफ़ से आने वाली कनेक्टिंग लाइनें भी सेट कर सकते हैं।
कॉपी करें
एम्बेड
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
सबग्राफ़ की दिशा
फ़्लोचार्ट प्रकार का उपयोग करते समय, आप सबग्राफ़ की रेंडरिंग दिशा सेट करने के लिए दिशा कथन का उपयोग कर सकते हैं, जैसा कि नीचे दिखाया गया है:
कॉपी करें
एम्बेड
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
सीमाएँ
यदि सबग्राफ़ का कोई भी नोड बाहर से जुड़ा है, तो सबग्राफ़ की दिशा को अनदेखा कर दिया जाएगा। अन्यथा, सबग्राफ़ पैरेंट ग्राफ़ की दिशा विरासत में लेगा:
कॉपी करें
एम्बेड
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Markdown स्ट्रिंग
Markdown स्ट्रिंग अधिक लचीला स्ट्रिंग प्रकार प्रदान करके फ़्लोचार्ट और माइंड मैप को बेहतर बनाती है, जो बोल्ड और इटैलिक जैसे टेक्स्ट फ़ॉर्मेटिंग विकल्पों का समर्थन करती है और लेबल के भीतर टेक्स्ट को स्वतः रैप कर सकती है।
कॉपी करें
एम्बेड
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- टेक्स्ट को बोल्ड करने के लिए, टेक्स्ट के आगे और पीछे दो स्टार चिह्न (**) लगाएँ।
- इटैलिक के लिए टेक्स्ट के आगे और पीछे एक स्टार चिह्न (*) लगाएँ।
- पारंपरिक स्ट्रिंग के लिए, नोड में टेक्स्ट को रैप करने के लिए आपको <br> टैग जोड़ना होगा। हालाँकि, Markdown स्ट्रिंग टेक्स्ट बहुत लंबा होने पर स्वतः रैप हो जाती है, और <br> टैग के बजाय केवल न्यूलाइन अक्षर का उपयोग करके नई पंक्ति शुरू की जा सकती है।
यह सुविधा नोड लेबल, कनेक्टिंग लाइन लेबल और सबग्राफ़ लेबल पर लागू होती है
विशिष्ट सिंटैक्स का उपयोग करके स्वतः रैपिंग को अक्षम किया जा सकता है
कॉपी करें
एम्बेड
---
config:
markdownAutoWrap: false
---
graph LR
टिप्पणी
फ़्लोचार्ट में टिप्पणियाँ दर्ज की जा सकती हैं, जिन्हें एडिटर अनदेखा कर देगा। टिप्पणी को अलग पंक्ति में होना चाहिए और दोहरे प्रतिशत चिह्न (%%) से शुरू होना चाहिए। टिप्पणी की शुरुआत से अगली पंक्ति तक का कोई भी टेक्स्ट, किसी भी फ़्लो सिंटैक्स सहित, टिप्पणी माना जाएगा।
कॉपी करें
एम्बेड
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
शैली और क्लास
लिंक शैली
लिंक की शैली सेट की जा सकती है। उदाहरण के लिए, आप प्रवाह में पीछे जाने वाले लिंक को स्टाइल करना चाह सकते हैं; चूँकि लिंक में नोड्स की तरह ID नहीं होती, इसलिए यह तय करने का अन्य तरीका आवश्यक है कि लिंक को कौन सी शैली का उपयोग करना चाहिए। लिंक परिभाषित करते समय क्रम संख्या का उपयोग करें, या सभी लिंक पर लागू करने के लिए डिफ़ॉल्ट मान का उपयोग करें।
कॉपी करें
एम्बेड
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
आप एक ही कथन में लिंक नंबरों को अल्पविराम से अलग करके कई लिंक में शैली भी जोड़ सकते हैं:
कॉपी करें
एम्बेड
linkStyle 1,2,7 color:blue;
कनेक्टिंग लाइन की वक्र शैली सेट करें
यदि डिफ़ॉल्ट विधि आपकी आवश्यकताओं को पूरा नहीं करती, तो आप आइटम्स के बीच कनेक्टिंग लाइनों के लिए वक्र शैली सेट कर सकते हैं। उपलब्ध वक्र शैलियों में basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter और stepBefore शामिल हैं।
नीचे दिए गए उदाहरण में, बाएँ से दाएँ वाले चार्ट ने stepBefore वक्र शैली का उपयोग किया है।
कॉपी करें
एम्बेड
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
नोड शैली सेट करें
नोड पर विशिष्ट शैली सेट की जा सकती है, जैसे मोटा बॉर्डर या भिन्न बैकग्राउंड रंग।
कॉपी करें
एम्बेड
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
क्लास
हर बार शैली परिभाषित करने से अधिक सुविधाजनक यह है कि एक शैली क्लास परिभाषित करें और उस क्लास को उन नोड्स पर संलग्न करें जिन्हें अलग रूप चाहिए।
क्लास परिभाषा इस प्रकार है:
कॉपी करें
एम्बेड
classDef className fill:pink,stroke:#333,stroke-width:4px;
इसके अलावा, एक ही कथन में कई क्लासों के लिए शैली परिभाषित की जा सकती है:
कॉपी करें
एम्बेड
classDef firstClassName,secondClassName font-size:12pt;
क्लास को नोड पर संलग्न करने का तरीका इस प्रकार है:
कॉपी करें
एम्बेड
class nodeId1 className;
आप एक ही कथन में एक क्लास को नोड सूची पर भी संलग्न कर सकते हैं:
कॉपी करें
एम्बेड
class nodeId1,nodeId2 className;
क्लास जोड़ने के लिए ::: ऑपरेटर का उपयोग करके क्लास नाम को नोड पर संलग्न किया जा सकता है, जैसा कि नीचे दिखाया गया है:
कॉपी करें
एम्बेड
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
नोड्स के बीच कई लिंक घोषित करते समय इस रूप का उपयोग किया जा सकता है:
कॉपी करें
एम्बेड
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- ग्राफ़ घोषणाओं में, कथन अब सेमीकोलन के बिना भी समाप्त किए जा सकते हैं। संस्करण 0.2.16 के बाद, ग्राफ़ कथन को सेमीकोलन से समाप्त करना केवल वैकल्पिक है। इसलिए, नीचे दी गई ग्राफ़ घोषणा पुरानी ग्राफ़ घोषणा की तरह ही मान्य है।
- वर्टिसेस और लिंक के बीच एक स्पेस की अनुमति है। हालाँकि, वर्टिस और उसके टेक्स्ट तथा लिंक और उसके टेक्स्ट के बीच कोई स्पेस नहीं होना चाहिए। पुरानी ग्राफ़ घोषणा भी अभी भी मान्य है, इसलिए यह नई सुविधा वैकल्पिक है और इसका उद्देश्य पठनीयता बढ़ाना है।
नीचे कनेक्टिंग लाइन की नई घोषणा है, जो पुरानी कनेक्टिंग लाइन घोषणा की तरह ही मान्य है।
कॉपी करें
एम्बेड
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
