निःशुल्क · साइन-अप नहीं · .mmd फ़ाइलों के साथ काम करता है

Mermaid फ़्लोचार्ट एडिटर

फ़्लोचार्ट दिखाता है कि कोई प्रक्रिया कैसे आगे बढ़ती है: कौन-से चरण हैं, कहाँ शाखाएँ बनती हैं, और कहाँ वे फिर मिलती हैं। यह तब ठीक है जब विषय निर्णयों का क्रम हो — एक रिलीज़, किसी अनुरोध का रास्ता, कोई स्वीकृति प्रवाह। पर अगर विषय यह है कि कौन किससे और कब बात करता है, तो सीक्वेंस आरेख बेहतर है।

इसे एडिटर में खोलें →गाइड पढ़ें

दो विफलता रास्तों वाली रिलीज़ पाइपलाइन

इस साइट के ज़्यादातर फ़्लोचार्ट इसी आकार से शुरू होते हैं: एक सीधा सफल रास्ता और उससे निकलती निर्णय-चतुर्भुज। ध्यान दें कि हर नोड की पहचान अंग्रेज़ी अक्षरों में है और देवनागरी सिर्फ़ लेबल में है — यह शैली नहीं, मजबूरी है, और इसकी वजह नीचे ग़लतियों वाले हिस्से में है।

flowchart TD
    push[main में पुश] --> lint[स्टैटिक जाँच और टाइप]
    lint --> test{टेस्ट पास हुए}
    test -->|नहीं| alert[कमिट करने वाले को बताएँ]
    test -->|हाँ| build[इमेज बनाएँ]
    build --> scan{सुरक्षा जाँच साफ़}
    scan -->|नहीं| hold["रिलीज़ रोकें (मैनुअल समीक्षा)"]
    scan -->|हाँ| deploy[प्रोडक्शन में तैनात करें]
    deploy --> smoke[त्वरित जाँच]
    smoke --> done[रिलीज़ पूरी हुई]

इसे एडिटर में खोलें

हल किए गए उदाहरण

1. सबसे छोटा फ़्लोचार्ट

दो नोड और एक तीर। `TD` ऊपर से नीचे चलता है, `LR` बाएँ से दाएँ; और जो आरेख ऊँचाई से ज़्यादा चौड़ा हो वह लगभग हमेशा `LR` में बेहतर पढ़ा जाता है।

flowchart TD
    recv[अनुरोध प्राप्त करें] --> reply[उत्तर भेजें]

एडिटर में खोलें

2. लेबल वाली शाखा

मझले कोष्ठक चतुर्भुज बनाते हैं। खड़ी रेखाओं के बीच का पाठ किनारे को नाम देता है, नोड को नहीं। यह भेद नीचे ग़लतियों वाले हिस्से में फिर आएगा।

flowchart TD
    start[अनुरोध प्राप्त करें] --> auth{टोकन वैध है}
    auth -->|हाँ| handle[हैंडलर चलाएँ]
    auth -->|नहीं| deny[401 लौटाएँ]
    handle --> ok[200 लौटाएँ]

एडिटर में खोलें

3. आकार को कुछ कहने दें

फ़्लोचार्ट में जानकारी जोड़ने का सबसे सस्ता तरीका आकार हैं। गोल सिरे शुरुआत और अंत बताते हैं, चतुर्भुज निर्णय, और बेलन डेटा भंडार।

flowchart LR
    begin([काम शुरू करें]) --> read[(Postgres से पढ़ें)]
    read --> fresh{नई पंक्तियाँ हैं}
    fresh -->|नहीं| stop([बिना बदलाव समाप्त करें])
    fresh -->|हाँ| xform[/डेटा रूपांतरित करें/]
    xform --> write[(S3 में लिखें)]
    write --> stop

एडिटर में खोलें

4. ज़िम्मेदारी के हिसाब से समूह बनाने के लिए सबग्राफ़

सबग्राफ़ जुड़े हुए नोड को एक चौखटे में रखता है। यह चरण के बजाय ज़िम्मेदार पक्ष के हिसाब से समूह बनाने में सबसे उपयोगी है: जैसे ही दिखता है कि कौन-सी टीम या सेवा क्या संभालती है, हस्तांतरण के बिंदु अपने आप उभर आते हैं।

flowchart TD
    subgraph client [ब्राउज़र]
        ui[फ़ॉर्म भेजें]
    end
    subgraph api [ऑर्डर सेवा]
        validate[इनपुट जाँचें]
        save[ऑर्डर सहेजें]
    end
    subgraph async [पृष्ठभूमि कार्य]
        mail[पुष्टि ईमेल भेजें]
        invoice[चालान बनाएँ]
    end
    ui --> validate
    validate --> save
    save --> mail
    save --> invoice

एडिटर में खोलें

5. ऊपरी सीमा वाला पुनःप्रयास चक्र

फ़्लोचार्ट चक्रों को अच्छी तरह संभालता है। पुनःप्रयास चक्र वही जगह है जहाँ वे सचमुच काम आते हैं, क्योंकि चित्र से एक नज़र में दिख जाता है कि चक्र का कोई असली निकास है या नहीं।

flowchart TD
    send[वेबहुक भेजें] --> result{2xx मिला}
    result -->|हाँ| success[डिलीवर हुआ चिह्नित करें]
    result -->|नहीं| tries{5 से कम प्रयास}
    tries -->|हाँ| wait[चरघातांकी प्रतीक्षा]
    wait --> send
    tries -->|नहीं| queue[विफल कतार में डालें]

एडिटर में खोलें

फ़्लोचार्ट सिंटैक्स का सार

यहाँ सब कुछ सिर्फ़ फ़्लोचार्ट का है। ख़ासकर तीर: वे दूसरे प्रकारों में नहीं चलते। सीक्वेंस आरेख का `->>` यहाँ सिंटैक्स त्रुटि है।

सिंटैक्स	अर्थ
flowchart TD	ऊपर से नीचे। `TB` भी वही है। किसी प्रक्रिया को पढ़ने की सामान्य दिशा।
flowchart LR	बाएँ से दाएँ। `RL` भी है। चौड़े और उथले प्रवाहों के लिए।
A[पाठ]	आयत — कोई साधारण चरण।
A(पाठ)	गोल कोनों वाला आयत।
A([पाठ])	स्टेडियम आकार — परंपरा से शुरुआत या अंत।
A[(पाठ)]	बेलन — डेटा भंडार।
A{पाठ}	चतुर्भुज — निर्णय।
A[/पाठ/]	समांतर चतुर्भुज — इनपुट या आउटपुट।
A --> B	तीर।
A --- B	बिना नोक की रेखा।
A -.-> B	बिंदुदार तीर — परंपरा से अतुल्यकालिक या वैकल्पिक।
A ==> B	मोटा तीर — परंपरा से मुख्य रास्ता।
A -->\|पाठ\| B	नामांकित किनारा। कोष्ठक हों तो उद्धरण चिह्न चाहिए।
A["पाठ (कोष्ठक सहित)"]	उद्धरण चिह्नों में लेबल — कोष्ठक, उद्धरण चिह्न और हर उस अक्षर के लिए ज़रूरी जो आकार-सिंटैक्स की तरह पढ़ा जाता है।
subgraph नाम [शीर्षक] ... end	नोड को एक चौखटे में समूहित करता है। `end` से बंद होता है।
%% टिप्पणी	टिप्पणी पंक्ति। बनती नहीं है।

वे छह ग़लतियाँ जो फ़्लोचार्ट को वाकई तोड़ती हैं

सभी इसी साइट के इंजन (Mermaid 11.12.2) पर दोबारा बनाई गईं। ग़लत रूप को एडिटर में चिपकाएँ तो ठीक वही त्रुटि मिलेगी जो बताई गई है; सुधरा हुआ रूप बन जाता है। Mermaid की त्रुटि पढ़ने का सबसे तेज़ तरीका उसका अंत देखना है: `got` शब्द के बाद वह टोकन लिखा होता है जिस पर पार्सर अटका।

आपको क्या दिखता है

Lexical error on line N. Unrecognized text.

क्यों

नोड की पहचान देवनागरी में लिखी है — और हिंदी में लिखते समय यही सबसे बड़ी बाधा है। मापा गया: `आदेश --> भुगतान` इसी त्रुटि से गिर जाता है, जबकि वही शब्द लेबल में पूरी तरह चलते हैं। यह अकेली ऐसी लिपि-सीमा है जो हिंदी और थाई पर लागू होती है और लातिन, सिरिलिक, चीनी, जापानी, कोरियाई या अरबी पर नहीं — उन सबमें अपनी लिपि की पहचानें बनती हैं।

समाधान

पहचान अंग्रेज़ी अक्षरों में रखें और देवनागरी लेबल में। पहचान पाठक को दिखती ही नहीं, इसलिए इसमें कुछ खोता नहीं। यह पूरी साइट पर हिंदी के लिए सबसे ज़रूरी नियम है।

ग़लत

flowchart TD
    आदेश --> भुगतान

सही

flowchart TD
    order[ऑर्डर] --> payment[भुगतान]

आपको क्या दिखता है

Parse error जो `got 'PS'` पर ख़त्म होती है

क्यों

चौकोर कोष्ठक वाले लेबल के अंदर एक खुला गोल कोष्ठक है। गोल कोष्ठक आकार-सिंटैक्स हैं — `A(पाठ)` का अर्थ गोल नोड है — इसलिए चौकोर कोष्ठक के भीतर नंगा गोल कोष्ठक नए आकार की शुरुआत समझा जाता है।

समाधान

पूरे लेबल को दोहरे उद्धरण चिह्नों में रखें। उनके भीतर सब कुछ पाठ गिना जाता है।

ग़लत

flowchart TD
    a[फिर कोशिश करें (अधिकतम 5 बार)] --> b[पूरा हुआ]

सही

flowchart TD
    a["फिर कोशिश करें (अधिकतम 5 बार)"] --> b[पूरा हुआ]

आपको क्या दिखता है

जिस पंक्ति में नोड को नाम दिया, उसी में Parse error

क्यों

नोड की पहचान में स्थान (स्पेस) है। हिंदी में यह आसानी से हो जाता है क्योंकि स्वाभाविक नाम कई शब्दों के होते हैं। पहचान तीर से पहले वाला टोकन है, और स्थान उसे काट देता है, जिससे एक ऐसा शब्द बचता है जिसकी कोई जगह नहीं।

समाधान

पहचान को एक शब्द में रखें और पढ़ने लायक पाठ लेबल में डालें। चूँकि हिंदी में पहचान वैसे भी अंग्रेज़ी अक्षरों में लिखनी है, यह अपने आप हल हो जाता है।

ग़लत

flowchart TD
    auth service --> user database

सही

flowchart TD
    auth[प्रमाणीकरण सेवा] --> db[(उपयोगकर्ता डेटाबेस)]

आपको क्या दिखता है

Parse error जो `got 'end'` पर ख़त्म होती है

क्यों

आपने `end` को नोड की पहचान बनाया। छोटे अक्षरों वाला `end` सबग्राफ़ बंद करता है, इसलिए पार्सर वहाँ ब्लॉक का अंत देखता है जहाँ उसे नोड चाहिए था। यह सोच से ज़्यादा होता है: चूँकि पहचानें अंग्रेज़ी में लिखी जाती हैं, आख़िरी नोड का नाम `end` रख देना बहुत स्वाभाविक लगता है।

समाधान

बड़े अक्षर से लिखें या नोड को कोई दूसरी पहचान दें और शब्द को लेबल में ले जाएँ। `done` से कोई दिक़्क़त नहीं होती।

ग़लत

flowchart TD
    begin[शुरू] --> end

सही

flowchart TD
    begin[शुरू] --> done[पूरा हुआ]

आपको क्या दिखता है

खड़ी रेखाओं के बीच किनारे के लेबल में Parse error

क्यों

किनारे के लेबल के अंदर कोष्ठक हैं। `|…|` के बीच का पाठ उसी बंधन में है जिसमें नोड का लेबल: वहाँ भी कोष्ठक सिंटैक्स हैं, पाठ नहीं।

समाधान

किनारे के लेबल को भी उद्धरण चिह्नों में रखें।

ग़लत

flowchart TD
    a -->|हाँ (हमेशा)| b

सही

flowchart TD
    a -->|"हाँ (हमेशा)"| b

आपको क्या दिखता है

Lexical error on line 1. Unrecognized text.

क्यों

दिशा मान्य नहीं है। फ़्लोचार्ट सिर्फ़ TB, TD, BT, LR और RL लेता है; बाक़ी सब एक भी नोड पढ़े जाने से पहले शाब्दिक विश्लेषण में गिर जाता है। इसीलिए त्रुटि पहली पंक्ति बताती है, टाइपो की जगह नहीं।

समाधान

इन्हीं पाँच में से कोई एक लें। TD और LR लगभग सब कुछ संभाल लेते हैं।

ग़लत

flowchart UPARNEECHE
    A --> B

सही

flowchart TD
    A --> B

बनने के बारे में टिप्पणियाँ

इसमें कुछ भी दस्तावेज़ों से नहीं लिया गया: सब कुछ Mermaid 11.12.2 पर मापा गया है, वही संस्करण जो यह साइट चलाती है। ये वे व्यवहार हैं जो तब मायने रखने लगते हैं जब आरेख खिलौना नहीं रह जाता।

देवनागरी लेबल में हर जगह चलती है, पहचान में कहीं नहीं

यह हिंदी के लिए सबसे ज़रूरी बात है, इसलिए इसे ठीक-ठीक रखना चाहिए। मापा गया: फ़्लोचार्ट की नोड-पहचान और क्लास के नाम में देवनागरी `Lexical error` देती है। लेकिन बाक़ी जगहों पर वह पूरी तरह चलती है — स्टेट आरेख की स्टेट-पहचान, ER आरेख की एंटिटी, गैंट का कार्य-नाम और सेक्शन-नाम, और हर तरह का लेबल। यानी पाबंदी लिपि पर नहीं, सिर्फ़ पहचान-वाली जगह पर है, और वह भी सिर्फ़ दो आरेख प्रकारों में। व्यावहारिक नियम यही है कि पहचानें अंग्रेज़ी अक्षरों में रखें और बाक़ी सब हिंदी में लिखें।

क्लास आरेख में देवनागरी दिखाने का रास्ता मौजूद है

क्लास का नाम भी पहचान है, इसलिए `class ऑर्डर` गिर जाता है। पर इसका सीधा हल है और वह जाँचा हुआ है: `class Order["ऑर्डर"]` बनता है, भीतर की पहचान `Order` रहती है और स्क्रीन पर नाम `ऑर्डर` दिखता है। स्टेट आरेख में इसका समकक्ष पहले से चलन में है — `state "भुगतान लंबित" as pending`। दोनों मिलाकर इसका मतलब यह है कि हिंदी को कहीं भी स्क्रीन से हटाना नहीं पड़ता; सिर्फ़ भीतर की पहचान अंग्रेज़ी रहती है।

देवनागरी लेबल अंग्रेज़ी से सँकरे निकलते हैं

जिस अर्थ के लिए अंग्रेज़ी 204 पिक्सल लेती है, वही हिंदी में 171 पिक्सल में आ जाता है — यानी सँकरा, चौड़ा नहीं। देवनागरी का एक अक्षर अंग्रेज़ी के अक्षर से चौड़ा है पर अर्थ ज़्यादा ढोता है, ठीक जैसे चीनी और कोरियाई में होता है। इसका व्यावहारिक अर्थ यह है कि 276 पिक्सल की मोड़-सीमा तक आप अंग्रेज़ी लिखने वाले से देर में पहुँचते हैं।

पंक्ति स्थान पर ही टूटती है, और देवनागरी में स्थान होते हैं

मापा गया: नोड का लेबल 276 पिक्सल की सीमा तक फैलता है, फिर टूटकर ऊपर की ओर बढ़ता है, हर पंक्ति लगभग 24 पिक्सल। टूट सिर्फ़ स्थान पर होती है, और यहाँ हिंदी सुविधाजनक है क्योंकि वह शब्दों के बीच स्थान रखती है — एक लंबा देवनागरी लेबल 276×198 पर सामान्य रूप से टूट गया। थाई इस मामले में अलग है और बिना स्थान के भी टूटती है; हिंदी लातिन लिपियों की तरह ही बरतती है।

लेबल HTML हैं, इसलिए PNG निर्यात दोबारा बनाता है

फ़्लोचार्ट के लेबल SVG के भीतर `<foreignObject>` में असली HTML के रूप में बनते हैं। इसीलिए लेबल में `<br>` और थोड़ा Markdown चलता है। इसी वजह से ब्राउज़र इस SVG को कैनवस पर नहीं उतारता: इस साइट का PNG निर्यात लंबे समय तक चुपचाप SVG फ़ाइल लौटाता रहा। अब निर्यात से पहले आरेख सादे SVG पाठ-लेबल के साथ दोबारा बनाया जाता है और PNG सही निकलता है। क़ीमत यह कि निर्यात किए गए PNG की टाइपसेटिंग स्क्रीन से बहुत थोड़ी अलग होती है।

कब कोई दूसरा आरेख बेहतर है

अगर बात यह है कि कौन किसे क्या भेजता है, और समय का क्रम शाखाओं से ज़्यादा भारी है, तो सीक्वेंस आरेख बेहतर पढ़ा जाता है और बड़ा होने पर भी पढ़ने लायक बना रहता है। जिस फ़्लोचार्ट में छह पक्ष नोड के नामों की तरह लिखे हों, वह दरअसल एक सीक्वेंस आरेख है जिसने अभी यह माना नहीं है।

अगर आप कोई प्रक्रिया नहीं बल्कि वे अवस्थाएँ बता रहे हैं जिनमें कोई चीज़ हो सकती है, तो स्टेट आरेख लें। भेद आसान है: अगर नोड के लेबल «ऑर्डर लंबित» या «ऑर्डर भेजा गया» जैसी अवस्थाएँ हैं तो यह स्टेट मशीन है; अगर «इनपुट जाँचें» या «ईमेल भेजें» जैसे काम हैं तो यह फ़्लोचार्ट है।

और चालीस नोड के बाद, सच कहें तो, कोई भी आरेख हालात नहीं बचाता। या तो आप उसे साझा प्रवेश-बिंदु वाले कई आरेखों में बाँट दें, या यह मान लें कि जो आप कहना चाहते हैं वह एक चित्र में समाने के लिए बहुत जटिल है। यह भी अपने आप में एक काम की जानकारी है।

अन्य आरेख प्रकार

लिखा Dominik Malsch · अंतिम अद्यतन: 8 सितंबर 2026

एडिटर खोलें →