Standar pembuatan diagram arsitektur menggunakan Mermaid untuk dokumentasi Divisi IT

Semua diagram arsitektur di Divisi IT menggunakan Mermaid — diagram dari kode, version controlled, gampang di-maintain.

Flowchart — Alur Sistem

Gunakan flowchart untuk menggambarkan alur proses atau arsitektur sistem:

flowchart TB
    subgraph User
        UI[Web/Mobile App]
    end
    subgraph "Edge"
        LB[Load Balancer]
        CDN[Cloudflare CDN]
    end
    subgraph "Application"
        API[API Gateway]
        SVC1[Service Auth]
        SVC2[Service Payment]
        SVC3[Service Notification]
    end
    subgraph "Data"
        DB[(PostgreSQL)]
        Cache[(Redis)]
        Queue[RabbitMQ]
    end
    UI --> CDN --> LB --> API
    API --> SVC1 & SVC2 & SVC3
    SVC1 --> DB & Cache
    SVC2 --> DB & Queue
    SVC3 --> Queue

Sequence Diagram — Interaksi Service

Untuk menggambarkan komunikasi antar service:

sequenceDiagram
    participant Client
    participant Gateway as API Gateway
    participant Auth as Auth Service
    participant Payment as Payment Service
    participant DB as Database

    Client->>Gateway: POST /api/checkout
    Gateway->>Auth: Validate token
    Auth-->>Gateway: User ID
    Gateway->>Payment: Process payment
    Payment->>DB: Save transaction
    DB-->>Payment: Success
    Payment-->>Gateway: Payment ID
    Gateway-->>Client: 200 OK + transaction ID

Contoh Infrastruktur

flowchart LR
    subgraph "Production"
        FE1[Frontend :3000]
        BE1[Backend :8080]
        DB1[(PostgreSQL)]
    end
    subgraph "Staging"
        FE2[Frontend :3000]
        BE2[Backend :8080]
        DB2[(PostgreSQL)]
    end
    subgraph "Development"
        FE3[Frontend :5173]
        BE3[Backend :8080]
        DB3[(SQLite)]
    end

    style FE1 fill:#22c55e,color:#fff
    style BE1 fill:#22c55e,color:#fff
    style FE2 fill:#eab308,color:#000
    style BE2 fill:#eab308,color:#000
    style FE3 fill:#3b82f6,color:#fff
    style BE3 fill:#3b82f6,color:#fff

ERD — Entity Relationship

erDiagram
    USER ||--o{ PROJECT : "memiliki"
    PROJECT ||--|{ DEPLOYMENT : "memiliki"
    PROJECT ||--o{ ENV_VAR : "memiliki"
    PROJECT }o--|| TEAM : "dimiliki oleh"
    TEAM ||--o{ MEMBER : "terdiri dari"
    MEMBER }o--|| USER : "adalah"
    USER ||--|| PROFILE : "memiliki"

Timeline — Roadmap

timeline
    title IT Division Roadmap 2026
    Q1 : Infrastructure migration
        : Monitoring setup
        : Security audit
    Q2 : Microservices refactor
        : API gateway implementation
        : CI/CD pipeline upgrade
    Q3 : Mobile app launch
        : Documentation portal
        : Team scaling
    Q4 : AI integration
        : Automasi operasional
        : Q4 review & planning 2027

Aturan Penggunaan

Diagram Type	Untuk	Contoh
`flowchart`	Arsitektur sistem, alur proses	Deploy flow, network topology
`sequenceDiagram`	Interaksi service, API flow	Checkout flow, auth flow
`classDiagram`	Struktur data, domain model	Entity relationship
`erDiagram`	Database design	Table relationships
`stateDiagram`	State machine, workflow	Deployment status, order status
`gantt`	Timeline project	Sprint plan, roadmap
`gitgraph`	Branch strategy	Gitflow visualization
`pie`	Distribusi data	Tech stack, resource allocation

Diagram Arsitektur