Panduan Lengkap Diagram Mermaid

Pelajari cara membuat diagram profesional dengan sintaks sederhana berbasis teks

Iklan

Apa itu Mermaid?

Mermaid adalah alat diagram dan charting berbasis JavaScript yang menggunakan definisi teks terinspirasi Markdown untuk membuat dan memodifikasi diagram secara dinamis. Ini adalah proyek open-source yang memungkinkan Anda menghasilkan diagram dari deskripsi teks sederhana.

Alih-alih menggunakan alat gambar yang kompleks, Anda menulis sintaks mirip kode yang menggambarkan diagram Anda, dan Mermaid merendernya sebagai diagram visual. Pendekatan ini membuat diagram dapat dikontrol versinya, mudah diperbarui, dan sempurna untuk dokumentasi.

Mermaid terintegrasi mulus dengan platform dokumentasi, wiki, dan file Markdown, menjadikannya alat favorit di antara pengembang dan penulis teknis.

Mengapa menggunakan Mermaid?

  • Kontrol versi: diagram adalah file teks sehingga dapat dilacak di Git bersama kode Anda
  • Pembaruan cepat: ubah beberapa baris teks alih-alih menggambar ulang seluruh diagram
  • Konsistensi: Mermaid menangani tata letak dan gaya secara otomatis, memastikan diagram yang konsisten
  • Tanpa alat desain: tidak perlu Visio, Lucidchart, atau alat mahal lainnya
  • Dokumentasi sebagai kode: simpan diagram di repositori yang sama dengan dokumentasi Anda
  • Lintas platform: berjalan di browser dan Node.js serta terintegrasi dengan banyak platform
  • Gratis dan open source: tanpa biaya lisensi, komunitas aktif
  • Berbagai jenis diagram: mendukung flowchart, diagram sekuens, diagram kelas, dan lainnya
Iklan

Jenis diagram yang didukung

Mermaid mendukung berbagai jenis diagram untuk berbagai kebutuhan dokumentasi:

Diagram alir

Visualisasikan alur kerja, proses, dan pohon keputusan dengan simpul dan garis.

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[Alternative]
    C --> E[End]
    D --> E
Lihat di penampil →

Kasus penggunaan: Alur proses, algoritme, logika keputusan

Diagram sekuens

Menunjukkan interaksi antara aktor atau sistem yang berbeda dari waktu ke waktu.

sequenceDiagram
    participant User
    participant API
    participant DB
    User->>API: Request data
    API->>DB: Query
    DB-->>API: Results
    API-->>User: Response
Lihat di penampil →

Kasus penggunaan: Interaksi API, komunikasi sistem, alur pengguna

Diagram kelas

Memodelkan sistem berorientasi objek dengan kelas, atribut, dan relasi.

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog
Lihat di penampil →

Kasus penggunaan: Arsitektur perangkat lunak, desain OOP, skema basis data

Diagram status

Merepresentasikan status dan transisi dalam sistem atau proses.

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: Start
    Loading --> Success: Complete
    Loading --> Error: Fail
    Success --> [*]
    Error --> Idle: Retry
Lihat di penampil →

Kasus penggunaan: Mesin status, manajemen siklus hidup, status UI

Diagram ER

Memodelkan struktur basis data dan relasi antar entitas.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER {
        int id
        string name
        string email
    }
Lihat di penampil →

Kasus penggunaan: Desain basis data, pemodelan data, arsitektur sistem

Diagram Gantt

Rencanakan dan visualisasikan jadwal serta garis waktu proyek.

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Design :a1, 2024-01-01, 30d
    Development :a2, after a1, 45d
Lihat di penampil →

Kasus penggunaan: Perencanaan proyek, timeline sprint, roadmap

Diagram lingkaran

Menampilkan data proporsional dan persentase secara visual.

pie title Distribution
    "Category A" : 42
    "Category B" : 30
    "Category C" : 28
Lihat di penampil →

Kasus penggunaan: Hasil survei, pangsa pasar, alokasi sumber daya

Graf Git

Visualisasikan strategi branching Git dan riwayat commit.

gitGraph
    commit
    branch develop
    checkout develop
    commit
    checkout main
    merge develop
Lihat di penampil →

Kasus penggunaan: Dokumentasi alur kerja Git, strategi branching

Iklan

Memulai dengan Mermaid

1

Pilih jenis diagram Anda

Mulailah dengan menentukan jenis diagram yang paling mewakili apa yang ingin Anda tampilkan. Setiap jenis dimulai dengan kata kunci tertentu seperti 'flowchart', 'sequenceDiagram', atau 'classDiagram'.

2

Tulis sintaks teks

Gunakan sintaks sederhana Mermaid untuk mendeskripsikan diagram Anda. Sintaksnya intuitif dan hampir seperti bahasa alami. Misalnya, 'A --> B' membuat panah dari A ke B.

3

Pratinjau diagram Anda

Gunakan penampil online kami atau alat yang kompatibel dengan Mermaid untuk melihat diagram Anda dirender secara real-time. Sesuaikan sesuai kebutuhan hingga Anda puas.

4

Ekspor dan bagikan

Ekspor diagram Anda sebagai SVG atau PNG untuk presentasi, atau bagikan URL dengan tim Anda. Anda juga dapat menyematkan Mermaid langsung di file Markdown.

Praktik terbaik

  • Jaga diagram tetap fokus pada satu konsep atau alur kerja
  • Gunakan label bermakna yang menggambarkan logika bisnis sebenarnya
  • Pecah diagram kompleks menjadi diagram yang lebih kecil dan saling terhubung
  • Tambahkan komentar menggunakan %% untuk menjelaskan bagian yang kompleks
  • Gunakan konvensi penamaan yang konsisten di seluruh diagram
  • Uji diagram di lingkungan target sebelum memfinalkannya
  • Sertakan petunjuk arah (TD, LR) untuk mengontrol tata letak saat diperlukan
  • Gunakan subgraph untuk mengelompokkan simpul terkait dalam diagram alir
  • Gunakan opsi styling secara hemat untuk menjaga keterbacaan
  • Kontrol versi file sumber diagram Anda bersama kode Anda

Kasus penggunaan umum

Dokumentasi perangkat lunak

Dokumentasikan arsitektur sistem, alur API, dan interaksi komponen bersama kode Anda.

Perencanaan proyek

Buat diagram Gantt untuk perencanaan sprint, timeline proyek, dan alokasi sumber daya.

Proposal teknis

Visualisasikan solusi yang diusulkan, desain sistem, dan keputusan arsitektur.

Perjalanan pengguna

Petakan alur pengguna, pengalaman pelanggan, dan pola interaksi.

Desain basis data

Modelkan relasi entitas, struktur skema, dan dependensi data.

Dokumentasi proses

Dokumentasikan proses bisnis, alur kerja, dan prosedur operasional standar.

Materi edukasi

Buat diagram yang jelas dan terkontrol versinya untuk tutorial dan kursus teknis.

Dokumentasi API

Ilustrasikan alur permintaan/respons, urutan autentikasi, dan interaksi endpoint.

Sumber daya tambahan

Pertanyaan yang Sering Diajukan

Pertanyaan umum tentang penggunaan Mermaid Viewer dan pembuatan diagram

Apakah editor Mermaid ini benar-benar gratis?
Ya, sepenuhnya gratis. Anda bisa membuat diagram tanpa batas, ekspor ke SVG/PNG, berbagi lewat URL, dan memakai semua fitur tanpa daftar atau pembayaran. Alat ini didukung iklan yang tidak mengganggu.
Apakah saya perlu instal apa pun?
Tidak perlu instal apa pun. Ini adalah alat berbasis web yang berjalan sepenuhnya di browser. Cukup buka situsnya dan langsung mulai membuat diagram di desktop, tablet, atau ponsel.
Bagaimana cara menyimpan diagram?
Ada beberapa cara menyimpan: 1) ekspor sebagai SVG atau PNG, 2) bagikan lewat URL (kode diagram tersimpan di URL), 3) salin kode Mermaid ke file Anda sendiri, 4) unggah/unduh file .mmd atau .mermaid.
Bisakah diagram dipakai di dokumentasi?
Tentu. Ekspor diagram sebagai SVG (skalabel) atau PNG lalu gunakan di dokumentasi, presentasi, atau situs web. Anda juga bisa menyematkan kode Mermaid langsung di platform seperti GitHub, GitLab, atau Notion.
Apa bedanya SVG dan PNG?
SVG adalah format vektor, tetap tajam di ukuran apa pun, dan ideal untuk web/dokumentasi. PNG adalah format raster, bagus untuk berbagi cepat tetapi kualitasnya turun saat diubah ukurannya.
Kenapa diagram saya tidak ter-render?
Periksa kesalahan sintaks pada kode Mermaid Anda. Masalah umum: tanda kutip tidak tertutup, titik dua/titik koma hilang, ID node salah, atau sintaks yang tidak didukung. Sederhanakan diagram untuk menemukan sumber masalah.
Bisakah saya berkolaborasi dengan orang lain?
Kolaborasi real-time belum tersedia, tetapi Anda bisa berbagi diagram dengan mudah lewat URL. Orang lain bisa membuka, mengedit, lalu membagikan kembali versinya. Karena berbasis teks, Mermaid juga cocok untuk Git.
Apakah bisa dipakai offline?
Pemuatan pertama membutuhkan koneksi internet. Setelah dimuat, fitur edit dasar sering tetap bisa dipakai offline. Namun beberapa fitur seperti ekspor mungkin tetap memerlukan koneksi.
Bagaimana belajar sintaks Mermaid?
Mulailah dari panduan Mermaid lengkap kami yang mencakup semua jenis diagram beserta contoh. Gunakan panel template untuk mulai lebih cepat, lalu lengkapi dengan dokumentasi resmi di mermaid.js.org.
Bisakah saya menyesuaikan tampilannya?
Ya. Diagram mengikuti tema situs: beralih antara terang dan gelap dengan tombol Tema di bilah atas, dan diagram akan dirender ulang dengan tema Mermaid yang sesuai. Untuk kustomisasi lanjutan, gunakan directive %%{init:...}%% untuk mengatur warna, font, dan properti visual lainnya.
Jenis diagram apa saja yang didukung?
Editor ini mendukung jenis diagram Mermaid utama: Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, Gantt Chart, Pie Chart, Git Graph, User Journey, dan lainnya.
Apakah data diagram saya privat?
Kode diagram Anda tidak dikirim ke server kami. Seluruh proses render terjadi di browser Anda. Saat berbagi lewat URL, kodenya ada di URL itu sendiri; kami tidak menyimpan atau melacak isi diagram Anda.
Mengapa memakai diagram berbasis teks?
Diagram berbasis teks punya banyak keunggulan: bisa version control (ideal untuk Git), cepat diperbarui, gaya konsisten, mudah dicari, ringan, dan bisa dibuat secara programatis. Diagram juga lebih mudah direview di pull request.
Bisakah Mermaid disematkan ke website?
Ya. Anda bisa menambahkan library JavaScript Mermaid ke situs web Anda lalu menulis blok kode Mermaid. Banyak platform sudah mendukung Mermaid secara native, termasuk GitHub, GitLab, Notion, dan Obsidian.
Berapa ukuran diagram maksimum yang disarankan?
Tidak ada batas keras, tetapi diagram yang sangat besar (lebih dari ~100 node) bisa dirender lebih lambat tergantung perangkat. Untuk sistem kompleks, sebaiknya dipecah menjadi beberapa diagram kecil yang fokus.

Siap membuat diagram pertama Anda?

Coba penampil Mermaid online gratis kami dan mulai membuat diagram profesional dalam hitungan menit.

Buka Mermaid Viewer