תרשים גאנט
תרשים גאנט הוא סוג של תרשים עמודות המשמש להצגת התקדמות הפרויקט והזמן הנדרש להשלמת פרויקט. תרשים גאנט מציג את מספר הימים בין תאריכי ההתחלה לסיום של רכיבי קצה ורכיבי סיכום בפרויקט.
הערות
תרשים גאנט מתעד כל משימה מתוכננת כפס רציף הנמשך משמאל לימין. ציר ה-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> | startdate המפורש באמצעות dateformat | endDate המפורש באמצעות dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate המפורש באמצעות dateformat | תאריך התחלה + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | תאריך הסיום של המשימה otherTaskID שצוינה קודם לכן | endDate המפורש באמצעות dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | תאריך הסיום של המשימה otherTaskID שצוינה קודם לכן | תאריך התחלה + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate המפורש באמצעות dateformat | תאריך ההתחלה של המשימה otherTaskID שצוינה קודם לכן | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | תאריך הסיום של המשימה otherTaskID שצוינה קודם לכן | תאריך ההתחלה של המשימה otherTaskID שצוינה קודם לכן | taskID |
| <startDate>, <endDate> | startdate המפורש באמצעות dateformat | 使用 dateformat 解释的 enddate | לא רלוונטי |
| <startDate>, <length> | startdate המפורש באמצעות dateformat | תאריך התחלה + length | לא רלוונטי |
| after <otherTaskID>, <endDate> | תאריך הסיום של המשימה otherTaskID שצוינה קודם לכן | 使用 dateformat 解释的 enddate | לא רלוונטי |
| after <otherTaskID>, <length> | תאריך הסיום של המשימה otherTaskID שצוינה קודם לכן | תאריך התחלה + length | לא רלוונטי |
| <startDate>, until <otherTaskId> | startdate המפורש באמצעות dateformat | תאריך ההתחלה של המשימה 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
