Cara Mudah Membuat Diagram dengan Mermaid Chart

Pernahkah kamu kesulitan membuat diagram atau flowchart untuk dokumentasi project? Biasanya kita harus membuka aplikasi khusus seperti draw.io atau Visio, drag-drop elemen, atur posisinya, dan masih banyak lagi. Mermaid Chart hadir sebagai solusi yang lebih praktis!

Mermaid memungkinkan kita membuat diagram yang indah hanya dengan menulis teks sederhana. Seperti menulis kode, diagram kamu akan ter-render otomatis. Mari kita pelajari cara menggunakannya!

Apa Itu Mermaid Chart?

Mermaid adalah JavaScript library yang mengubah teks menjadi diagram. Kamu cukup menulis sintaks sederhana, dan Mermaid akan menghasilkan diagram visual secara otomatis.

Keunggulan Mermaid:

• ✅ Mudah dipelajari - Sintaks yang intuitif dan mirip markdown
• ✅ Version control friendly - Karena berbasis teks, mudah di-track di Git
• ✅ Terintegrasi - Didukung GitHub, GitLab, Notion, Obsidian, dan banyak tools lain
• ✅ Gratis & Open Source - Tidak perlu langganan atau lisensi
• ✅ Responsif - Diagram otomatis menyesuaikan ukuran layar

Jenis-Jenis Diagram yang Bisa Dibuat

Mermaid mendukung berbagai jenis diagram:

1. Flowchart - Diagram alur proses
2. Sequence Diagram - Interaksi antar objek
3. Class Diagram - Struktur class dalam OOP
4. State Diagram - Transisi state dalam sistem
5. Entity Relationship Diagram - Relasi database
6. Gantt Chart - Timeline project
7. Pie Chart - Diagram lingkaran
8. Git Graph - Visualisasi branch Git

Dan masih banyak lagi!

Cara Menggunakan Mermaid

1. Di Markdown (GitHub, GitLab)

GitHub dan GitLab sudah mendukung Mermaid secara native. Cukup gunakan code block dengan bahasa mermaid:

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

2. Di Website/HTML

Install via CDN atau npm:

<!-- Via CDN -->
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

<div class="mermaid">
  graph TD
    A[Start] --> B[End]
</div>

3. Online Editor

Kunjungi mermaid.live untuk mencoba langsung di browser tanpa install apapun.

Tutorial Membuat Flowchart

Flowchart adalah diagram yang paling sering digunakan. Mari kita buat contoh alur login user:

flowchart TD
    Start([User Membuka Aplikasi]) --> Input[Input Email & Password]
    Input --> Validate{Validasi Data}
    Validate -->|Invalid| Error[Tampilkan Error]
    Error --> Input
    Validate -->|Valid| API[Kirim ke API]
    API --> CheckDB{Cek Database}
    CheckDB -->|User Tidak Ditemukan| NotFound[Error: User Not Found]
    CheckDB -->|Password Salah| WrongPass[Error: Wrong Password]
    CheckDB -->|Success| Token[Generate JWT Token]
    Token --> Dashboard[Redirect ke Dashboard]
    NotFound --> Input
    WrongPass --> Input
    Dashboard --> End([Selesai])

Hasilnya:

Diagram akan menampilkan proses login lengkap dengan decision points dan error handling!

Penjelasan Sintaks:

• flowchart TD - Membuat flowchart dengan arah Top to Down (TD)
• [] - Kotak biasa
• () - Kotak rounded (start/end)
• {} - Diamond (decision/condition)
• --> - Panah koneksi
• -->|Label| - Panah dengan label

Arah Diagram:

• TD atau TB - Top to Down/Bottom
• BT - Bottom to Top
• LR - Left to Right
• RL - Right to Left

Membuat Sequence Diagram

Sequence diagram berguna untuk menggambarkan interaksi antar sistem atau objek. Contoh: proses pembayaran online.

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant Payment Gateway
    participant Database

    User->>Frontend: Klik Tombol Bayar
    Frontend->>Backend: POST /api/payment
    Backend->>Database: Validasi Order
    Database-->>Backend: Order Valid
    Backend->>Payment Gateway: Request Payment
    Payment Gateway-->>User: Redirect ke Halaman Bayar
    User->>Payment Gateway: Input Data Kartu
    Payment Gateway->>Backend: Callback Payment Success
    Backend->>Database: Update Status Order
    Database-->>Backend: Updated
    Backend-->>Frontend: Payment Success
    Frontend-->>User: Tampilkan Konfirmasi

Penjelasan:

• participant - Mendefinisikan aktor/sistem
• ->> - Panah solid (synchronous call)
• -->> - Panah putus-putus (response/return)
• Text setelah panah adalah pesan yang dikirim

Class Diagram untuk Developer

Untuk kamu yang sering bekerja dengan Object-Oriented Programming, class diagram sangat berguna:

classDiagram
    class User {
        -int id
        -string email
        -string password
        -DateTime createdAt
        +login()
        +logout()
        +updateProfile()
    }

    class Post {
        -int id
        -string title
        -string content
        -int authorId
        +create()
        +update()
        +delete()
    }

    class Comment {
        -int id
        -string content
        -int postId
        -int userId
        +create()
        +delete()
    }

    User "1" -- "many" Post : writes
    Post "1" -- "many" Comment : has
    User "1" -- "many" Comment : writes

Simbol:

• - - private
• + - public
• # - protected
• ~ - package/internal

Relasi:

• -- - Association
• .. - Dependency
• --|> - Inheritance
• --* - Composition
• --o - Aggregation

Entity Relationship Diagram (ERD)

Untuk database design, ERD sangat penting:

erDiagram
    USER ||--o{ ORDER : places
    USER {
        int id PK
        string email UK
        string name
        datetime created_at
    }
    
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        int id PK
        int user_id FK
        string status
        decimal total
        datetime created_at
    }
    
    ORDER_ITEM }o--|| PRODUCT : includes
    ORDER_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
        decimal price
    }
    
    PRODUCT {
        int id PK
        string name
        string description
        decimal price
        int stock
    }

Cardinality:

• ||--|| - One to One
• ||--o{ - One to Many
• }o--o{ - Many to Many

State Diagram

Untuk menggambarkan state machine atau lifecycle:

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : Submit for Review
    Review --> Approved : Approve
    Review --> Rejected : Reject
    Rejected --> Draft : Revise
    Approved --> Published : Publish
    Published --> Archived : Archive
    Archived --> [*]

    note right of Review
        Review by Admin
        Max 3 days
    end note

Gantt Chart untuk Project Management

Visualisasi timeline project:

gantt
    title Development Sprint Timeline
    dateFormat YYYY-MM-DD
    section Planning
        Requirements Gathering    :a1, 2024-01-01, 5d
        Design Sprint             :a2, after a1, 7d
    section Development
        Setup Environment         :b1, after a2, 2d
        Backend Development       :b2, after b1, 10d
        Frontend Development      :b3, after b1, 12d
        Integration               :b4, after b2, 5d
    section Testing
        Unit Testing              :c1, after b4, 3d
        Integration Testing       :c2, after c1, 3d
        User Acceptance Testing   :c3, after c2, 5d
    section Deployment
        Production Deploy         :d1, after c3, 1d

Tips & Best Practices

1. Gunakan Subgraph untuk Grouping

flowchart TB
    subgraph Frontend
        A[React App]
        B[Redux Store]
    end
    
    subgraph Backend
        C[Express API]
        D[Database]
    end
    
    A --> C
    C --> D

2. Styling dengan CSS Classes

flowchart LR
    A[Normal]
    B[Success]:::successStyle
    C[Error]:::errorStyle
    
    classDef successStyle fill:#4ade80,stroke:#22c55e,color:#000
    classDef errorStyle fill:#f87171,stroke:#ef4444,color:#fff

3. Tambahkan Komentar

graph TD
    %% Ini adalah komentar, tidak akan ditampilkan
    A[Start] --> B[Process]
    B --> C[End]

4. Link ke URL

graph LR
    A[GitHub]
    B[Documentation]
    
    click A "https://github.com" "Visit GitHub"
    click B "https://mermaid.js.org" "Read Docs"

Integrasi dengan Tools Populer

Notion

Notion mendukung Mermaid melalui code block dengan bahasa mermaid.

Obsidian

Install plugin “Mermaid” dari community plugins.

VS Code

Install extension “Markdown Preview Mermaid Support”.

Docusaurus

Mermaid sudah built-in, tinggal enable di config:

module.exports = {
  markdown: {
    mermaid: true,
  },
  themes: ['@docusaurus/theme-mermaid'],
};

Alternatif & Perbandingan

Tool	Kelebihan	Kekurangan
Mermaid	Text-based, gratis, banyak integrasi	Kurang fleksibel untuk custom design
PlantUML	Lebih powerful, banyak fitur	Sintaks lebih kompleks
Draw.io	Visual editor, sangat fleksibel	Tidak version control friendly
Lucidchart	Profesional, kolaborasi real-time	Berbayar, tidak open source

Kesimpulan

Mermaid Chart adalah tool yang powerful untuk membuat diagram dengan cepat. Dengan sintaks sederhana berbasis teks, kamu bisa membuat berbagai jenis diagram profesional tanpa perlu tools visual yang rumit.

Kapan Menggunakan Mermaid:

• ✅ Dokumentasi teknis di README
• ✅ API documentation
• ✅ System design documents
• ✅ Database schema visualization
• ✅ Flowchart proses bisnis
• ✅ Timeline project management

Resources:

• 📚 Official Documentation
• 🎮 Live Editor
• 💻 GitHub Repository
• 📖 Cheat Sheet

Selamat mencoba! Mulai buat diagram pertamamu hari ini dan rasakan betapa mudahnya dokumentasi dengan Mermaid! 🚀

---

Punya pertanyaan atau tips tentang Mermaid? Share di kolom komentar!