गैंट चार्ट
गैंट चार्ट एक बार चार्ट है, जिसका उपयोग प्रोजेक्ट की प्रगति तथा किसी प्रोजेक्ट को पूरा करने में लगने वाले समय को दर्शाने के लिए किया जाता है। गैंट चार्ट प्रोजेक्ट के टर्मिनल तत्वों और सारांश तत्वों की प्रारंभ तिथि और समाप्ति तिथि के बीच के दिनों को दिखाता है।
ध्यान देने योग्य बातें
गैंट चार्ट प्रत्येक नियोजित कार्य को बाएँ से दाएँ फैली एक सतत बार के रूप में दर्ज करता है। x-अक्ष समय को दर्शाता है, y-अक्ष विभिन्न कार्यों और उनके पूरा होने के क्रम को दर्ज करता है।
इससे भी महत्वपूर्ण बात, जब किसी कार्य की तिथि, दिन या विशिष्ट तिथियों का समूह बहिष्कृत होता है, तो गैंट चार्ट कार्य के भीतर अंतराल बनाने के बजाय उतने ही दिन दाईं ओर बढ़ाकर इन परिवर्तनों को समायोजित करता है।
कॉपी करें
एम्बेड
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes 2026-03-16,2026-03-18,2026-03-19
section Section
A task :a1, 2026-03-07, 7d
Another task :after a1, 5d
लेकिन, यदि बहिष्कृत तिथि दो लगातार शुरू होने वाले कार्यों के बीच आती है, तो बहिष्कृत तिथि चार्ट पर छोड़ दी जाएगी और खाली रहेगी, फिर कार्य बहिष्कृत तिथि समाप्त होने के बाद शुरू होगा। जैसा कि नीचे दिखाया गया है:
कॉपी करें
एम्बेड
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes Sunday, Friday, Saturday
section Section
A task :a1, 2026-03-07, 5d
Another task :after a1, 7d
गैंट चार्ट प्रोजेक्ट पूरा करने में लगने वाले समय को ट्रैक करने के लिए उपयोगी है, लेकिन कुछ समायोजनों के साथ इसका उपयोग "गैर-कार्य दिवसों" को ग्राफ़िक रूप से दर्शाने के लिए भी किया जा सकता है।
सिंटैक्स
कॉपी करें
एम्बेड
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2026-01-06,2026-01-08
Active task :active, des2, 2026-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2026-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2026-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
कार्य डिफ़ॉल्ट रूप से लगातार होते हैं, अगले कार्य की प्रारंभ तिथि डिफ़ॉल्ट रूप से पिछले कार्य की समाप्ति तिथि होती है।
कार्य शीर्षक और उसका मेटाडेटा कोलन (:) से अलग किए जाते हैं, और मेटाडेटा आइटम अल्पविराम (,) से अलग किए जाते हैं। मान्य टैग में active, done, crit और milestone शामिल हैं। टैग वैकल्पिक हैं, लेकिन यदि उपयोग किए जाएँ, तो उन्हें सबसे पहले रखा जाना चाहिए। टैग संसाधित करने के बाद, शेष मेटाडेटा आइटम इस प्रकार समझाए गए हैं:
- यदि एक ही आइटम निर्दिष्ट किया गया है, तो यह तय करेगा कि कार्य कब समाप्त होगा। यह एक विशिष्ट तिथि या समय, या एक अवधि हो सकती है। यदि अवधि निर्दिष्ट की गई है, तो इसे कार्य की प्रारंभ तिथि में जोड़ा जाएगा ताकि कार्य की समाप्ति तिथि निर्धारित हो सके, साथ ही किसी भी बहिष्करण को ध्यान में रखा जाएगा।
- यदि दो आइटम निर्दिष्ट किए गए हैं, तो बाद वाले आइटम की व्याख्या पिछले मामले की तरह की जाती है। पहला आइटम एक स्पष्ट प्रारंभ तिथि या समय निर्दिष्ट कर सकता है (जिसका फ़ॉर्मेट dateFormat द्वारा निर्धारित होता है), या after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] का उपयोग करके किसी अन्य कार्य का संदर्भ दे सकता है। बाद वाले मामले में, कार्य की प्रारंभ तिथि किसी भी संदर्भित कार्य की सबसे देर की समाप्ति तिथि के आधार पर सेट की जाएगी।
- यदि तीन आइटम निर्दिष्ट किए गए हैं, तो अंतिम दो आइटम की व्याख्या पिछले मामलों की तरह की जाएगी। पहला आइटम कार्य की ID दर्शाएगा, जिसे later <taskID> सिंटैक्स का उपयोग करके संदर्भित किया जा सकता है।
| मेटाडेटा सिंटैक्स | प्रारंभ तिथि | समाप्ति तिथि | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | dateformat का उपयोग करके व्याख्या की गई startdate | dateformat का उपयोग करके व्याख्या की गई endDate | taskID |
| <taskID>, <startDate>, <length> | dateformat का उपयोग करके व्याख्या की गई startdate | प्रारंभ तिथि + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | पहले निर्दिष्ट कार्य otherTaskID की समाप्ति तिथि | dateformat का उपयोग करके व्याख्या की गई endDate | taskID |
| <taskID>, after <otherTaskId>, <length> | पहले निर्दिष्ट कार्य otherTaskID की समाप्ति तिथि | प्रारंभ तिथि + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | dateformat का उपयोग करके व्याख्या की गई startdate | पहले निर्दिष्ट कार्य otherTaskID की प्रारंभ तिथि | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | पहले निर्दिष्ट कार्य otherTaskID की समाप्ति तिथि | पहले निर्दिष्ट कार्य otherTaskID की प्रारंभ तिथि | taskID |
| <startDate>, <endDate> | dateformat का उपयोग करके व्याख्या की गई startdate | 使用 dateformat 解释的 enddate | लागू नहीं |
| <startDate>, <length> | dateformat का उपयोग करके व्याख्या की गई startdate | प्रारंभ तिथि + length | लागू नहीं |
| after <otherTaskID>, <endDate> | पहले निर्दिष्ट कार्य otherTaskID की समाप्ति तिथि | 使用 dateformat 解释的 enddate | लागू नहीं |
| after <otherTaskID>, <length> | पहले निर्दिष्ट कार्य otherTaskID की समाप्ति तिथि | प्रारंभ तिथि + length | लागू नहीं |
| <startDate>, until <otherTaskId> | dateformat का उपयोग करके व्याख्या की गई startdate | पहले निर्दिष्ट कार्य otherTaskID की प्रारंभ तिथि | लागू नहीं |
| after <otherTaskId>, until <otherTaskId> | पहले निर्दिष्ट कार्य otherTaskID की समाप्ति तिथि | पहले निर्दिष्ट कार्य otherTaskID की प्रारंभ तिथि | लागू नहीं |
| <endDate> | पिछले कार्य की समाप्ति तिथि | 使用 dateformat 解释的 enddate | लागू नहीं |
| <length> | पिछले कार्य की समाप्ति तिथि | प्रारंभ तिथि + length | लागू नहीं |
| until <otherTaskId> | पिछले कार्य की समाप्ति तिथि | पहले निर्दिष्ट कार्य otherTaskID की प्रारंभ तिथि | लागू नहीं |
अवधि फ़ॉर्मेट
<length> निर्दिष्ट करते समय, एक संख्या का उपयोग करें, उसके बाद निम्नलिखित इकाई प्रत्ययों में से एक:
| इकाई | प्रत्यय | उदाहरण |
|---|---|---|
| मिलीसेकंड | ms | 50ms |
| सेकंड | s | 30s |
| मिनट | m | 30m |
| घंटा | h | 4h |
| दिन | d | 7d |
| सप्ताह | w | 3w |
| महीना | m | 2m |
| वर्ष | y | 1y |
दशमलव मान भी समर्थित हैं (उदाहरण के लिए, 2.5d)। अमान्य अवधि टोकन (उदाहरण के लिए, 3dX) अनदेखे कर दिए जाएंगे, और कार्य की डिफ़ॉल्ट अवधि शून्य होगी।
सरलता के लिए, तालिका में after सिंटैक्स का उपयोग करके सूचीबद्ध कई कार्य नहीं दिखाए गए हैं। निम्नलिखित उदाहरण है:
कॉपी करें
एम्बेड
gantt
apple :a, 2026-07-20, 1w
banana :crit, b, 2026-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2026-07-20, until b c
शीर्षक
title एक वैकल्पिक स्ट्रिंग है, जो गैंट चार्ट के शीर्ष पर प्रदर्शित होती है और पूरे चार्ट का वर्णन करती है।
बहिष्करण
excludes एक वैकल्पिक प्रॉपर्टी है, जो विशिष्ट तिथि (YYYY-MM-DD फ़ॉर्मेट), सप्ताह का दिन (जैसे "sunday") या "weekends" स्वीकार करती है, लेकिन "weekdays" शब्द का उपयोग नहीं किया जा सकता। ये तिथियाँ चार्ट पर चिह्नित की जाएंगी और कार्य की अवधि गणना से बहिष्कृत कर दी जाएंगी। इसका अर्थ है कि यदि कार्य की अवधि के दौरान बहिष्कृत तिथि आती है, तो बहिष्कृत दिनों को कार्य की समाप्ति समय में जोड़ा जाएगा, ताकि कार्य की अवधि कोड में निर्दिष्ट अवधि के अनुरूप रहे।
सप्ताहांत
सप्ताहांत बहिष्कृत करते समय, सप्ताहांत को शुक्रवार और शनिवार, या शनिवार और रविवार पर सेट किया जा सकता है। डिफ़ॉल्ट रूप से, सप्ताहांत शनिवार और रविवार होता है। सप्ताहांत का प्रारंभिक दिन परिभाषित करने के लिए, आप एक नई पंक्ति में वैकल्पिक प्रॉपर्टी weekend जोड़ सकते हैं, उसके बाद friday या saturday लिखें।
कॉपी करें
एम्बेड
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat Букмекерлар-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2026-01-01, 30d
Another task :after a1, 20d
सेक्शन घोषणा
आप चार्ट को विभिन्न सेक्शनों में विभाजित करके प्रोजेक्ट के भिन्न भागों (जैसे डेवलपमेंट और दस्तावेज़ीकरण) को अलग कर सकते हैं।
इसके लिए, एक पंक्ति के आरंभ में section सिंटैक्स का उपयोग करें और उसे नाम दें। कृपया ध्यान दें कि पूरे चार्ट के शीर्षक के विपरीत, यह नाम अनिवार्य है।
माइलस्टोन
आप चार्ट में माइलस्टोन जोड़ सकते हैं। माइलस्टोन कार्यों से भिन्न होते हैं, क्योंकि वे किसी विशिष्ट समय का प्रतिनिधित्व करते हैं और milestone सिंटैक्स द्वारा पहचाने जाते हैं। निम्नलिखित माइलस्टोन का उपयोग करने का उदाहरण है: माइलस्टोन की सटीक स्थिति माइलस्टोन की प्रारंभ तिथि और कार्य की अवधि द्वारा निर्धारित की जाती है, जैसा कि नीचे दिखाया गया है:
कॉपी करें
एम्बेड
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49, 2m
Task A : 10m
Task B : 5m
Final milestone : milestone, m2, 18:08, 4m
ऊर्ध्वाधर मार्कर
vert गैंट चार्ट में ऊर्ध्वाधर रेखाएँ जोड़ने को दर्शाता है, ताकि महत्वपूर्ण तिथियों जैसे समय सीमा, महत्वपूर्ण ईवेंट या चेकपॉइंट को आसानी से हाइलाइट किया जा सके। ये मार्कर पूरे चार्ट तक फैलते हैं और आपके द्वारा प्रदान की गई तिथि के अनुसार स्थित होते हैं। माइलस्टोन के विपरीत, ऊर्ध्वाधर मार्कर एक पंक्ति नहीं लेते। वे विशुद्ध रूप से दृश्य संदर्भ बिंदु हैं, जो टाइमलाइन को विभाजित करने में मदद करते हैं और महत्वपूर्ण क्षणों को अधिक आसानी से पहचानने योग्य बनाते हैं।
कॉपी करें
एम्बेड
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m
तिथि सेट करें
dateFormat गैंट चार्ट तत्वों का तिथि इनपुट फ़ॉर्मेट परिभाषित करता है, axisFormat चार्ट रेंडर करते समय तिथि आउटपुट फ़ॉर्मेट को परिभाषित करता है।
इनपुट तिथि फ़ॉर्मेट
डिफ़ॉल्ट इनपुट तिथि फ़ॉर्मेट YYYY-MM-DD है, आप dateFormat अनुकूलित कर सकते हैं।
कॉपी करें
एम्बेड
dateFormat YYYY-MM-DD
निम्नलिखित फ़ॉर्मेट विकल्प समर्थित हैं:
| 输入 | उदाहरण | विवरण |
|---|---|---|
| YYYY | 2026 | 4 अंकों वाला वर्ष |
| YY | 26 | 2 अंकों वाला वर्ष |
| Q | 1..4 | तिमाही संख्या |
| M MM | 1..12 | महीने की संख्या |
| D DD | 1..31 | महीने का एक दिन |
| Do | 1st..31st | क्रमसूचक सहित महीने का दिन |
| DDD DDDD | 1..365 | वर्ष का एक दिन |
| X | 1410715640.579 | Unix टाइमस्टैम्प |
| x | 1410715640579 | Unix मिलीसेकंड टाइमस्टैम्प |
| H HH | 0..23 | 24 घंटे का समय |
| h hh | 1..12 | 12 घंटे का समय, जो a A के साथ उपयोग किया जाता है |
| a A | am pm | पूर्वाह्न या अपराह्न |
| m mm | 0..59 | मिनट |
| s ss | 0..59 | सेकंड |
| S | 0..9 | एक सेकंड का दसवाँ हिस्सा |
| SS | 0..99 | एक सेकंड का सौवाँ हिस्सा |
| SSS | 0..999 | एक सेकंड का हज़ारवाँ हिस्सा |
| Z ZZ | +12:00 | UTC के सापेक्ष ऑफ़सेट, फ़ॉर्मेट +-HH:mm, +-HHmm या Z |
अक्ष का आउटपुट तिथि फ़ॉर्मेट
डिफ़ॉल्ट आउटपुट तिथि फ़ॉर्मेट YYYY-MM-DD है। आप axisFormat अनुकूलित कर सकते हैं, उदाहरण के लिए 2026-Q1 2026 की पहली तिमाही दर्शाता है।
कॉपी करें
एम्बेड
axisFormat %Y-%m-%d
निम्नलिखित फ़ॉर्मेट स्ट्रिंग्स समर्थित हैं:
| फ़ॉर्मेट,परिभाषा | |
|---|---|
| %a | सप्ताह के दिन का संक्षिप्त नाम |
| %A | सप्ताह के दिन का पूरा नाम |
| %b | महीने का संक्षिप्त नाम |
| %B | महीने का पूरा नाम |
| %c | स्थानीयकृत तिथि और समय |
| %d | तिथि, दशमलव संख्या [01,31] |
| %e | तिथि, स्पेस से पैड की गई दशमलव संख्या [1,31], %_d के समान |
| %H | घंटा (24-घंटे प्रारूप), दशमलव संख्या [00,23] |
| %I | घंटा (12-घंटे प्रारूप), दशमलव संख्या [01,12] |
| %j | वर्ष का दिन, दशमलव संख्या [001,366] |
| %m | महीना, दशमलव संख्या [01,12] |
| %M | मिनट, दशमलव संख्या [00,59] |
| %L | मिलीसेकंड, दशमलव संख्या [000, 999] |
| %p | पूर्वाह्न या अपराह्न |
| %S | सेकंड, दशमलव संख्या [00,59] |
| %U | वर्ष का सप्ताह (रविवार को सप्ताह का पहला दिन मानते हुए), दशमलव संख्या [00,53] |
| %w | सप्ताह का दिन, स्पेस से पैड की गई दशमलव संख्या [0,6], जहाँ 0 रविवार दर्शाता है |
| %W | वर्ष का सप्ताह (सोमवार को सप्ताह का पहला दिन मानते हुए), दशमलव संख्या [00,53] |
| %x | स्थानीयकृत तिथि प्रस्तुति, जैसे: 2026-09-18 |
| %X | स्थानीयकृत समय प्रस्तुति, जैसे: 14:30:00 |
| %y | बिना सदी वाला वर्ष, दशमलव संख्या [00,99], उदाहरण के लिए 26 2026 दर्शाता है |
| %Y | सदी सहित वर्ष, दशमलव संख्या |
| %Z | समय क्षेत्र नाम का संक्षिप्त रूप, उदाहरण "-0700" |
| %% | एस्केप अक्षर, जिसका उपयोग प्रतिशत चिह्न % को ही प्रदर्शित करने के लिए किया जाता है |
अक्ष टिक
डिफ़ॉल्ट आउटपुट टिक स्वचालित है। आप tickInterval अनुकूलित कर सकते हैं, उदाहरण के लिए 1day या 1week।
कॉपी करें
एम्बेड
tickInterval 1day
पैटर्न है
कॉपी करें
एम्बेड
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
सप्ताह-आधारित tickInterval डिफ़ॉल्ट रूप से रविवार से शुरू होता है। यदि आप tickInterval के प्रारंभ का अन्य कार्यदिवस निर्दिष्ट करना चाहते हैं, तो weekday विकल्प का उपयोग करें, कोड इस प्रकार है:
कॉपी करें
एम्बेड
gantt
tickInterval 1week
weekday monday
कॉम्पैक्ट मोड आउटपुट
कॉम्पैक्ट मोड आपको एक ही पंक्ति में कई कार्य दिखाने की अनुमति देता है। गैंट चार्ट के लिए कॉम्पैक्ट मोड सक्षम करने के लिए, आरंभ में दिए गए YAML सेटिंग से ग्राफ़ का प्रदर्शन मोड नियंत्रित करें।
कॉपी करें
एम्बेड
---
displayMode: compact
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2026-01-01, 30d
Another task :a2, 2026-01-20, 25d
Another one :a3, 2026-02-10, 20d
गैंट चार्ट में टिप्पणी दर्ज की जा सकती है, जिसे पार्सर अनदेखा कर देगा। टिप्पणी को अलग पंक्ति में होना चाहिए और %% (दोहरे प्रतिशत चिह्न) से शुरू होना चाहिए। टिप्पणी शुरू होने के बाद से अगले न्यूलाइन अक्षर तक का कोई भी टेक्स्ट, किसी भी चार्ट सिंटैक्स सहित, टिप्पणी माना जाएगा।
कॉपी करें
एम्बेड
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
आज का मार्कर
आप वर्तमान तिथि के मार्कर को स्टाइल कर सकते हैं या उस मार्कर को छिपा सकते हैं। स्टाइल सेट करने के लिए, todayMarker कुंजी में एक मान जोड़ें।
कॉपी करें
एम्बेड
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
मार्कर छिपाने के लिए, todayMarker को off पर सेट करें।
कॉपी करें
एम्बेड
todayMarker off
उदाहरण
बार गैंट चार्ट
कॉपी करें
एम्बेड
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
टाइमलाइन (टिप्पणी, CSS और फ्रंटमैटर कॉन्फ़िगरेशन सहित)
कॉपी करें
एम्बेड
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
# theme: forest
# themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers:
#item36 { fill: CadetBlue }
// Custom marker workaround CSS from forum (below)
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
---
gantt
title Timeline - Gantt Sampler
dateFormat YYYY
axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade
section Issue19062
71 : item71, 1900, 1930
section Issue19401
36 : item36, 1913, 1935
section Issue1300
94 : item94, 1910, 1915
5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
