Carta Gantt
Carta Gantt ialah sejenis carta bar, digunakan untuk memaparkan kemajuan projek serta masa yang diperlukan untuk menyiapkan sesuatu projek. Carta Gantt menunjukkan bilangan hari antara tarikh mula dan tarikh siap bagi elemen terminal dan elemen ringkasan projek.
Perkara yang perlu diberi perhatian
Carta Gantt merekodkan setiap tugasan yang dirancang sebagai bar berterusan yang memanjang dari kiri ke kanan. Paksi-x mewakili masa, paksi-y merekodkan tugasan berbeza dan susunan penyiapannya.
Lebih penting lagi, apabila tarikh, bilangan hari atau set tarikh tertentu bagi sesuatu tugasan dikecualikan, carta Gantt akan menyesuaikan perubahan ini dengan memanjangkan bilangan hari yang sama ke kanan, bukannya mencipta jurang dalam tugasan.
Salin
Benamkan
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
Walau bagaimanapun, jika tarikh yang dikecualikan berada antara dua tugasan yang bermula berturut-turut, tarikh yang dikecualikan akan dilangkau dan dibiarkan kosong pada carta, kemudian tugasan akan bermula selepas tarikh yang dikecualikan tamat. Seperti yang ditunjukkan di bawah:
Salin
Benamkan
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
Carta Gantt berguna untuk menjejak masa yang diperlukan untuk menyiapkan projek, tetapi dengan beberapa pelarasan, ia juga boleh digunakan untuk mewakili "hari bukan bekerja" secara grafik.
Sintaks
Salin
Benamkan
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
Tugasan secara lalai dijalankan secara berturut-turut; tarikh mula tugasan seterusnya secara lalai ialah tarikh tamat tugasan sebelumnya.
Tajuk tugasan dan metadatanya dipisahkan dengan titik bertindih (:), manakala item metadata dipisahkan dengan koma (,). Label yang sah termasuk active, done, crit dan milestone. Label adalah pilihan, tetapi jika digunakan, mesti diletakkan di hadapan. Selepas label diproses, item metadata yang selebihnya ditafsirkan seperti berikut:
- Jika satu item ditentukan, ia akan menentukan bila tugasan tamat. Ia boleh jadi tarikh atau masa tertentu, atau tempoh masa. Jika tempoh masa ditentukan, ia akan ditambah pada tarikh mula tugasan untuk menentukan tarikh tamat tugasan, sambil mengambil kira sebarang pengecualian.
- Jika dua item ditentukan, item yang terakhir ditafsirkan dengan cara yang sama seperti kes sebelumnya. Item pertama boleh menentukan tarikh atau masa mula yang jelas (format ditentukan oleh dateFormat), atau boleh merujuk tugasan lain melalui after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. Dalam kes terakhir, tarikh mula tugasan akan ditetapkan berdasarkan tarikh tamat terkini tugasan yang dirujuk.
- Jika tiga item ditentukan, dua item terakhir akan ditafsirkan mengikut kes sebelumnya. Item pertama akan mewakili ID tugasan, dan boleh dirujuk menggunakan sintaks later <taskID>.
| Sintaks metadata | Tarikh mula | Tarikh tamat | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate yang ditafsirkan menggunakan dateformat | endDate yang ditafsirkan menggunakan dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate yang ditafsirkan menggunakan dateformat | Tarikh mula + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Tarikh tamat tugasan otherTaskID yang ditentukan sebelum ini | endDate yang ditafsirkan menggunakan dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Tarikh tamat tugasan otherTaskID yang ditentukan sebelum ini | Tarikh mula + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate yang ditafsirkan menggunakan dateformat | Tarikh mula tugasan otherTaskID yang ditentukan sebelum ini | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Tarikh tamat tugasan otherTaskID yang ditentukan sebelum ini | Tarikh mula tugasan otherTaskID yang ditentukan sebelum ini | taskID |
| <startDate>, <endDate> | startdate yang ditafsirkan menggunakan dateformat | 使用 dateformat 解释的 enddate | Tidak berkenaan |
| <startDate>, <length> | startdate yang ditafsirkan menggunakan dateformat | Tarikh mula + length | Tidak berkenaan |
| after <otherTaskID>, <endDate> | Tarikh tamat tugasan otherTaskID yang ditentukan sebelum ini | 使用 dateformat 解释的 enddate | Tidak berkenaan |
| after <otherTaskID>, <length> | Tarikh tamat tugasan otherTaskID yang ditentukan sebelum ini | Tarikh mula + length | Tidak berkenaan |
| <startDate>, until <otherTaskId> | startdate yang ditafsirkan menggunakan dateformat | Tarikh mula tugasan otherTaskID yang ditentukan sebelum ini | Tidak berkenaan |
| after <otherTaskId>, until <otherTaskId> | Tarikh tamat tugasan otherTaskID yang ditentukan sebelum ini | Tarikh mula tugasan otherTaskID yang ditentukan sebelum ini | Tidak berkenaan |
| <endDate> | Tarikh tamat tugasan sebelumnya | 使用 dateformat 解释的 enddate | Tidak berkenaan |
| <length> | Tarikh tamat tugasan sebelumnya | Tarikh mula + length | Tidak berkenaan |
| until <otherTaskId> | Tarikh tamat tugasan sebelumnya | Tarikh mula tugasan otherTaskID yang ditentukan sebelum ini | Tidak berkenaan |
Format tempoh masa
Semasa menentukan <length>, gunakan satu nombor, diikuti dengan salah satu akhiran unit berikut:
| Unit | Akhiran | Contoh |
|---|---|---|
| Milisaat | ms | 50ms |
| Saat | s | 30s |
| Minit | m | 30m |
| Jam | h | 4h |
| Hari | d | 7d |
| Minggu | w | 3w |
| Bulan | m | 2m |
| Tahun | y | 1y |
Nilai perpuluhan juga disokong (contohnya, 2.5d). Penanda tempoh masa yang tidak sah (contohnya, 3dX) akan diabaikan, dan tugasan akan menggunakan tempoh masa lalai sifar.
Untuk memudahkan, jadual ini tidak menunjukkan berbilang tugasan yang disenaraikan menggunakan sintaks after. Berikut ialah contoh:
Salin
Benamkan
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
Tajuk
title ialah rentetan pilihan yang dipaparkan di bahagian atas carta Gantt, digunakan untuk menerangkan keseluruhan carta.
Pengecualian
excludes ialah sifat pilihan; ia menerima tarikh tertentu (format YYYY-MM-DD), hari dalam minggu (contohnya "sunday") atau "weekends", tetapi perkataan "weekdays" tidak boleh digunakan. Tarikh ini akan ditandakan pada carta, dan dikecualikan daripada pengiraan tempoh masa tugasan. Ini bermaksud, jika tempoh tugasan merangkumi tarikh yang dikecualikan, bilangan hari yang dikecualikan akan ditambah pada masa tamat tugasan, untuk memastikan tempoh masa tugasan selaras dengan yang ditentukan dalam kod.
Hujung minggu
Semasa mengecualikan hujung minggu, hujung minggu boleh ditetapkan sebagai Jumaat dan Sabtu, atau Sabtu dan Ahad. Secara lalai, hujung minggu ialah Sabtu dan Ahad. Untuk mentakrifkan hari mula hujung minggu, anda boleh menambah sifat pilihan weekend pada baris baharu, diikuti dengan friday atau saturday.
Salin
Benamkan
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
Pengisytiharan bahagian
Anda boleh membahagikan carta kepada bahagian-bahagian, memisahkan bahagian berbeza projek (contohnya pembangunan dan dokumentasi).
Untuk ini, sila gunakan sintaks section di permulaan baris dan namakannya. Sila ambil perhatian bahawa, berbeza daripada tajuk keseluruhan carta, nama ini adalah wajib.
Peristiwa penting
Anda boleh menambah peristiwa penting pada carta. Peristiwa penting berbeza daripada tugasan kerana ia mewakili masa tertentu, dan dikenal pasti oleh sintaks milestone. Berikut ialah contoh penggunaan peristiwa penting: kedudukan tepat peristiwa penting ditentukan oleh tarikh mula peristiwa penting dan tempoh masa tugasan, seperti yang ditunjukkan di bawah:
Salin
Benamkan
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
Penanda menegak
vert bermaksud menambah garisan menegak dalam carta Gantt, supaya tarikh penting seperti tarikh akhir, peristiwa penting atau titik pemeriksaan dapat disorot dengan mudah. Penanda ini memanjang ke seluruh carta, dan diletakkan berdasarkan tarikh yang anda berikan. Berbeza daripada peristiwa penting, penanda menegak tidak mengambil satu baris. Ia semata-mata titik rujukan visual, membantu menguraikan garis masa, menjadikan detik penting lebih mudah dikenal pasti.
Salin
Benamkan
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
Tetapkan tarikh
dateFormat mentakrifkan format input tarikh elemen carta Gantt; axisFormat mentakrifkan format output tarikh semasa memaparkan carta.
Format tarikh input
Format tarikh input lalai ialah YYYY-MM-DD; anda boleh menyesuaikan dateFormat.
Salin
Benamkan
dateFormat YYYY-MM-DD
Pilihan format berikut disokong:
| 输入 | Contoh | Penerangan |
|---|---|---|
| YYYY | 2026 | Tahun 4 digit |
| YY | 26 | Tahun 2 digit |
| Q | 1..4 | Nombor suku tahun |
| M MM | 1..12 | Nombor bulan |
| D DD | 1..31 | Hari dalam sebulan |
| Do | 1st..31st | Hari dalam sebulan dengan nombor ordinal |
| DDD DDDD | 1..365 | Hari dalam setahun |
| X | 1410715640.579 | Cap masa Unix |
| x | 1410715640579 | Cap masa milisaat Unix |
| H HH | 0..23 | Masa 24 jam |
| h hh | 1..12 | Masa 12 jam, digunakan bersama a A |
| a A | am pm | Pagi atau petang |
| m mm | 0..59 | Minit |
| s ss | 0..59 | Bilangan saat |
| S | 0..9 | Persepuluh saat |
| SS | 0..99 | Perseratus saat |
| SSS | 0..999 | Perseribu saat |
| Z ZZ | +12:00 | Anjakan berbanding UTC, formatnya +-HH:mm, +-HHmm atau Z |
Format tarikh output paksi
Format tarikh output lalai ialah YYYY-MM-DD. Anda boleh menyesuaikan axisFormat, contohnya 2026-Q1 bermaksud suku pertama tahun 2026.
Salin
Benamkan
axisFormat %Y-%m-%d
Rentetan format berikut disokong:
| Format,Definisi | |
|---|---|
| %a | Nama singkatan hari dalam minggu |
| %A | Nama penuh hari dalam minggu |
| %b | Nama singkatan bulan |
| %B | Nama penuh bulan |
| %c | Tarikh dan masa setempat |
| %d | Tarikh, nombor perpuluhan [01,31] |
| %e | Tarikh, nombor perpuluhan berlapik ruang [1,31], bersamaan dengan %_d |
| %H | Jam (sistem 24 jam), nombor perpuluhan [00,23] |
| %I | Jam (sistem 12 jam), nombor perpuluhan [01,12] |
| %j | Hari ke-berapa dalam setahun, nombor perpuluhan [001,366] |
| %m | Bulan, nombor perpuluhan [01,12] |
| %M | Minit, nombor perpuluhan [00,59] |
| %L | Milisaat, nombor perpuluhan [000, 999] |
| %p | Pagi atau petang |
| %S | Saat, nombor perpuluhan [00,59] |
| %U | Minggu ke-berapa dalam setahun (dengan hari Ahad sebagai hari pertama minggu), nombor perpuluhan [00,53] |
| %w | Hari dalam minggu, nombor perpuluhan berlapik ruang [0,6], di mana 0 mewakili hari Ahad |
| %W | Minggu ke-berapa dalam setahun (dengan hari Isnin sebagai hari pertama minggu), nombor perpuluhan [00,53] |
| %x | Perwakilan tarikh setempat, contohnya: 2026-09-18 |
| %X | Perwakilan masa setempat, contohnya: 14:30:00 |
| %y | Tahun tanpa abad, nombor perpuluhan [00,99], contohnya 26 mewakili tahun 2026 |
| %Y | Tahun dengan abad, nombor perpuluhan |
| %Z | Singkatan nama zon waktu, contohnya "-0700" |
| %% | Aksara pelepasan, digunakan untuk memaparkan tanda peratus % itu sendiri |
Skala paksi
Skala output lalai ialah automatik. Anda boleh menyesuaikan tickInterval, contohnya 1day atau 1week.
Salin
Benamkan
tickInterval 1day
Modenya ialah
Salin
Benamkan
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
tickInterval berasaskan minggu bermula dari Ahad secara lalai. Jika anda ingin menentukan hari bekerja lain sebagai permulaan tickInterval, sila gunakan pilihan weekday, kodnya adalah seperti berikut:
Salin
Benamkan
gantt
tickInterval 1week
weekday monday
Output mod padat
Mod padat membenarkan anda memaparkan berbilang tugasan dalam baris yang sama. Mod pemaparan graf dikawal melalui tetapan YAML terdahulu, untuk mendayakan mod padat bagi carta Gantt.
Salin
Benamkan
---
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
Komen boleh dimasukkan dalam carta Gantt, dan penghurai akan mengabaikannya. Komen perlu menduduki satu baris sendiri, dan mesti bermula dengan %% (dua tanda peratus). Sebarang teks selepas permulaan komen hingga aksara baris baharu seterusnya akan dianggap sebagai komen, termasuk sebarang sintaks carta.
Salin
Benamkan
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
Penanda hari ini
Anda boleh menetapkan gaya penanda tarikh semasa atau menyembunyikan penanda tersebut. Untuk menetapkan gaya, tambah nilai pada kunci todayMarker.
Salin
Benamkan
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Untuk menyembunyikan penanda, tetapkan todayMarker kepada off.
Salin
Benamkan
todayMarker off
Contoh
Carta Gantt bar
Salin
Benamkan
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
Garis masa (termasuk komen, CSS dan konfigurasi hadapan)
Salin
Benamkan
---
# 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
