Mermaid Diagram Guide

Mermaid 11+ 다이어그램 작성을 위한 간결한 가이드.

Quick Reference

Flowchart

flowchart TD
    A[Start] --> B{Is valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[End]
    D --> E

노드 형태

flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C --> D([Stadium])
    D --> E[[Subroutine]]
    E --> F[(Database)]

서브그래프

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

Sequence Diagram

sequenceDiagram
    actor User
    participant App
    participant API
    participant DB

    User->>App: Click Login
    App->>API: POST /auth/login
    API->>DB: Query user
    DB-->>API: User data
    API-->>App: JWT Token
    App-->>User: Redirect to Dashboard

조건분기

sequenceDiagram
    participant Client
    participant Server

    Client->>Server: Request
    alt Success
        Server-->>Client: 200 OK
    else Error
        Server-->>Client: 500 Error
    end

Class Diagram

classDiagram
    class User {
        +String id
        +String name
        +String email
        +login()
        +logout()
    }

    class Post {
        +String id
        +String title
        +String content
        +publish()
    }

    User "1" --> "*" Post : writes

ER Diagram

erDiagram
    USER ||--o{ POST : writes
    USER ||--o{ COMMENT : creates
    POST ||--o{ COMMENT : has

    USER {
        uuid id PK
        string name
        string email UK
        timestamp created_at
    }

    POST {
        uuid id PK
        uuid author_id FK
        string title
        text content
    }

    COMMENT {
        uuid id PK
        uuid user_id FK
        uuid post_id FK
        text content
    }

State Diagram

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : Submit
    Review --> Published : Approve
    Review --> Draft : Reject
    Published --> Archived : Archive
    Archived --> [*]

C4 Architecture

C4Context
    title System Context Diagram

    Person(user, "User", "Application user")

    System(webapp, "Web Application", "Next.js frontend")
    System(api, "API Server", "Backend service")

    System_Ext(stripe, "Stripe", "Payment processing")
    System_Ext(sendgrid, "SendGrid", "Email service")

    Rel(user, webapp, "Uses")
    Rel(webapp, api, "API calls")
    Rel(api, stripe, "Payments")
    Rel(api, sendgrid, "Emails")

Gantt Chart

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD

    section Planning
    Requirements    :a1, 2024-01-01, 7d
    Design          :a2, after a1, 5d

    section Development
    Backend         :b1, after a2, 14d
    Frontend        :b2, after a2, 14d

    section Testing
    QA              :c1, after b1, 7d

Pie Chart

pie showData
    title Technology Stack
    "TypeScript" : 45
    "Python" : 30
    "Go" : 15
    "Other" : 10

Git Graph

gitGraph
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit

Best Practices

• 단순하게: 노드 20-30개 이하로 유지
• 방향성: TD(위→아래) 또는 LR(왼→오) 일관성
• 레이블: 모든 연결에 명확한 레이블
• 색상: 필요시만 스타일 적용
• 서브그래프: 관련 노드 그룹화

문서 내 사용

````markdown

flowchart LR
    A --> B --> C

````

Last Updated: 2026-01-21 Version: 2.0.0