Mermaid गैंट चार्ट एडिटर
गैंट चार्ट काम को कैलेंडर पर रखता है: क्या कितना चलता है, क्या ऊपर-नीचे पड़ता है, और क्या तब तक शुरू नहीं हो सकता जब तक कुछ और ख़त्म न हो। इसे तब उठाइए जब तारीख़ें और निर्भरताएँ ही मूल बात हों। अगर आपको सिर्फ़ क्रम चाहिए और तारीख़ें नहीं, तो फ़्लोचार्ट हल्का है और समय-सारणी खिसकते ही सड़ता नहीं।
निर्भरताओं और एक मील के पत्थर वाली रिलीज़ योजना
जो चीज़ इसे पट्टियों के चित्र से गैंट चार्ट बनाती है वह `after a1` है: निर्भरता घोषित है, इसलिए पहला काम खिसकाने पर उसके बाद का सब कुछ खिंच जाता है। मील का पत्थर एक तय तारीख़ बताता है जो समय नहीं लेती। `dateFormat DD/MM/YYYY` वाली पंक्ति वैकल्पिक नहीं है: उसके बिना आप नीचे बताए तारीख़ वाले जाल में गिरते हैं।
gantt
title रिलीज़ 2.4
dateFormat DD/MM/YYYY
axisFormat %d/%m
excludes weekends
section विकास
एपीआई अनुबंध :done, a1, 07/01/2026, 10d
कार्यान्वयन :active, a2, after a1, 20d
आंतरिक परीक्षण : a3, after a2, 8d
section रिलीज़
स्थिरीकरण अवधि : b1, after a3, 5d
रिलीज़ का निर्णय :milestone, m1, after b1, 0d
प्रोडक्शन में तैनाती :crit, b2, after m1, 3dहल किए गए उदाहरण
1. सबसे सरल सही चार्ट
`dateFormat` Mermaid को बताता है कि आपकी लिखी तारीख़ें कैसे पढ़नी हैं; `axisFormat` तय करता है कि वे धुरी पर कैसे दिखेंगी। ये दो अलग सेटिंग हैं, और इन्हें आपस में मिला देना गैंट के साथ सबसे आम झुँझलाहट की जड़ है।
gantt
title स्प्रिंट 14
dateFormat DD/MM/YYYY
section काम
खोज सुविधा बनाएँ :02/03/2026, 10d2. कार्य-पहचान और निर्भरताएँ
किसी काम को पहचान देने से बाद के काम `after <पहचान>` लिख पाते हैं। निर्भरताएँ घोषित हों तो आप शुरुआत की तारीख़ एक ही जगह बदलते हैं और बाक़ी योजना अपने आप पीछे चली आती है।
gantt
title डेटा स्थानांतरण
dateFormat DD/MM/YYYY
section तैयारी
स्कीमा की समीक्षा :a1, 02/02/2026, 5d
मैपिंग लिखें :a2, after a1, 8d
section निष्पादन
पूर्वाभ्यास :a3, after a2, 3d
अदला-बदली :a4, after a3, 1d3. स्थिति के कुंजी-शब्द
`done`, `active` और `crit` पट्टी बनाने का ढंग बदल देते हैं। यह चार्ट से «हम कहाँ हैं» का जवाब दिलाने का सबसे सस्ता तरीका है, न कि सिर्फ़ «योजना क्या थी» का।
gantt
title प्लेटफ़ॉर्म, पहली तिमाही
dateFormat DD/MM/YYYY
section अवसंरचना
Terraform की सफ़ाई :done, t1, 05/01/2026, 12d
Kubernetes उन्नयन :active, t2, 19/01/2026, 15d
लागत की समीक्षा : t3, after t2, 5d
section सुरक्षा
निर्भरता जाँच :crit, s1, 12/01/2026, 6d4. मील के पत्थर
मील का पत्थर एक बिंदु है, अवधि नहीं: उसे `0d` दें। इन्हें उन तारीख़ों के लिए रखें जो परियोजना के बाहर से तय होती हैं — कोई प्रदर्शनी, कोई अनुबंध की समय-सीमा, कोई कोड फ़्रीज़।
gantt
title लॉन्च योजना
dateFormat DD/MM/YYYY
section इंजीनियरिंग
दायरा तय करें :milestone, m1, 01/04/2026, 0d
बग खोज : e1, 01/04/2026, 5d
रिलीज़ शाखा :milestone, m2, after e1, 0d
section संचार
प्रेस रोक समाप्त :milestone, m3, 15/04/2026, 0d5. सप्ताहांत और छुट्टियाँ हटाना
`excludes weekends` से अवधियाँ शनिवार-रविवार नहीं गिनतीं, इसलिए 10 दिन का काम सप्ताहांत के बीच ख़त्म होने के बजाय दो कार्य-सप्ताह लेता है। छुट्टियाँ एक-एक तारीख़ से हटाई जाती हैं; भारत में 26 जनवरी, 15 अगस्त और 2 अक्तूबर के आसपास इसका असर साफ़ दिखता है।
gantt
title नई सेवा शुरू करना
dateFormat DD/MM/YYYY
excludes weekends, 15/08/2026, 02/10/2026
section निर्माण
अवसंरचना खड़ी करें :p1, 10/08/2026, 5d
CI/CD जोड़ें :p2, after p1, 5d
section हस्तांतरण
मार्गदर्शिका और प्रशिक्षण :p3, after p2, 4dगैंट सिंटैक्स का सार
छहों प्रकारों में गैंट सिर्फ़ एक जगह — कार्य-पंक्ति में — सबसे कम उदार है, और बाक़ी हर चीज़ में सबसे ज़्यादा। ठीक इसी वजह से इसमें इतनी ग़लतियाँ बिना देखे निकल जाती हैं।
| सिंटैक्स | अर्थ |
|---|---|
| gantt | आरेख खोलता है। |
| title पाठ | चार्ट का शीर्षक। |
| dateFormat DD/MM/YYYY | आपकी लिखी तारीख़ें कैसे पढ़ी जाएँ। हिंदी के लिए यही सही पंक्ति है। |
| dateFormat YYYY-MM-DD | ISO रूप, डिफ़ॉल्ट सेटिंग। |
| axisFormat %d/%m | धुरी पर तारीख़ें कैसे दिखें। dateFormat से अलग सेटिंग। |
| excludes weekends | अवधि गिनते समय शनिवार-रविवार छोड़ें। |
| excludes 15/08/2026 | कोई ख़ास तारीख़ हटाएँ। छुट्टियाँ ऐसे ही निकाली जाती हैं। |
| section नाम | कामों को एक नामित पट्टी में समूहित करता है। |
| काम :id, 01/01/2026, 10d | स्पष्ट शुरुआत और अवधि वाला काम। |
| काम :id, after दूसरा, 10d | वह काम जो `दूसरा` ख़त्म होने पर शुरू होता है। |
| काम :done, id, ... | पूरा — फीका बनता है। |
| काम :active, id, ... | चल रहा — उभारकर बनता है। |
| काम :crit, id, ... | महत्वपूर्ण — ज़ोर देने वाले रंग में बनता है। |
| नाम :milestone, id, तारीख़, 0d | समय का एक बिंदु, अवधि नहीं। |
| 10d / 3w / 2h | दिन, सप्ताह, घंटे में अवधि। इकाई अनिवार्य है। |
गैंट के छह जाल — और उनमें से सिर्फ़ एक त्रुटि है
यही गैंट को बाक़ी पाँच प्रकारों से अलग करता है। Mermaid 11.12.2 पर दोबारा बनाया गया: नीचे के छह में से ठीक एक बनना रोकता है। बाक़ी पाँच पूरी तरह भरोसेमंद और ग़लत समय-सारणी देते हैं, जो कहीं ज़्यादा ख़तरनाक है, क्योंकि जो चार्ट बन गया उसे कोई दोबारा नहीं जाँचता।
आपको क्या दिखता है
Parse error जो `Expecting 'taskData', got 'NL'` पर ख़त्म होती है
क्यों
बिना कोलन वाली कार्य-पंक्ति। कोलन दिखने वाले नाम को कार्य-डेटा से अलग करता है, और उसके बिना पार्स करने को कुछ बचता ही नहीं। इस सूची का यही अकेला जाल है जिसे Mermaid खुलकर ठुकराता है।
समाधान
नाम और पहचान के बीच कोलन लगाएँ।
gantt
dateFormat DD/MM/YYYY
section काम
डिज़ाइन a1, 07/01/2026, 5dgantt
dateFormat DD/MM/YYYY
section काम
डिज़ाइन :a1, 07/01/2026, 5dआपको क्या दिखता है
चार्ट बन जाता है, पर तारीख़ें दो महीने पहले गिरती हैं
क्यों
यह हिंदी में लिखते समय की सबसे महँगी ग़लती है। हम 01/03/2026 लिखते हैं और 1 मार्च समझते हैं, पर डिफ़ॉल्ट `dateFormat` ISO है, और विभाजक वाली तारीख़ को Mermaid अमेरिकी क्रम में पढ़ता है, महीना पहले। मापा गया: `dateFormat YYYY-MM-DD` के साथ `01/03/2026` उस काम को 3 जनवरी पर रख देता है। कोई चेतावनी नहीं; चार्ट बिलकुल ठीक दिखता है और दो महीने खिसका होता है। बिंदु या हाइफ़न लगाने से भी कुछ नहीं बदलता।
समाधान
`dateFormat DD/MM/YYYY` घोषित करें और तारीख़ें हमेशा की तरह लिखें। जाँचा गया: इस रूप के साथ `01/03/2026` ठीक 1 मार्च पर गिरता है।
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m/%Y
section स
डिज़ाइन :a1, 01/03/2026, 10dgantt
dateFormat DD/MM/YYYY
axisFormat %d/%m/%Y
section स
डिज़ाइन :a1, 01/03/2026, 10dआपको क्या दिखता है
चार्ट बन जाता है, पर धुरी अचानक कई महीनों तक फैल जाती है
क्यों
कोई `after` ऐसी कार्य-पहचान की ओर इशारा करता है जो है ही नहीं — प्रायः टाइपो या बदला हुआ नाम। Mermaid चेतावनी नहीं देता: वह उस काम को किसी भी बिंदु पर रख देता है, जिससे धुरी उस तक पहुँचने के लिए खिंच जाती है। दस-दस दिन के दो काम आठ महीने फैली धुरी पर पहुँच सकते हैं।
समाधान
जाँचें कि हर `after <पहचान>` किसी घोषित पहचान से ठीक-ठीक मेल खाती है। धुरी के पैमाने का अचानक बदलना ही संकेत है।
gantt
dateFormat DD/MM/YYYY
section स
डिज़ाइन :a1, 07/01/2026, 10d
निर्माण :a2, after design, 10dgantt
dateFormat DD/MM/YYYY
section स
डिज़ाइन :a1, 07/01/2026, 10d
निर्माण :a2, after a1, 10dआपको क्या दिखता है
कार्य का नाम पहले कोलन पर कट जाता है
क्यों
कार्य के नाम में कोलन है। पहला कोलन ही विभाजक है, इसलिए उसके बाद सब कुछ कार्य-डेटा समझा जाता है: `चरण 1: डिज़ाइन` सिर्फ़ `चरण 1` नाम के काम के रूप में बनता है और डिज़ाइन शब्द ग़ायब हो जाता है। सेक्शन के नाम इससे अछूते रहते हैं — जाँचा गया।
समाधान
कार्य के नामों में कोलन न रखें। डैश लगाएँ या ब्योरा सेक्शन के नाम में ले जाएँ।
gantt
dateFormat DD/MM/YYYY
section स
चरण 1: डिज़ाइन :a1, 07/01/2026, 10dgantt
dateFormat DD/MM/YYYY
section स
चरण 1 — डिज़ाइन :a1, 07/01/2026, 10dआपको क्या दिखता है
पट्टी सिकुड़कर ख़त्म हो जाती है
क्यों
बिना इकाई की अवधि। `5` का मतलब पाँच दिन नहीं है: इकाई अनिवार्य है और उसके बिना काम को कोई सार्थक लंबाई नहीं मिलती। चार्ट फिर भी बन जाता है, ऐसे काम के साथ जो मानो समय ही न लेता हो।
समाधान
इकाई हमेशा लिखें: `5d`, `3w`, `2h`।
gantt
dateFormat DD/MM/YYYY
section स
डिज़ाइन :a1, 07/01/2026, 5gantt
dateFormat DD/MM/YYYY
section स
डिज़ाइन :a1, 07/01/2026, 5dआपको क्या दिखता है
अवधियाँ सही हैं, पर समाप्ति की तारीख़ें हक़ीक़त से नहीं मिलतीं
क्यों
`excludes weekends` नहीं है। डिफ़ॉल्ट रूप से 10 दिन का काम सप्ताहांत सहित दस कैलेंडर दिन है, इसलिए एक कार्य-सप्ताह से लंबी हर चीज़ चार्ट पर व्यवहार से पहले ख़त्म होती है। भारत में इसमें त्योहारों की छुट्टियाँ भी जुड़ती हैं, और एक तिमाही भर में जमा हुआ अंतर बैठक में बचाना मुश्किल हो जाता है।
समाधान
शुरुआत के पास `excludes weekends` जोड़ें, उसके बाद छुट्टियों की तारीख़ें — बशर्ते काम सचमुच सातों दिन न चलता हो।
gantt
dateFormat DD/MM/YYYY
section स
स्थानांतरण :a1, 10/08/2026, 10dgantt
dateFormat DD/MM/YYYY
excludes weekends, 15/08/2026
section स
स्थानांतरण :a1, 10/08/2026, 10dबनने के बारे में टिप्पणियाँ
Mermaid 11.12.2 पर मापा गया, वही संस्करण जो यह साइट चलाती है। गैंट बाक़ी सभी प्रकारों से अलग बरतता है।
इकलौता प्रकार जिसकी चौड़ाई तय है
इस साइट के बाक़ी सभी आरेख उसी दिशा में बढ़ते हैं जिसमें उनकी सामग्री बढ़ती है। गैंट चार्ट के viewBox की चौड़ाई हमेशा 1264 पिक्सल रहती है, चाहे उसमें तीन काम हों या चालीस; सिर्फ़ ऊँचाई बदलती है, जो लगभग 172 से 1060 पिक्सल के बीच मापी गई। धुरी उसी तय चौड़ाई में समाने के लिए दबाई या खींची जाती है, और इसीलिए दो साल की योजना और दो हफ़्ते की योजना बराबर घनी दिखती हैं। अगर पट्टियाँ इतनी पतली निकलें कि पढ़ी न जाएँ, तो समस्या तारीख़ों के दायरे में है, कामों की संख्या में नहीं।
यहाँ देवनागरी पर कोई पाबंदी नहीं है
यह राहत की बात है और कहने लायक है। फ़्लोचार्ट की नोड-पहचान और क्लास के नाम में देवनागरी अस्वीकार होती है, पर गैंट में ऐसी कोई जगह है ही नहीं: कार्य के नाम और सेक्शन के नाम लेबल हैं, पहचान नहीं। जाँचा गया — `section नियोजन` और `आवश्यकता विश्लेषण` दोनों ज्यों के त्यों बनते हैं, और उनमें स्थान भी चलते हैं। कार्य के नाम में मना सिर्फ़ कोलन है। यानी पूरी साइट पर गैंट वह प्रकार है जिसमें हिंदी को कुछ भी बदलना नहीं पड़ता।
स्लैश मदद नहीं करता — पढ़ाई अमेरिकी ही रहती है
इसे यहाँ दोहरा रहा हूँ क्योंकि हिंदी में लिखते समय यही सबसे महँगा जाल है। मापा गया: `dateFormat YYYY-MM-DD` के साथ `01/03/2026` न त्रुटि देता है न चेतावनी, बस 3 जनवरी पर बैठ जाता है — विभाजक के रूप में स्लैश इंजन को किसी तरह यह संकेत नहीं देता कि यह दिन और फिर महीना है। बिंदु के साथ भी वही होता है। घोषित `dateFormat DD/MM/YYYY` इसे पूरी तरह हल कर देता है। हर हिंदी गैंट में जोड़ने लायक पहली पंक्ति यही है।
PNG निर्यात पिक्सल तक सही है
गैंट अपने लेबल अंतःस्थापित HTML के बजाय सामान्य SVG पाठ के रूप में बनाता है, इसलिए — फ़्लोचार्ट तथा क्लास, स्टेट और ER आरेखों के विपरीत — वह सीधे रैस्टर हो जाता है। निर्यात किया गया PNG स्क्रीन से बिलकुल मेल खाता है, बिना दोबारा बनाए और बिना पाठ की टाइपसेटिंग खिसके।
व्याकरण कोलन को छोड़कर हर जगह ढीला है
ग़ायब सेक्शन, अनजाने स्थिति-कुंजी-शब्द, ग़लत रूप वाली तारीख़ें और बिना इकाई की अवधियाँ — सब बन जाता है। ठुकराई सिर्फ़ वही कार्य-पंक्ति जाती है जिसमें कोलन नहीं। यह असंतुलन गैंट चार्ट लिखने के बारे में जानने लायक सबसे उपयोगी बात है: चार्ट का बन जाना इस बारे में लगभग कुछ नहीं कहता कि वह सही है या नहीं।
कब कोई दूसरा आरेख बेहतर है
अगर तारीख़ें अंदाज़े हैं, तो गैंट चार्ट उन्हें ऐसी सटीकता से पेश करता है जिसके वे हक़दार नहीं, और बाद में कोई आपको यह याद दिलाएगा। बिना तारीख़ों के क्रम दिखाने वाला फ़्लोचार्ट ज़्यादा ईमानदार है और समय-सारणी खिसकने पर सुधार नहीं माँगता।
अगर योजना हर हफ़्ते बदलती है, तो संस्करण-नियंत्रण में रखा पाठ-आधारित गैंट सचमुच अच्छा है — डिफ़ से दिख जाता है कि क्या खिसका — पर जिस आरेख को कोई अद्यतन नहीं करता वह आरेख न होने से बुरा है। ठंडे दिमाग़ से तय कीजिए कि आप दोनों में से कौन-सा बना रहे हैं।
और काम के बोझ के संतुलन, क्षमता या व्यक्तियों को काम बाँटने से जुड़ी हर बात के लिए यह ग़लत औज़ार है। Mermaid कैलेंडर पर पट्टियाँ खींचता है; उसे यह नहीं पता कि काम कौन करता है या वह व्यक्ति पहले से व्यस्त है या नहीं।
अन्य आरेख प्रकार
लिखा Dominik Malsch · अंतिम अद्यतन: