Linimasa dasar dengan judul
Riwayat kronologis sederhana dengan satu peristiwa per periode.
timeline
title Riwayat produk
2024 : Prototipe pertama
2025 : Beta privat
2026 : Peluncuran publikReferensi sintaks diagram
Contekan dan panduan sintaks Mermaid
Salin contoh diagram yang Anda perlukan, lihat hasilnya, lalu sesuaikan label dan hubungan untuk dokumentasi Anda.
Pola sintaks
```mermaid
flowchart LR
A[Write Markdown] --> B[Add Mermaid code]
B --> C[Preview diagram]
C --> D[Publish docs]
```Blok kode dengan penanda mermaid otomatis dirender menjadi diagram interaktif.
Contekan diagram
Contekan diagram Gantt Mermaid →
Beri setiap tugas ID stabil agar tugas berikutnya dapat dimulai setelah ID tersebut selesai.
Contekan linimasa Mermaid →
Tulis periode, titik dua, dan peristiwanya. Titik dua kedua menambahkan peristiwa pada periode yang sama.
Contekan diagram urutan Mermaid →
Deklarasikan alias terlebih dahulu untuk mengatur urutan garis hidup, lalu tulis pengirim, panah, penerima, dan teks pesan.
Contekan diagram alur Mermaid →
Gunakan ID stabil dan apit label tampilan dengan tanda kutip. Bentuk menyampaikan arti; garis menghubungkan ID.
Contekan diagram lajur Mermaid →
Buat setiap peran sebagai subgraf bernama lalu hubungkan tindakan lintas peran melalui ID simpul.
Contekan diagram lingkaran Mermaid →
Nilai adalah bobot, bukan persentase yang harus berjumlah 100. Mermaid menghitung proporsi dari total.
Contekan diagram kuadran Mermaid →
Koordinat berkisar 0 hingga 1. X meningkat ke kanan; Y meningkat ke atas.
Contekan diagram kelas Mermaid →
Metode menggunakan tanda kurung; atribut tidak. Letakkan tipe hasil metode setelah spasi.
sintaks diagram alur mermaid
Sintaks diagram alur Mermaid
Contekan diagram alur Mermaid →Diagram alur memperlihatkan perpindahan proses antarlangkah, termasuk keputusan dan jalur alternatif.
Sintaks siap salin
Diagram alur
flowchart TD
A[Susun Markdown] --> B{Perlu diagram?}
B -- Ya --> C[Tulis kode Mermaid]
B -- Tidak --> D[Terbitkan catatan]
C --> E[Tinjau dan ekspor]
E --> DPratinjau hasil
Proses, cabang, keputusan, alur kerja
Merender pratinjau Mermaid
Sintaks tetap terlihat jika JavaScript dinonaktifkan.
Awali dengan flowchart lalu pilih TD untuk atas ke bawah atau LR untuk kiri ke kanan.
Gunakan tanda kurung siku untuk proses dan kurung kurawal untuk keputusan.
Tulis label garis di antara tanda hubung, misalnya -- Ya -->.
sintaks diagram urutan mermaid
Sintaks diagram urutan Mermaid
Contekan diagram urutan Mermaid →Diagram urutan menampilkan pesan berdasarkan waktu untuk panggilan API, autentikasi, interaksi browser, dan komunikasi antarlayanan.
Sintaks siap salin
Urutan
sequenceDiagram
participant User as Pengguna
participant App as Aplikasi
participant Renderer as Perender
User->>App: Tempel sintaks Mermaid
App->>Renderer: Validasi diagram
Renderer-->>App: Pratinjau SVG
App-->>User: Opsi eksporPratinjau hasil
API, alur permintaan dan balasan, pesan layanan
Merender pratinjau Mermaid
Sintaks tetap terlihat jika JavaScript dinonaktifkan.
Deklarasikan peserta untuk menentukan urutan dan nama tampilan.
Gunakan ->> untuk permintaan dan -->> untuk balasan.
Tulis label pesan setelah titik dua.
contoh diagram linimasa mermaid
Sintaks linimasa Mermaid
Contekan linimasa Mermaid →Linimasa menyusun peristiwa secara kronologis, misalnya riwayat rilis, tonggak peta jalan, dan catatan bertanggal.
Sintaks siap salin
Linimasa
timeline
title Sejarah Markdown
2004 : Markdown dibuat : John Gruber & Aaron Swartz
2011 : Standar CommonMark diluncurkan
2014 : GitHub Flavored Markdown (GFM)
2026 : Alat browser TheMarkdownerPratinjau hasil
Catatan rilis, peta jalan, riwayat proyek, jadwal
Merender pratinjau Mermaid
Sintaks tetap terlihat jika JavaScript dinonaktifkan.
Pola linimasa lainnya
4 contoh linimasa Mermaid siap salin
Beberapa peristiwa dalam satu periode
Gunakan titik dua tambahan untuk menempatkan tonggak terkait dalam satu periode.
timeline
title Rencana rilis 2026
Q1 : Riset pelanggan : Peta jalan disetujui
Q2 : Beta privat : Dokumentasi
Q3 : Ketersediaan umum : Tinjauan adopsiPeta jalan sprint
Kelompokkan periode pengiriman dengan bagian agar peta jalan perangkat lunak mudah dibaca.
timeline
title Sprint perangkat lunak
section Penemuan
Sprint 1 : Tentukan cakupan : Prototipe
section Pengiriman
Sprint 2 : Buat editor : Tambahkan validasi
section Rilis
Sprint 3 : Tinjauan aksesibilitas : PeluncuranRiwayat rilis
Dokumentasikan versi perangkat lunak dan perubahan penting secara kronologis.
timeline
title Riwayat rilis
v1.0 : Rilis awal : Editor inti
v1.1 : Ekspor SVG : Tema gelap
v2.0 : Pembuat linimasa : Tautan berbagiAwali dengan kata kunci timeline.
Tulis periode diikuti titik dua lalu peristiwa.
Pisahkan beberapa peristiwa dalam satu periode menggunakan titik dua.
sintaks diagram er mermaid
Sintaks diagram ER Mermaid
Diagram hubungan entitas menunjukkan entitas basis data dan hubungannya untuk dokumentasi skema, model konten, atau kontrak data.
Sintaks siap salin
Diagram ER
erDiagram
DOCUMENT ||--o{ DIAGRAM : memuat
DOCUMENT {
string title
string format
}
DIAGRAM {
string type
string source
}Pratinjau hasil
Skema basis data, model hubungan, struktur data
Merender pratinjau Mermaid
Sintaks tetap terlihat jika JavaScript dinonaktifkan.
Deklarasikan erDiagram pada baris pertama.
Gunakan simbol hubungan satu ke banyak sesuai sintaks Mermaid.
Apit properti tabel dalam kurung kurawal.
sintaks diagram kelas mermaid
Sintaks diagram kelas Mermaid
Contekan diagram kelas Mermaid →Diagram kelas menampilkan objek, properti, metode, dan hubungan untuk dokumentasi SDK serta desain berorientasi objek.
Sintaks siap salin
Kelas
classDiagram
class Document {
+string title
+string format
+convertToMarkdown()
}
class Diagram {
+string type
+render()
}
Document "1" --> "0..*" Diagram : mencakupPratinjau hasil
Objek, properti, kelas, struktur kode
Merender pratinjau Mermaid
Sintaks tetap terlihat jika JavaScript dinonaktifkan.
Awali dengan classDiagram.
Gunakan + untuk anggota publik dan - untuk anggota privat.
Gunakan garis seperti --> untuk asosiasi.
sintaks diagram status mermaid
Sintaks diagram status Mermaid
Diagram status menampilkan status sistem yang valid dan peristiwa perpindahannya untuk siklus pesanan, status pengguna, atau mode antarmuka.
Sintaks siap salin
Status
stateDiagram-v2
state "Draf" as Draft
state "Pratinjau" as Preview
state "Kesalahan" as Error
state "Diterbitkan" as Published
[*] --> Draft
Draft --> Preview: render
Preview --> Error: kesalahan sintaks
Preview --> Published: ekspor
Error --> Draft: perbaiki kodePratinjau hasil
Siklus hidup, mode, transisi, operasi
Merender pratinjau Mermaid
Sintaks tetap terlihat jika JavaScript dinonaktifkan.
Gunakan stateDiagram-v2 untuk sintaks perenderan modern.
Gunakan [*] untuk awal dan akhir alur.
Tambahkan label tindakan atau peristiwa setelah titik dua.
sintaks diagram gantt mermaid
Sintaks diagram Gantt Mermaid
Contekan diagram Gantt Mermaid →Diagram Gantt menempatkan tugas pada jadwal bertanggal. Gunakan untuk tanggal mulai, durasi, tonggak, dan dependensi.
Sintaks siap salin
Gantt
gantt
title Rilis dokumentasi
dateFormat YYYY-MM-DD
section Draf
Tulis panduan :a1, 2026-06-12, 2d
Tinjau contoh :after a1, 1d
section Terbitkan
Tambah tangkapan layar :1d
Luncurkan halaman :1dPratinjau hasil
Jadwal, tonggak, alur sprint
Merender pratinjau Mermaid
Sintaks tetap terlihat jika JavaScript dinonaktifkan.
Atur dateFormat sesuai format tanggal tugas, misalnya YYYY-MM-DD.
Kelompokkan pekerjaan dengan kata kunci section.
Gunakan after dan ID tugas untuk menghubungkan dependensi.
sintaks diagram lingkaran mermaid
Sintaks diagram lingkaran Mermaid
Contekan diagram lingkaran Mermaid →Diagram lingkaran menampilkan kontribusi sedikit kategori terhadap satu total, seperti sumber trafik atau jawaban survei.
Sintaks siap salin
Diagram lingkaran
pie showData
title Jenis diagram di halaman dokumentasi
"Diagram alur" : 40
"Diagram urutan" : 25
"Diagram ER" : 20
"Lainnya" : 15Pratinjau hasil
Proporsi, pembagian, statistik
Merender pratinjau Mermaid
Sintaks tetap terlihat jika JavaScript dinonaktifkan.
Gunakan pie showData untuk menampilkan nilai data bersama label.
Apit nama dengan tanda kutip ganda jika mengandung spasi.
Gunakan nilai irisan yang sederhana.
sintaks peta pikiran mermaid
Sintaks peta pikiran Mermaid
Peta pikiran menyusun topik utama dan cabangnya. Mermaid menggunakan inden untuk membangun hierarki.
Sintaks siap salin
Peta pikiran
mindmap
root((Mermaid))
Markdown
File README
Situs dokumentasi
Diagram
Diagram alur
Urutan
ERDPratinjau hasil
Kerangka, curah gagasan, hierarki
Merender pratinjau Mermaid
Sintaks tetap terlihat jika JavaScript dinonaktifkan.
Gunakan inden untuk membuat cabang turunan.
Gunakan root((Node)) untuk pusat visual yang jelas.
Gunakan label simpul singkat agar jarak diagram tetap rapi.
Pemecahan masalah
Kesalahan sintaks Mermaid yang umum
Kesalahan sering disebabkan kata kunci jenis diagram yang hilang, panah yang tidak sesuai, atau label yang memerlukan tanda kutip. Sederhanakan menjadi satu hubungan, lalu tambahkan baris secara bertahap.
Penanda diagram hilang
Blok Mermaid memerlukan baris awal seperti flowchart, sequenceDiagram, atau erDiagram agar pengurai mengetahui struktur yang harus dibuat.
Tanda baca panah keliru
Panah berbeda untuk setiap jenis diagram. Diagram alur memakai -->, sedangkan diagram urutan memakai ->> dan -->> untuk balasan.
Karakter khusus tanpa tanda kutip
Tanda baca dalam label dapat dianggap sebagai sintaks. Apit label dengan tanda kutip ganda atau pisahkan ID simpul dari teks tampilannya.
Inden tidak konsisten
Peta pikiran dan linimasa bergantung pada inden. Pastikan elemen turunan pada tingkat yang sama memiliki pola spasi yang sama.
Pertanyaan yang sering diajukan
Bagaimana susunan contekan Mermaid ini?
Setiap bagian menyandingkan kode yang berfungsi, pratinjau, dan catatan sintaks. Pilih jenis diagram, salin contoh, lalu ganti labelnya.
Apakah diagram Mermaid dapat diekspor sebagai gambar?
Ya. Tempel kode ke editor Mermaid, periksa pratinjau, lalu unduh SVG, PNG, atau PDF.
Apakah GitHub mendukung diagram Mermaid?
Ya. GitHub, GitLab, dan Obsidian merender blok kode ```mermaid dalam file Markdown dan masalah yang mendukungnya.
Bantuan sintaks
Komentar dan karakter khusus Mermaid
Komentar dan escape label berlaku pada berbagai jenis diagram. Gunakan komentar untuk catatan pengelola dan entitas HTML jika label mengandung tanda baca sintaks.
Tambahkan komentar Mermaid
Baris yang diawali
%%tetap ada dalam sumber tetapi tidak dirender.Escape tanda baca sintaks
Gunakan entitas HTML jika titik dua merupakan bagian dari label.