Gratis · Tanpa daftar · Mendukung file .mmd

Editor diagram Gantt Mermaid

Diagram Gantt meletakkan pekerjaan di atas kalender: apa berlangsung berapa lama, apa yang bertumpang tindih, dan apa yang belum bisa mulai sebelum hal lain selesai. Pakailah ketika intinya adalah tanggal dan ketergantungan. Kalau Anda hanya butuh urutan dan bukan tanggal, diagram alir lebih ringan dan tidak membusuk setiap kali jadwalnya bergeser.

Buka ini di editor →Baca panduan

Jadwal rilis dengan ketergantungan dan satu tonggak

Yang membuat ini diagram Gantt dan bukan sekadar gambar batang adalah `after a1`: ketergantungannya dideklarasikan, jadi menggeser pekerjaan pertama akan menyeret semua yang mengikutinya. Tonggak menandai tanggal tetap yang tidak memakan waktu. Baris `dateFormat DD/MM/YYYY` bukan pilihan: tanpa itu Anda jatuh ke jebakan tanggal yang dibahas di bawah.

gantt
    title Rilis 2.4
    dateFormat DD/MM/YYYY
    axisFormat %d/%m
    excludes weekends

    section Pengembangan
    Kontrak API          :done,      a1, 07/01/2026, 10d
    Implementasi         :active,    a2, after a1, 20d
    Pengujian internal   :           a3, after a2, 8d

    section Rilis
    Masa penstabilan     :           b1, after a3, 5d
    Keputusan rilis      :milestone, m1, after b1, 0d
    Penerapan ke produksi :crit,     b2, after m1, 3d

Buka ini di editor

Contoh yang dibahas

1. Diagram benar yang paling sederhana

`dateFormat` memberi tahu Mermaid cara MEMBACA tanggal yang Anda tulis; `axisFormat` mengatur cara tanggal itu DITAMPILKAN pada sumbu. Keduanya pengaturan yang berbeda, dan mencampuradukkannya adalah sumber frustrasi paling umum dengan Gantt.

gantt
    title Sprint 14
    dateFormat DD/MM/YYYY
    section Pekerjaan
    Bangun fitur pencarian :02/03/2026, 10d

Buka di editor

2. Pengenal pekerjaan dan ketergantungan

Memberi pengenal pada sebuah pekerjaan memungkinkan pekerjaan berikutnya menulis `after <pengenal>`. Dengan ketergantungan yang dideklarasikan, Anda mengubah tanggal mulai di satu tempat dan sisa jadwalnya mengikuti.

gantt
    title Migrasi data
    dateFormat DD/MM/YYYY
    section Persiapan
    Telaah skema         :a1, 02/02/2026, 5d
    Tulis pemetaan       :a2, after a1, 8d
    section Pelaksanaan
    Gladi bersih         :a3, after a2, 3d
    Peralihan            :a4, after a3, 1d

Buka di editor

3. Kata kunci status

`done`, `active`, dan `crit` mengubah cara batangnya digambar. Ini cara termurah agar diagramnya menjawab pertanyaan «kita sedang di mana», bukan hanya «rencananya bagaimana».

gantt
    title Platform, kuartal pertama
    dateFormat DD/MM/YYYY
    section Infrastruktur
    Rapikan Terraform     :done,   t1, 05/01/2026, 12d
    Naikkan versi Kubernetes :active, t2, 19/01/2026, 15d
    Telaah biaya          :        t3, after t2, 5d
    section Keamanan
    Audit dependensi      :crit,   s1, 12/01/2026, 6d

Buka di editor

4. Tonggak

Tonggak adalah sebuah titik, bukan sebuah rentang: berilah `0d`. Pakailah untuk tanggal yang ditetapkan dari luar proyek — sebuah pameran, batas waktu kontrak, pembekuan kode.

gantt
    title Rencana peluncuran
    dateFormat DD/MM/YYYY
    section Teknik
    Bekukan cakupan      :milestone, m1, 01/04/2026, 0d
    Perburuan bug        :          e1, 01/04/2026, 5d
    Cabang rilis         :milestone, m2, after e1, 0d
    section Komunikasi
    Embargo pers berakhir :milestone, m3, 15/04/2026, 0d

Buka di editor

5. Mengecualikan akhir pekan dan hari libur

`excludes weekends` membuat durasi tidak menghitung Sabtu dan Minggu, sehingga pekerjaan 10 hari memakan dua minggu kerja alih-alih berakhir di tengah akhir pekan. Hari libur dikecualikan satu per satu; di Indonesia selisihnya terasa di sekitar 17 Agustus dan 1 Juni.

gantt
    title Mengoperasikan layanan baru
    dateFormat DD/MM/YYYY
    excludes weekends, 01/06/2026, 17/08/2026

    section Pembangunan
    Siapkan infrastruktur :p1, 10/08/2026, 5d
    Sambungkan CI/CD      :p2, after p1, 5d
    section Serah terima
    Panduan dan pelatihan :p3, after p2, 4d

Buka di editor

Ringkasan sintaks diagram Gantt

Dari keenam jenis, Gantt paling tidak toleran di satu tempat saja — baris pekerjaan — dan paling toleran pada semua hal lain. Justru karena itulah begitu banyak kesalahan lolos tanpa disadari.

Sintaks	Arti
gantt	Membuka diagram.
title Teks	Judul diagram.
dateFormat DD/MM/YYYY	Cara MENGURAIKAN tanggal yang Anda tulis. Inilah baris yang tepat untuk bahasa Indonesia.
dateFormat YYYY-MM-DD	Format ISO, pengaturan bawaan.
axisFormat %d/%m	Cara MENAMPILKAN tanggal pada sumbu. Pengaturan yang berbeda dari dateFormat.
excludes weekends	Lewati Sabtu dan Minggu saat menghitung durasi.
excludes 17/08/2026	Kecualikan tanggal tertentu. Begitulah hari libur dikeluarkan.
section Nama	Mengelompokkan pekerjaan ke dalam jalur bernama.
Pekerjaan :id, 01/01/2026, 10d	Pekerjaan dengan awal dan durasi yang tegas.
Pekerjaan :id, after lain, 10d	Pekerjaan yang mulai saat `lain` selesai.
Pekerjaan :done, id, ...	Selesai — digambar pudar.
Pekerjaan :active, id, ...	Sedang berjalan — digambar menonjol.
Pekerjaan :crit, id, ...	Kritis — digambar dengan warna aksen.
Nama :milestone, id, tanggal, 0d	Sebuah titik waktu, bukan rentang.
10d / 3w / 2h	Durasi dalam hari, minggu, jam. Satuannya wajib.

Enam jebakan Gantt — dan hanya satu yang berupa kesalahan

Inilah yang membedakan Gantt dari kelima jenis lainnya. Direproduksi pada Mermaid 11.12.2: tepat satu dari enam berikut menghentikan penggambaran. Lima sisanya menghasilkan jadwal yang sepenuhnya meyakinkan dan salah, yang jauh lebih berbahaya, sebab tidak ada yang memeriksa ulang diagram yang sudah tergambar.

Yang Anda lihat

Parse error yang berakhir dengan: Expecting 'taskData', got 'NL'

Mengapa

Baris pekerjaan tanpa titik dua. Titik dua memisahkan nama yang ditampilkan dari data pekerjaan, dan tanpanya tidak ada yang bisa diurai. Ini satu-satunya jebakan dalam daftar ini yang ditolak Mermaid secara terang-terangan.

Solusi

Sisipkan titik dua di antara nama dan pengenal.

Salah

gantt
    dateFormat DD/MM/YYYY
    section Pekerjaan
    Perancangan a1, 07/01/2026, 5d

Benar

gantt
    dateFormat DD/MM/YYYY
    section Pekerjaan
    Perancangan :a1, 07/01/2026, 5d

Yang Anda lihat

Diagramnya tergambar, tetapi tanggalnya jatuh dua bulan lebih awal

Mengapa

Inilah kesalahan termahal dalam daftar ini bagi penulis berbahasa Indonesia. Kita menulis 01/03/2026 dan memaksudkan 1 Maret, tetapi `dateFormat` bawaannya `YYYY-MM-DD`, dan terhadap tanggal berpemisah Mermaid membacanya secara Amerika, bulan di depan. Terukur: `01/03/2026` dengan `dateFormat YYYY-MM-DD` menempatkan pekerjaan itu pada 3 Januari. Tidak ada peringatan apa pun; diagramnya tampak sempurna dan melenceng dua bulan. Memakai titik atau tanda hubung sebagai pemisah juga tidak mengubah apa pun.

Solusi

Deklarasikan `dateFormat DD/MM/YYYY` lalu tulis tanggal seperti biasa. Sudah diuji: dengan format itu `01/03/2026` jatuh tepat pada 1 Maret.

Salah

gantt
    dateFormat YYYY-MM-DD
    axisFormat %d/%m/%Y
    section S
    Perancangan :a1, 01/03/2026, 10d

Benar

gantt
    dateFormat DD/MM/YYYY
    axisFormat %d/%m/%Y
    section S
    Perancangan :a1, 01/03/2026, 10d

Yang Anda lihat

Diagramnya tergambar, tetapi sumbunya tiba-tiba mencakup berbulan-bulan

Mengapa

Sebuah `after` menunjuk pengenal pekerjaan yang tidak ada — biasanya salah ketik atau nama yang sudah diubah. Mermaid tidak memperingatkan: ia menaruh pekerjaan itu di titik sembarang, yang merentangkan sumbu supaya mencapainya. Dua pekerjaan sepuluh hari bisa berakhir di sumbu yang mencakup delapan bulan.

Solusi

Periksa bahwa setiap `after <pengenal>` benar-benar cocok dengan pengenal yang dideklarasikan. Skala sumbu yang mendadak berubah adalah petunjuknya.

Salah

gantt
    dateFormat DD/MM/YYYY
    section S
    Perancangan :a1, 07/01/2026, 10d
    Pembangunan :a2, after rancang, 10d

Benar

gantt
    dateFormat DD/MM/YYYY
    section S
    Perancangan :a1, 07/01/2026, 10d
    Pembangunan :a2, after a1, 10d

Yang Anda lihat

Nama pekerjaan terpotong pada titik dua pertama

Mengapa

Ada titik dua di dalam nama pekerjaan. Titik dua pertama adalah pemisah, jadi semua yang mengikutinya dibaca sebagai data pekerjaan: `Tahap 1: perancangan` tergambar sebagai pekerjaan bernama `Tahap 1` saja, dan kata perancangan lenyap. Nama section tidak terpengaruh — sudah diuji.

Solusi

Jangan pakai titik dua di nama pekerjaan. Gunakan tanda pisah atau pindahkan rinciannya ke nama section.

Salah

gantt
    dateFormat DD/MM/YYYY
    section S
    Tahap 1: perancangan :a1, 07/01/2026, 10d

Benar

gantt
    dateFormat DD/MM/YYYY
    section S
    Tahap 1 — perancangan :a1, 07/01/2026, 10d

Yang Anda lihat

Batangnya menyusut sampai tidak ada

Mengapa

Durasi tanpa satuan. `5` bukan lima hari: satuannya wajib, dan tanpa itu pekerjaan tidak mendapat panjang yang masuk akal. Diagramnya tetap tergambar, dengan pekerjaan yang seolah-olah tidak memakan waktu.

Solusi

Selalu tulis satuannya: `5d`, `3w`, `2h`.

Salah

gantt
    dateFormat DD/MM/YYYY
    section S
    Perancangan :a1, 07/01/2026, 5

Benar

gantt
    dateFormat DD/MM/YYYY
    section S
    Perancangan :a1, 07/01/2026, 5d

Yang Anda lihat

Durasinya cocok, tetapi tanggal selesainya tidak sesuai kenyataan

Mengapa

`excludes weekends` tidak ada. Secara bawaan, pekerjaan 10 hari berarti sepuluh hari kalender termasuk akhir pekan, jadi apa pun yang lebih panjang dari satu minggu kerja akan berakhir di diagram lebih cepat daripada pada praktiknya. Di Indonesia masih ditambah cuti bersama, dan selisih yang menumpuk sepanjang satu kuartal menjadi sulit dipertahankan dalam rapat.

Solusi

Tambahkan `excludes weekends` di bagian awal, diikuti tanggal hari libur — kecuali pekerjaannya memang berjalan tujuh hari seminggu.

Salah

gantt
    dateFormat DD/MM/YYYY
    section S
    Migrasi :a1, 10/08/2026, 10d

Benar

gantt
    dateFormat DD/MM/YYYY
    excludes weekends, 17/08/2026
    section S
    Migrasi :a1, 10/08/2026, 10d

Catatan tentang penggambaran

Diukur pada Mermaid 11.12.2, versi yang dipakai situs ini. Gantt berperilaku berbeda dari semua jenis lainnya.

Satu-satunya jenis dengan lebar gambar tetap

Semua diagram lain di situs ini tumbuh ke arah pertumbuhan isinya. Diagram Gantt selalu punya viewBox selebar 1264 piksel, entah ia punya tiga pekerjaan atau empat puluh; hanya tingginya yang berubah, terukur antara sekitar 172 dan 1060 piksel. Sumbunya dimampatkan atau direntangkan agar muat dalam lebar tetap itu, dan itulah sebabnya rencana dua tahun dan rencana dua minggu terlihat sama rapatnya. Kalau batangnya keluar tipis sampai tak terbaca, masalahnya ada pada rentang tanggal, bukan pada jumlah pekerjaan.

Di sinilah spasi antar kata justru tidak menjadi masalah

Nama pekerjaan dan nama section adalah label, bukan pengenal, jadi spasi bebas saja: `Telaah skema` dan `Gladi bersih` tergambar utuh. Satu-satunya yang terlarang di nama pekerjaan adalah titik dua. Ini kelegaan yang nyata dibandingkan diagram keadaan dan diagram alir, tempat spasi yang sama merusak segalanya — dan karena nama proses dalam bahasa Indonesia hampir selalu terdiri atas beberapa kata, perbedaan itu terasa.

Garis miring tidak menolong — penguraiannya tetap secara Amerika

Saya ulangi di sini karena inilah jebakan termahal saat menulis dalam bahasa Indonesia. Terukur: dengan `dateFormat YYYY-MM-DD`, tanggal `01/03/2026` tidak menghasilkan kesalahan maupun peringatan, ia hanya menempatkan diri pada 3 Januari — garis miring sebagai pemisah sama sekali tidak memberi isyarat kepada mesin bahwa itu hari lalu bulan. Hal yang sama terjadi dengan titik. `dateFormat DD/MM/YYYY` yang dideklarasikan menyelesaikannya sepenuhnya. Itulah baris pertama yang layak ditambahkan ke setiap Gantt berbahasa Indonesia.

Ekspor PNG tepat sampai ke pikselnya

Gantt menggambar labelnya sebagai teks SVG biasa, bukan HTML tertanam, jadi — berbeda dari diagram alir serta diagram kelas, keadaan, dan ER — ia bisa diraster langsung. PNG hasil ekspor sesuai persis dengan layar, tanpa penggambaran ulang dan tanpa pergeseran pada tata huruf.

Tata bahasanya longgar di mana-mana kecuali pada titik dua

Section yang hilang, kata kunci status yang tidak dikenal, tanggal berformat salah, dan durasi tanpa satuan — semuanya tergambar. Satu-satunya yang ditolak adalah baris pekerjaan tanpa titik dua. Ketimpangan itu adalah hal paling berguna yang bisa Anda ketahui tentang menulis diagram Gantt: kenyataan bahwa diagramnya tergambar hampir tidak mengatakan apa pun tentang benar atau tidaknya.

Kapan diagram lain lebih cocok

Kalau tanggalnya masih terkaan, diagram Gantt menyajikannya dengan ketepatan yang tidak pantas ia terima, dan nanti ada saja yang menagihnya kepada Anda. Diagram alir yang menunjukkan urutan tanpa tanggal lebih jujur dan tidak menuntut perbaikan setiap kali jadwalnya bergeser.

Kalau rencananya berubah tiap minggu, Gantt berbentuk teks di bawah kendali versi memang bagus sekali — dari diff-nya terlihat apa yang bergeser — tetapi diagram yang tidak pernah diperbarui lebih buruk daripada tidak ada diagram sama sekali. Nilailah dengan jernih yang mana dari keduanya sedang Anda buat.

Dan untuk segala hal yang menyangkut penyeimbangan beban kerja, kapasitas, atau penugasan ke orang, ini perkakas yang keliru. Mermaid menggambar batang di atas kalender; ia tidak tahu siapa yang mengerjakannya atau apakah orang itu sudah penuh.

Jenis diagram lain

Ditulis oleh Dominik Malsch · Terakhir diperbarui: 8 September 2026

Buka editor →