Panduan Lengkap Diagram Mermaid.js
Pelajari cara membuat diagram profesional dengan sintaks sederhana berbasis teks
Apa itu Mermaid.js?
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.js?
- 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
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 --> EKasus 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: ResponseKasus 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 <|-- DogKasus 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: RetryKasus 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
}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, 45dKasus 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" : 28Kasus 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 developKasus penggunaan: Dokumentasi alur kerja Git, strategi branching
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
Siap membuat diagram pertama Anda?
Coba penampil Mermaid online gratis kami dan mulai membuat diagram profesional dalam hitungan menit.
Buka Mermaid Viewer