Diagram Gantt
Diagram Gantt adalah sejenis diagram batang yang digunakan untuk menampilkan kemajuan proyek serta waktu yang diperlukan untuk menyelesaikan suatu proyek. Diagram Gantt menunjukkan jumlah hari antara tanggal mulai dan tanggal selesai elemen terminal dan elemen ringkasan proyek.
Catatan penting
Diagram Gantt mencatat setiap tugas yang direncanakan sebagai batang kontinu yang membentang dari kiri ke kanan. Sumbu x merepresentasikan waktu, sumbu y mencatat berbagai tugas beserta urutan penyelesaiannya.
Yang lebih penting lagi, ketika tanggal, jumlah hari, atau kumpulan tanggal tertentu dari suatu tugas dikecualikan, diagram Gantt akan menyesuaikan perubahan tersebut dengan memperpanjang ke kanan sejumlah hari yang sama, alih-alih membuat celah di dalam tugas .
Salin
Sematkan
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
Namun, jika tanggal yang dikecualikan berada di antara dua tugas yang dimulai secara berurutan, tanggal yang dikecualikan akan dilewati dan dikosongkan pada diagram, lalu tugas berikutnya akan dimulai setelah tanggal yang dikecualikan berakhir. Seperti yang ditunjukkan di bawah ini:
Salin
Sematkan
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
Diagram Gantt berguna untuk melacak waktu yang diperlukan untuk menyelesaikan proyek, tetapi dengan beberapa penyesuaian, diagram ini juga dapat digunakan untuk merepresentasikan "hari non-kerja" secara grafis.
Sintaks
Salin
Sematkan
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
Tugas secara bawaan dilakukan secara berurutan, tanggal mulai tugas berikutnya secara bawaan adalah tanggal selesai tugas sebelumnya.
Judul tugas dan metadatanya dipisahkan dengan titik dua (:), dan item metadata dipisahkan dengan koma (,). Tag yang valid meliputi active, done, crit, dan milestone. Tag bersifat opsional, tetapi jika digunakan, harus diletakkan paling depan. Setelah tag diproses, item metadata yang tersisa dijelaskan sebagai berikut:
- Jika satu item ditentukan, item tersebut menentukan kapan tugas berakhir. Item tersebut dapat berupa tanggal atau waktu tertentu, atau durasi. Jika durasi ditentukan, durasi tersebut akan ditambahkan ke tanggal mulai tugas untuk menentukan tanggal selesai tugas, dengan mempertimbangkan pengecualian apa pun.
- Jika dua item ditentukan, item terakhir diinterpretasikan dengan cara yang sama seperti kasus sebelumnya. Item pertama dapat menentukan tanggal atau waktu mulai yang eksplisit (formatnya ditentukan oleh dateFormat), atau dapat merujuk ke tugas lain melalui after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. Dalam kasus terakhir, tanggal mulai tugas akan ditetapkan berdasarkan tanggal selesai terakhir dari tugas yang dirujuk.
- Jika tiga item ditentukan, dua item terakhir akan diinterpretasikan sesuai kasus sebelumnya. Item pertama akan merepresentasikan ID tugas, dapat dirujuk menggunakan sintaks later <taskID>.
| Sintaks metadata | Tanggal mulai | Tanggal selesai | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate yang diinterpretasikan menggunakan dateformat | endDate yang diinterpretasikan menggunakan dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate yang diinterpretasikan menggunakan dateformat | Tanggal mulai + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | Tanggal selesai dari tugas otherTaskID yang ditentukan sebelumnya | endDate yang diinterpretasikan menggunakan dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | Tanggal selesai dari tugas otherTaskID yang ditentukan sebelumnya | Tanggal mulai + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate yang diinterpretasikan menggunakan dateformat | Tanggal mulai dari tugas otherTaskID yang ditentukan sebelumnya | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | Tanggal selesai dari tugas otherTaskID yang ditentukan sebelumnya | Tanggal mulai dari tugas otherTaskID yang ditentukan sebelumnya | taskID |
| <startDate>, <endDate> | startdate yang diinterpretasikan menggunakan dateformat | 使用 dateformat 解释的 enddate | Tidak berlaku |
| <startDate>, <length> | startdate yang diinterpretasikan menggunakan dateformat | Tanggal mulai + length | Tidak berlaku |
| after <otherTaskID>, <endDate> | Tanggal selesai dari tugas otherTaskID yang ditentukan sebelumnya | 使用 dateformat 解释的 enddate | Tidak berlaku |
| after <otherTaskID>, <length> | Tanggal selesai dari tugas otherTaskID yang ditentukan sebelumnya | Tanggal mulai + length | Tidak berlaku |
| <startDate>, until <otherTaskId> | startdate yang diinterpretasikan menggunakan dateformat | Tanggal mulai dari tugas otherTaskID yang ditentukan sebelumnya | Tidak berlaku |
| after <otherTaskId>, until <otherTaskId> | Tanggal selesai dari tugas otherTaskID yang ditentukan sebelumnya | Tanggal mulai dari tugas otherTaskID yang ditentukan sebelumnya | Tidak berlaku |
| <endDate> | Tanggal selesai tugas sebelumnya | 使用 dateformat 解释的 enddate | Tidak berlaku |
| <length> | Tanggal selesai tugas sebelumnya | Tanggal mulai + length | Tidak berlaku |
| until <otherTaskId> | Tanggal selesai tugas sebelumnya | Tanggal mulai dari tugas otherTaskID yang ditentukan sebelumnya | Tidak berlaku |
Format durasi
Saat menentukan <length>, gunakan sebuah angka, diikuti salah satu akhiran satuan berikut:
| Satuan | Akhiran | Contoh |
|---|---|---|
| Milidetik | ms | 50ms |
| Detik | s | 30s |
| Menit | m | 30m |
| Jam | h | 4h |
| Hari | d | 7d |
| Minggu | w | 3w |
| Bulan | m | 2m |
| Tahun | y | 1y |
Nilai desimal juga didukung (misalnya, 2.5d). Penanda durasi yang tidak valid (misalnya, 3dX) akan diabaikan, dan tugas akan secara bawaan memiliki durasi nol.
Demi kesederhanaan, tabel tersebut tidak menampilkan beberapa tugas yang dicantumkan menggunakan sintaks after. Berikut adalah contohnya:
Salin
Sematkan
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
Judul
title adalah string opsional yang ditampilkan di bagian atas diagram Gantt, digunakan untuk mendeskripsikan keseluruhan diagram.
Pengecualian
excludes adalah properti opsional yang menerima tanggal tertentu (format YYYY-MM-DD), hari dalam seminggu (misalnya "sunday"), atau "weekends", tetapi tidak dapat menggunakan kata "weekdays". Tanggal-tanggal ini akan ditandai pada diagram, dan dikecualikan dari perhitungan durasi tugas. Ini berarti, jika periode durasi tugas memuat tanggal yang dikecualikan, jumlah hari yang dikecualikan akan ditambahkan ke waktu selesai tugas, untuk memastikan durasi tugas konsisten dengan yang ditentukan dalam kode.
Akhir pekan
Saat mengecualikan akhir pekan, Anda dapat mengatur akhir pekan menjadi Jumat dan Sabtu, atau Sabtu dan Minggu. Secara bawaan, akhir pekan adalah Sabtu dan Minggu. Untuk mendefinisikan hari mulai akhir pekan, Anda dapat menambahkan properti opsional weekend pada baris baru, diikuti friday atau saturday.
Salin
Sematkan
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
Deklarasi bagian
Anda dapat membagi diagram menjadi beberapa bagian, memisahkan bagian proyek yang berbeda (misalnya pengembangan dan dokumentasi).
Untuk itu, gunakan sintaks section di awal baris dan beri nama. Perlu diperhatikan bahwa, tidak seperti judul keseluruhan diagram, nama ini bersifat wajib.
Milestone
Anda dapat menambahkan milestone pada diagram. Milestone berbeda dari tugas karena merepresentasikan waktu tertentu, dan ditandai dengan sintaks milestone. Berikut adalah contoh penggunaan milestone: posisi pasti milestone ditentukan oleh tanggal mulai milestone dan durasi tugas, seperti yang ditunjukkan di bawah ini:
Salin
Sematkan
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 vertikal
vert berarti menambahkan garis vertikal pada diagram Gantt, agar mudah menyorot tanggal penting, seperti tenggat waktu, peristiwa penting, atau titik pemeriksaan. Penanda ini membentang di seluruh diagram, dan diposisikan berdasarkan tanggal yang Anda berikan. Berbeda dari milestone, penanda vertikal tidak menempati satu baris. Penanda ini murni titik referensi visual, yang membantu memecah garis waktu, sehingga momen penting lebih mudah dikenali.
Salin
Sematkan
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
Mengatur tanggal
dateFormat mendefinisikan format input tanggal untuk elemen diagram Gantt, sedangkan axisFormat mendefinisikan format output tanggal saat merender diagram.
Format tanggal input
Format tanggal input bawaannya adalah YYYY-MM-DD, Anda dapat menyesuaikan dateFormat.
Salin
Sematkan
dateFormat YYYY-MM-DD
Opsi format berikut didukung:
| 输入 | Contoh | Deskripsi |
|---|---|---|
| YYYY | 2026 | Tahun 4 digit |
| YY | 26 | Tahun 2 digit |
| Q | 1..4 | Angka kuartal |
| M MM | 1..12 | Angka bulan |
| D DD | 1..31 | Hari dalam sebulan |
| Do | 1st..31st | Hari dalam sebulan dengan angka ordinal |
| DDD DDDD | 1..365 | Hari dalam setahun |
| X | 1410715640.579 | Stempel waktu Unix |
| x | 1410715640579 | Stempel waktu Unix dalam milidetik |
| H HH | 0..23 | Waktu 24 jam |
| h hh | 1..12 | Waktu 12 jam, digunakan bersama a A |
| a A | am pm | Pagi atau sore |
| m mm | 0..59 | Menit |
| s ss | 0..59 | Jumlah detik |
| S | 0..9 | Sepersepuluh detik |
| SS | 0..99 | Seperseratus detik |
| SSS | 0..999 | Seperseribu detik |
| Z ZZ | +12:00 | Offset terhadap UTC, dengan format +-HH:mm, +-HHmm, atau Z |
Format tanggal output sumbu
Format tanggal output bawaannya adalah YYYY-MM-DD. Anda dapat menyesuaikan axisFormat, misalnya 2026-Q1 yang berarti kuartal pertama tahun 2026.
Salin
Sematkan
axisFormat %Y-%m-%d
String format berikut didukung:
| Format,Definisi | |
|---|---|
| %a | Nama singkat hari |
| %A | Nama lengkap hari |
| %b | Nama singkat bulan |
| %B | Nama lengkap bulan |
| %c | Tanggal dan waktu yang dilokalkan |
| %d | Tanggal, angka desimal [01,31] |
| %e | Tanggal, angka desimal yang diisi dengan spasi [1,31], setara dengan %_d |
| %H | Jam (format 24 jam), angka desimal [00,23] |
| %I | Jam (format 12 jam), angka desimal [01,12] |
| %j | Hari ke berapa dalam setahun, angka desimal [001,366] |
| %m | Bulan, angka desimal [01,12] |
| %M | Menit, angka desimal [00,59] |
| %L | Milidetik, angka desimal [000, 999] |
| %p | Pagi atau sore |
| %S | Detik, angka desimal [00,59] |
| %U | Minggu ke berapa dalam setahun (dengan hari Minggu sebagai hari pertama dalam seminggu), angka desimal [00,53] |
| %w | Hari dalam seminggu, angka desimal yang diisi dengan spasi [0,6], di mana 0 merepresentasikan hari Minggu |
| %W | Minggu ke berapa dalam setahun (dengan hari Senin sebagai hari pertama dalam seminggu), angka desimal [00,53] |
| %x | Representasi tanggal yang dilokalkan, misalnya: 2026-09-18 |
| %X | Representasi waktu yang dilokalkan, misalnya: 14:30:00 |
| %y | Tahun tanpa abad, angka desimal [00,99], misalnya 26 merepresentasikan tahun 2026 |
| %Y | Tahun dengan abad, angka desimal |
| %Z | Singkatan nama zona waktu, misalnya "-0700" |
| %% | Karakter pelolosan, digunakan untuk menampilkan tanda persen % itu sendiri |
Skala sumbu
Skala output bawaannya otomatis. Anda dapat menyesuaikan tickInterval, misalnya 1day atau 1week.
Salin
Sematkan
tickInterval 1day
Polanya adalah
Salin
Sematkan
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
tickInterval berbasis minggu secara bawaan dimulai dari hari Minggu. Jika Anda ingin menentukan hari kerja lain sebagai awal tickInterval, gunakan opsi weekday, dengan kode sebagai berikut:
Salin
Sematkan
gantt
tickInterval 1week
weekday monday
Output mode ringkas
Mode ringkas memungkinkan Anda menampilkan beberapa tugas pada baris yang sama. Melalui pengaturan YAML di bagian depan untuk mengontrol mode tampilan grafis, aktifkan mode ringkas untuk diagram Gantt.
Salin
Sematkan
---
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
Komentar dapat dimasukkan dalam diagram Gantt, dan pengurai akan mengabaikannya. Komentar harus menempati satu baris tersendiri dan harus diawali dengan %% (dua tanda persen). Semua teks setelah komentar dimulai hingga karakter baris baru berikutnya akan dianggap sebagai komentar, termasuk sintaks diagram apa pun.
Salin
Sematkan
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 dapat mengatur gaya atau menyembunyikan penanda untuk tanggal saat ini. Untuk mengatur gaya, tambahkan nilai pada kunci todayMarker.
Salin
Sematkan
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Untuk menyembunyikan penanda, atur todayMarker menjadi off.
Salin
Sematkan
todayMarker off
Contoh
Diagram Gantt batang
Salin
Sematkan
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 waktu (termasuk komentar, CSS, dan konfigurasi frontmatter)
Salin
Sematkan
---
# 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
