Tsart ng Gantt
Ang Gantt chart ay isang uri ng bar chart na ginagamit upang ipakita ang progress ng proyekto at ang oras na kinakailangan upang makumpleto ang isang proyekto. Ipinapakita ng Gantt chart ang bilang ng araw sa pagitan ng start date at end date ng terminal na elemento at summary na elemento ng proyekto.
Mga dapat tandaan
Itinatala ng Gantt chart ang bawat nakaplanong gawain bilang isang tuloy-tuloy na bar na umaabot mula kaliwa pakanan. Kinakatawan ng x-axis ang oras, at itinatala ng y-axis ang iba't ibang gawain at ang pagkakasunod-sunod ng pagkumpleto nito.
Higit sa lahat, kapag ang petsa, bilang ng araw, o partikular na set ng petsa ng isang gawain ay ibinukod, iaakma ng Gantt chart ang mga pagbabagong ito sa pamamagitan ng pagpapahaba nang parehong bilang ng araw sa kanan, sa halip na gumawa ng gap sa loob ng gawain .
Kopyahin
Embed
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
Gayunpaman, kung ang ibinukod na petsa ay nasa pagitan ng dalawang gawaing nagsisimula nang sunod-sunod, ang ibinukod na petsa ay lalaktawan at iiwan na blangko sa chart, at pagkatapos ay magsisimula ang gawain pagkatapos ng ibinukod na petsa. Tulad ng ipinapakita sa ibaba:
Kopyahin
Embed
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
Kapaki-pakinabang ang Gantt chart para sa pagsubaybay sa oras na kinakailangan upang makumpleto ang isang proyekto, ngunit sa ilang pagsasaayos, maaari rin itong gamitin upang biswal na kumatawan sa "non-working day".
Syntax
Kopyahin
Embed
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
Bilang default, ang mga gawain ay tuloy-tuloy, ang default na start date ng susunod na gawain ay ang end date ng naunang gawain.
Ang pamagat ng gawain at ang metadata nito ay pinaghihiwalay ng colon (:), at ang mga metadata item ay pinaghihiwalay ng kuwit (,). Kabilang sa mga valid na label ang active, done, crit, at milestone. Ang label ay opsyonal, ngunit kung gagamitin, dapat ilagay sa pinakauna. Pagkatapos maproseso ang label, ang natitirang metadata item ay ipinaliwanag tulad ng sumusunod:
- Kung may isang item na tinukoy, tutukuyin nito kung kailan nagtatapos ang gawain. Maaari itong maging partikular na petsa o oras, o duration. Kung may tinukoy na duration, idadagdag ito sa start date ng gawain, upang matukoy ang end date ng gawain, na isinasaalang-alang ang anumang pagbubukod.
- Kung may dalawang item na tinukoy, ang huling item ay ipapaliwanag sa parehong paraan tulad ng naunang kaso. Ang unang item ay maaaring tumukoy ng tahasang start date o oras (ang format ay tinutukoy ng dateFormat), o sa pamamagitan ng after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] na pag-reference sa ibang gawain. Sa huling kaso, ang start date ng gawain ay itatakda batay sa pinakahuling end date ng anumang na-reference na gawain.
- Kung may tatlong item na tinukoy, ang huling dalawang item ay ipapaliwanag ayon sa naunang kaso. Ang unang item ay kumakatawan sa ID ng gawain, maaaring gamitin ang later <taskID> syntax ng pag-reference.
| Syntax ng metadata | Start date | End date | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate na binibigyang-kahulugan gamit ang dateformat | endDate na binibigyang-kahulugan gamit ang dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate na binibigyang-kahulugan gamit ang dateformat | Start date + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | End date ng naunang tinukoy na gawain na otherTaskID | endDate na binibigyang-kahulugan gamit ang dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | End date ng naunang tinukoy na gawain na otherTaskID | Start date + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate na binibigyang-kahulugan gamit ang dateformat | Start date ng naunang tinukoy na gawain na otherTaskID | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | End date ng naunang tinukoy na gawain na otherTaskID | Start date ng naunang tinukoy na gawain na otherTaskID | taskID |
| <startDate>, <endDate> | startdate na binibigyang-kahulugan gamit ang dateformat | 使用 dateformat 解释的 enddate | Hindi naaangkop |
| <startDate>, <length> | startdate na binibigyang-kahulugan gamit ang dateformat | Start date + length | Hindi naaangkop |
| after <otherTaskID>, <endDate> | End date ng naunang tinukoy na gawain na otherTaskID | 使用 dateformat 解释的 enddate | Hindi naaangkop |
| after <otherTaskID>, <length> | End date ng naunang tinukoy na gawain na otherTaskID | Start date + length | Hindi naaangkop |
| <startDate>, until <otherTaskId> | startdate na binibigyang-kahulugan gamit ang dateformat | Start date ng naunang tinukoy na gawain na otherTaskID | Hindi naaangkop |
| after <otherTaskId>, until <otherTaskId> | End date ng naunang tinukoy na gawain na otherTaskID | Start date ng naunang tinukoy na gawain na otherTaskID | Hindi naaangkop |
| <endDate> | End date ng naunang gawain | 使用 dateformat 解释的 enddate | Hindi naaangkop |
| <length> | End date ng naunang gawain | Start date + length | Hindi naaangkop |
| until <otherTaskId> | End date ng naunang gawain | Start date ng naunang tinukoy na gawain na otherTaskID | Hindi naaangkop |
Format ng duration
Kapag tumutukoy ng <length>, gumamit ng isang numero, na sinusundan ng isa sa mga sumusunod na suffix ng unit:
| Unit | Suffix | Halimbawa |
|---|---|---|
| Millisecond | ms | 50ms |
| Second | s | 30s |
| Minute | m | 30m |
| Hour | h | 4h |
| Araw | d | 7d |
| Linggo | w | 3w |
| Buwan | m | 2m |
| Taon | y | 1y |
Sinusuportahan din ang decimal value (halimbawa, 2.5d). Ang hindi valid na duration marker (halimbawa, 3dX) ay hindi papansinin, at ang gawain ay magkakaroon ng default na duration na zero.
Para sa pagiging simple, hindi ipinapakita ng talahanayang ito ang maraming gawain na nakalista gamit ang after syntax. Ang sumusunod ay mga halimbawa:
Kopyahin
Embed
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
Pamagat
Ang title ay isang opsyonal na string, na ipinapakita sa tuktok ng Gantt chart, na ginagamit upang ilarawan ang buong chart.
Exclude
Ang excludes ay opsyonal na attribute, tumatanggap ng partikular na petsa (format na YYYY-MM-DD), araw ng linggo (halimbawa "sunday"), o "weekends", ngunit hindi maaaring gamitin ang salitang "weekdays". Ang mga petsang ito ay mamarkahan sa chart, at ibubukod sa pagkalkula ng duration ng gawain. Ibig sabihin, kung ang panahon ng gawain ay naglalaman ng ibinukod na petsa, ang ibinukod na bilang ng araw ay idadagdag sa end time ng gawain, upang matiyak na ang duration ng gawain ay tumutugma sa tinukoy sa code.
Weekend
Kapag nagbubukod ng weekend, maaaring itakda ang weekend sa Biyernes at Sabado, o Sabado at Linggo. Bilang default, ang weekend ay Sabado at Linggo. Upang tukuyin ang araw ng simula ng weekend, maaari kang magdagdag ng opsyonal na attribute na weekend sa bagong linya, na sinusundan ng friday o saturday.
Kopyahin
Embed
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
Declaration ng section
Maaari mong hatiin ang chart sa iba't ibang section, upang paghiwalayin ang iba't ibang bahagi ng proyekto (halimbawa, development at dokumentasyon).
Para dito, gamitin ang section syntax sa simula ng linya at pangalanan ito. Tandaan, hindi tulad ng pamagat ng buong chart, ang pangalang ito ay mandatory.
Milestone
Maaari kang magdagdag ng milestone sa chart. Ang milestone ay naiiba sa gawain, dahil kumakatawan ito sa isang partikular na oras, at kinikilala ng milestone syntax. Ang sumusunod ay halimbawa ng paggamit ng milestone: ang eksaktong posisyon ng milestone ay tinutukoy ng start date ng milestone at ng duration ng gawain, tulad ng ipinapakita sa ibaba:
Kopyahin
Embed
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
Vertical marker
Ang vert ay nagsasaad ng pagdaragdag ng patayong linya sa Gantt chart, upang madaling i-highlight ang mahahalagang petsa, tulad ng deadline, mahalagang event, o checkpoint. Ang mga marker na ito ay umaabot sa buong chart, at nakaposisyon batay sa petsang ibinibigay mo. Hindi tulad ng milestone, ang vertical marker ay hindi sumasakop ng isang linya. Sila ay purong visual reference point, tumutulong sa paghahati ng timeline, upang mas madaling makilala ang mahahalagang sandali.
Kopyahin
Embed
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
Itakda ang petsa
Ang dateFormat ay tumutukoy sa input date format ng elemento ng Gantt chart, ang axisFormat ay tumutukoy sa output date format kapag ini-render ang chart.
Input date format
Ang default na input date format ay YYYY-MM-DD, maaari mong i-customize ang dateFormat.
Kopyahin
Embed
dateFormat YYYY-MM-DD
Sinusuportahan ang sumusunod na format option:
| 输入 | Halimbawa | Paglalarawan |
|---|---|---|
| YYYY | 2026 | 4-digit na taon |
| YY | 26 | 2-digit na taon |
| Q | 1..4 | Numero ng quarter |
| M MM | 1..12 | Numero ng buwan |
| D DD | 1..31 | Araw ng buwan |
| Do | 1st..31st | Ordinal na araw ng buwan |
| DDD DDDD | 1..365 | Araw ng taon |
| X | 1410715640.579 | Unix timestamp |
| x | 1410715640579 | Unix millisecond timestamp |
| H HH | 0..23 | 24-oras na oras |
| h hh | 1..12 | 12-oras na oras, ginagamit kasama ng a A |
| a A | am pm | AM o PM |
| m mm | 0..59 | Minute |
| s ss | 0..59 | Segundo |
| S | 0..9 | Ikasampung bahagi ng segundo |
| SS | 0..99 | Ikasandaang bahagi ng segundo |
| SSS | 0..999 | Ikasanglibong bahagi ng segundo |
| Z ZZ | +12:00 | Offset mula sa UTC, ang format ay +-HH:mm, +-HHmm, o Z |
Output date format ng coordinate axis
Ang default na output date format ay YYYY-MM-DD. Maaari mong i-customize ang axisFormat, halimbawa 2026-Q1 ay kumakatawan sa unang quarter ng 2026.
Kopyahin
Embed
axisFormat %Y-%m-%d
Sinusuportahan ang sumusunod na format string:
| Format,Depinisyon | |
|---|---|
| %a | Pinaikling pangalan ng araw ng linggo |
| %A | Buong pangalan ng araw ng linggo |
| %b | Pinaikling pangalan ng buwan |
| %B | Buong pangalan ng buwan |
| %c | Localized na petsa at oras |
| %d | Petsa, decimal na numero [01,31] |
| %e | Petsa, decimal na numero na pinuno ng espasyo [1,31], katumbas ng %_d |
| %H | Oras (24-oras na format), decimal na numero [00,23] |
| %I | Oras (12-oras na format), decimal na numero [01,12] |
| %j | Araw ng taon, decimal na numero [001,366] |
| %m | Buwan, decimal na numero [01,12] |
| %M | Minute, decimal na numero [00,59] |
| %L | Millisecond, decimal na numero [000, 999] |
| %p | AM o PM |
| %S | Segundo, decimal na numero [00,59] |
| %U | Linggo ng taon (na may Linggo bilang unang araw ng linggo), decimal na numero [00,53] |
| %w | Araw ng linggo, decimal na numero na pinuno ng espasyo [0,6], kung saan ang 0 ay kumakatawan sa Linggo |
| %W | Linggo ng taon (na may Lunes bilang unang araw ng linggo), decimal na numero [00,53] |
| %x | Localized na representasyon ng petsa, tulad ng: 2026-09-18 |
| %X | Localized na representasyon ng oras, tulad ng: 14:30:00 |
| %y | Taon na walang siglo, decimal na numero [00,99], halimbawa 26 ay kumakatawan sa 2026 |
| %Y | Taon na may siglo, decimal na numero |
| %Z | Pinaikling pangalan ng timezone, halimbawa "-0700" |
| %% | Escape character, ginagamit upang ipakita ang percent sign % mismo |
Axis tick
Ang default na output tick ay automatic. Maaari mong i-customize ang tickInterval, halimbawa 1day o 1week.
Kopyahin
Embed
tickInterval 1day
Ang mode ay
Kopyahin
Embed
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
Ang week-based na tickInterval ay nagsisimula sa Linggo bilang default. Kung nais mong tukuyin ang ibang weekday kung saan magsisimula ang tickInterval, gamitin ang weekday option, ang code ay ang sumusunod:
Kopyahin
Embed
gantt
tickInterval 1week
weekday monday
Compact mode output
Ang compact mode ay nagpapahintulot sa iyo na magpakita ng maraming gawain sa parehong linya. Kinokontrol ng YAML setting sa harap ang display mode ng graph, upang paganahin ang compact mode para sa Gantt chart.
Kopyahin
Embed
---
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
Maaari kang maglagay ng komento sa Gantt chart, at hindi papansinin ng parser ang komento. Ang komento ay kailangang sumakop sa isang buong linya, at dapat magsimula sa %% (double percent sign). Anumang teksto mula sa simula ng komento hanggang sa susunod na line break ay ituturing na komento, kabilang ang anumang chart syntax.
Kopyahin
Embed
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
Marker ngayong araw
Maaari mong itakda ang estilo ng marker para sa kasalukuyang petsa o itago ang marker. Upang itakda ang estilo, magdagdag ng value sa todayMarker key.
Kopyahin
Embed
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Upang itago ang marker, itakda ang todayMarker sa off.
Kopyahin
Embed
todayMarker off
Halimbawa
Bar Gantt chart
Kopyahin
Embed
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
Timeline (naglalaman ng komento, CSS, at frontmatter configuration)
Kopyahin
Embed
---
# 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
