Cara Mudah Membuat Diagram dengan Mermaid Chart

Mermaid adalah tools yang powerful untuk membuat diagram dan visualisasi menggunakan teks dan kode. Dalam artikel ini, saya akan membahas cara menggunakan Mermaid untuk berbagai kebutuhan dokumentasi.

Apa itu Mermaid?

Mermaid adalah library JavaScript yang memungkinkan Anda membuat diagram dan chart menggunakan sintaks mirip Markdown. Keunggulan utama Mermaid adalah:

  • Version Control Friendly: Diagram berbasis teks mudah di-version control
  • Kolaboratif: Developer dapat mengedit dan review diagram via code review
  • Otomatis: Diagram ter-render otomatis di browser

Jenis Diagram yang Didukung

1. Flowchart

Flowchart adalah diagram yang paling sering digunakan untuk merepresentasikan alur proses atau algoritma.

flowchart TD
    A[Mulai] --> B{Apakah login?}
    B -->|Ya| C[Dashboard]
    B -->|Tidak| D[Login Page]
    D --> E[Input Kredensial]
    E --> F{Valid?}
    F -->|Ya| C
    F -->|Tidak| D
    C --> G[Selesai]

2. Sequence Diagram

Sequence diagram digunakan untuk menggambarkan interaksi antar objek dalam urutan waktu.

sequenceDiagram
    participant User
    participant Frontend
    participant API
    participant Database
    
    User->>Frontend: Submit Form
    Frontend->>API: POST /api/users
    API->>Database: INSERT user
    Database-->>API: Success
    API-->>Frontend: Response 201
    Frontend-->>User: Show Success Message

3. Class Diagram

Class diagram membantu dalam mendesain struktur object-oriented.

classDiagram
    class User {
        +String id
        +String name
        +String email
        +login()
        +logout()
    }
    
    class Post {
        +String id
        +String title
        +String content
        +publish()
    }
    
    User "1" --> "*" Post : writes

Cara Menggunakan Mermaid

Di Markdown Files

Untuk menggunakan Mermaid di file Markdown, cukup buat code block dengan bahasa mermaid:

```mermaid
flowchart LR
    A[Hard] -->|Text| B(Round)
    B --> C{Decision}
    C -->|One| D[Result 1]
    C -->|Two| E[Result 2]
```

Di GitHub

GitHub mendukung Mermaid secara native di:

  • README.md
  • Pull request descriptions
  • Issue comments
  • Wiki pages

Di VS Code

Install extension Markdown Preview Mermaid Support untuk preview real-time.

Tips dan Best Practices

  1. Gunakan Subgraph untuk Organisasi

    flowchart TB
    subgraph Frontend
        A[React App]
        B[State Management]
    end
    subgraph Backend
        C[API Server]
        D[Database]
    end
    A --> C
    B --> C
    C --> D

  2. Komentar untuk Dokumentasi

    flowchart LR
    %% This is a comment
    A[Start] --> B[Process]
    B --> C[End]

  3. Styling dengan CSS Classes

    flowchart LR
    A[Default]:::className
    B[Styled]:::className
    
    classDef className fill:#f9f,stroke:#333,stroke-width:4px

Kesimpulan

Mermaid adalah tools yang sangat berguna untuk:

  • Dokumentasi teknis
  • Diagram arsitektur sistem
  • Flowchart proses bisnis
  • Visualisasi data

Dengan sintaks yang sederhana dan dukungan yang luas, Mermaid membuat pembuatan diagram menjadi lebih mudah dan maintainable.