Mermaid 11.15.0
Gunakan Gantt untuk pekerjaan bertanggal, tumpang tindih, dan dependensi. Pilih linimasa untuk peristiwa naratif tanpa durasi tugas, atau diagram urutan untuk pesan antarsistem.
Buat dengan Pembuat diagram Gantt →Beri setiap tugas ID stabil agar tugas berikutnya dapat dimulai setelah ID tersebut selesai.
gantt
title Rilis dokumentasi
dateFormat YYYY-MM-DD
todayMarker off
section Persiapan
Kerangka :done, outline, 2026-10-05, 2d
Peninjauan :active, review, after outline, 3d
Terbitkan :milestone, publish, after review, 0dMemuat…
| Sintaks | Arti |
|---|---|
| gantt / title / section | Awali diagram, beri nama, dan kelompokkan baris tugas. |
| dateFormat YYYY-MM-DD / axisFormat %d %b | Masukan memakai token tanggal Day.js; label sumbu memakai token D3 time-format. |
| tickInterval 1week / weekday monday | Atur jarak tanda sumbu; weekday menentukan hari awal tanda mingguan. |
| weekend friday / excludes weekends, 2026-10-12 | Pilih akhir pekan Jumat–Sabtu; hari yang dikecualikan memperpanjang tugas berbasis durasi. |
| includes 2026-10-10 | Tanggal yang disertakan secara eksplisit mengesampingkan pengecualian. Gunakan tanggal, bukan nama hari. |
| inclusiveEndDates | Perlakukan tanggal akhir eksplisit sebagai tanggal yang turut dihitung. |
| todayMarker off / todayMarker stroke:#0070f3,stroke-width:2px | Sembunyikan atau beri gaya garis tanggal hari ini. |
| Task :id, start, end / Task :id, start, 2d | Pisahkan label dan metadata dengan titik dua, lalu pisahkan kolom dengan koma. |
| after a b / until c d | Mulai setelah waktu selesai paling akhir; akhiri pada waktu mulai paling awal dari tugas rujukan. |
| 500ms / 30s / 30m / 4h / 3d / 2w / 1M / 1y | Satuan durasi peka huruf besar/kecil: m untuk menit, M untuk bulan. Desimal didukung. |
| done / active / crit / milestone / vert | Letakkan tag sebelum ID. Milestone adalah titik; vert adalah penanda seluruh bagan tanpa baris. |
| click id href "https://example.com" / click id call callback() | Tautan dan callback bergantung pada keamanan host; pratinjau strict menonaktifkan interaksi. |
| topAxis / config.gantt.topAxis / config.gantt.displayMode: compact | Tampilkan sumbu atas dan gabungkan tugas yang tidak bertumpang tindih dalam satu baris. |
| %% / accTitle: / accDescr: | Komentar dan deskripsi diagram aksesibel. |
Pengecualian melewati waktu kerja dan memperpanjang durasi, bukan membagi batangnya. includes mengembalikan tanggal tertentu. Tanggal akhir eksplisit mempertahankan batasnya; gunakan inclusiveEndDates jika tanggal terakhir harus dihitung.
gantt
dateFormat YYYY-MM-DD
axisFormat %d %b
tickInterval 1week
weekday monday
excludes weekends, 2026-10-12
includes 2026-10-10
todayMarker off
section Penulisan
Buku panduan :handbook, 2026-10-09, 4d
Koreksi akhir :proof, after handbook, 2dMemuat…
Gunakan ID, bukan label, untuk rujukan. Beberapa ID after menunggu penyelesaian paling akhir. until berakhir pada waktu mulai paling awal dari tugas rujukan. Deklarasikan semua tugas dan hindari dependensi melingkar.
gantt
dateFormat YYYY-MM-DD
todayMarker off
section Rilis
Persetujuan akhir :milestone, signoff, 2026-10-15, 0d
Penyuntingan :edit, 2026-10-05, until signoff
Pengujian :test, 2026-10-07, 3d
Paket :package, after edit test, 1dMemuat…
Gabungkan crit dengan done atau active untuk menonjolkan pekerjaan penting. Tonggak berdurasi nol berada di tanggal mulai; durasi selain nol menempatkannya di tengah durasi. vert melintasi bagan tanpa menempati baris tugas.
gantt
dateFormat YYYY-MM-DD
todayMarker off
section Pengiriman
Draf :done, draft, 2026-10-05, 2d
Validasi :crit, active, validate, after draft, 3d
Tenggat :vert, deadline, 2026-10-09, 0d
Persetujuan :milestone, approval, after validate, 0dMemuat…
click menambahkan URL atau callback JavaScript pada ID tugas. Host harus mengizinkan interaksi. Situs ini memakai perenderan strict sehingga contoh sengaja tidak interaktif. Jangan longgarkan keamanan untuk sumber diagram yang tidak dipercaya.
gantt
dateFormat YYYY-MM-DD
todayMarker off
section Catatan
Baca panduan :guide, 2026-10-05, 2d
click guide href "https://themarkdowner.com"Memuat…
Letakkan konfigurasi dalam frontmatter YAML sebelum gantt. Mode compact berbagi baris jika memungkinkan; ini pengaturan tata letak, bukan algoritme alokasi sumber daya. Direktif lama %%{init: ...}%% juga didukung, tetapi frontmatter lebih mudah dirawat.
---
config:
gantt:
displayMode: compact
topAxis: true
---
gantt
dateFormat YYYY-MM-DD
todayMarker off
section Tugas
Tahap pertama :first, 2026-10-05, 2d
Tahap kedua :second, after first, 2dMemuat…
YYYY-MM-DD digunakan di dateFormat; %d %b di axisFormat. Mengubah sumbu tidak mengubah penguraian tanggal tugas.
Durasi tidak valid dapat menjadi nol tanpa peringatan. Gunakan akhiran yang valid dan periksa tanggal akhir hasil render.
Direktif dates tidak tersedia. Tulis dateFormat pada baris tersendiri.
Sintaks tidak valid — contoh perbaikan di bawah
gantt
dates YYYY-MM-DDgantt
dateFormat YYYY-MM-DD
todayMarker off
section Periksa
Verifikasi :check, 2026-10-05, 1dMemuat…