Membuat Diagram Sistem Lebih Cepat dengan Mermaid,

Pendahuluan

Sebagai System Analyst, membuat diagram adalah pekerjaan sehari-hari. Tapi menggambar diagram secara manual bisa memakan waktu. Artikel ini membahas cara mempercepat proses dengan kombinasi Mermaid, draw.io, dan AI.

Mengapa Mermaid?

Mermaid adalah syntax berbasis teks untuk membuat diagram. Keunggulannya:

• Version-controlled

• Cepat

• Portable

• AI-friendly

Jenis Diagram yang Bisa Dibuat

1. Sequence Diagram

Menggambarkan interaksi antar objek dalam urutan waktu.

sequenceDiagram
    participant User
    participant Frontend
    participant API
    participant Database
    User->>Frontend: Submit Form
    Frontend->>API: POST /data
    API->>Database: INSERT INTO table
    Database-->>API: Success
    API-->>Frontend: 200 OK
    Frontend-->>User: Show Success

2. Flowchart

Alur proses dengan decision point.

flowchart TD
    Start([Mulai]) --> Input[Input Data]
    Input --> Validate{Valid?}
    Validate -->|Ya| Save[Simpan ke DB]
    Validate -->|Tidak| Error[Tampilkan Error]
    Error --> Input
    Save --> End([Selesai])

3. ERD (Entity Relationship Diagram)

Struktur database dan relasi antar tabel. Contoh ERD untuk sistem e-commerce sederhana:

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER_ITEM }o--|| PRODUCT : references
    PRODUCT }o--|| CATEGORY : belongs_to
    ORDER ||--o| PAYMENT : has
    ORDER ||--o| SHIPMENT : has

    CUSTOMER {
        int id PK
        string name
        string email
        string phone
        string address
    }
    ORDER {
        int id PK
        int customer_id FK
        datetime order_date
        string status
        decimal total_amount
    }
    ORDER_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
        decimal unit_price
    }
    PRODUCT {
        int id PK
        string name
        decimal price
        int stock
        int category_id FK
    }
    CATEGORY {
        int id PK
        string name
        string description
    }
    PAYMENT {
        int id PK
        int order_id FK
        string method
        decimal amount
        string status
    }
    SHIPMENT {
        int id PK
        int order_id FK
        string courier
        string tracking_no
        string status
    }

4. Class Diagram

Struktur class dan hubungannya untuk desain OOP. Contoh untuk authentication service:

classDiagram
    class AuthService {
        -UserRepository userRepo
        -TokenService tokenService
        +login(email, password) Token
        +register(userData) User
        +logout(token) void
        +refreshToken(token) Token
    }

    class UserRepository {
        +findByEmail(email) User
        +create(userData) User
        +update(id, data) User
        +delete(id) void
    }

    class TokenService {
        -secretKey String
        +generateToken(user) String
        +validateToken(token) Boolean
        +decodeToken(token) Payload
    }

    class User {
        +int id
        +String name
        +String email
        +String hashedPassword
        +String role
        +DateTime createdAt
    }

    class Token {
        +String accessToken
        +String refreshToken
        +DateTime expiresAt
    }

    AuthService --> UserRepository : uses
    AuthService --> TokenService : uses
    UserRepository --> User : manages
    AuthService --> Token : returns

Workflow: AI + Mermaid + Draw.io

Step 1: Deskripsikan Sistem ke AI

Berikan deskripsi use case dalam bentuk paragraf ke ChatGPT/AI.

Step 2: Minta Mermaid Code

Contoh prompt:

Step 3: Preview & Refine

Paste mermaid code ke Notion atau mermaid.live untuk preview. Refine jika perlu.

Step 4: Export ke Draw.io (Opsional)

Jika butuh diagram yang lebih polished untuk presentasi, export ke draw.io dan tambahkan styling.

5. State Diagram

Menggambarkan perubahan state pada sebuah entitas. Contoh state diagram untuk order:

stateDiagram-v2
    [*] --> Pending : Order Created
    Pending --> Confirmed : Payment Received
    Pending --> Cancelled : User Cancel
    Confirmed --> Processing : Admin Approve
    Processing --> Shipped : Courier Pickup
    Shipped --> Delivered : Customer Received
    Delivered --> [*]
    Cancelled --> [*]
    Shipped --> Returned : Customer Return
    Returned --> [*]

Tips Produktivitas

• Simpan

• Gunakan

• Kombinasikan dengan

• Buat

Ditulis oleh Dadang Kriswanto — System Analyst & Blogger di dadang.kriswanto.my.id