Mermaid 사용법

우몽가·2025년 4월 27일

Flowchart

flowchart TD
    A[Start] --> B{조건 확인}
    B -- 예 --> C[처리 1]
    B -- 아니오 --> D[처리 2]
    C --> E[End]
    D --> E

Sequence Diagram

sequenceDiagram
    participant User
    participant Server

    User->>Server: 로그인 요청
    Server-->>User: 토큰 반환

Class Diagram

classDiagram
    class User {
        +String name
        +login()
    }
    class Admin {
        +String role
    }
    User <|-- Admin

Gantt Chart

gantt
    title 프로젝트 일정
    dateFormat  YYYY-MM-DD
    section 준비
    기획       :a1, 2025-04-01, 3d
    디자인     :after a1, 5d
    section 개발
    Frontend   :2025-04-10, 7d
    Backend    :2025-04-10, 10d

ER Diagram

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    USER {
        int id
        string name
        string email
    }
    ORDER {
        int id
        date order_date
        int user_id
    }
    LINE_ITEM {
        int id
        int order_id
        int product_id
        int quantity
    }

Class Diagram

classDiagram
    class User {
        +int id
        +String name
        +String email
    }
    class Order {
        +int id
        +Date orderDate
        +int userId
    }
    class LineItem {
        +int id
        +int orderId
        +int productId
        +int quantity
    }

    User "1" --> "many" Order : places
    Order "1" --> "many" LineItem : contains

State Diagram

stateDiagram
    [*] --> Idle
    Idle --> Loading : click
    Loading --> Success : data loaded
    Loading --> Error : failed
    Error --> Idle : retry

Mindmap

mindmap
  root
    개발
      프론트엔드
      백엔드
    운영
      모니터링
      배포

Git Graph

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

Timeline

timeline
    title 서비스 릴리즈 일정
    2025-01-01 : 기획 시작
    2025-02-01 : 개발 시작
    2025-04-01 : 베타 릴리즈
    2025-06-01 : 정식 오픈
profile
우몽가의 노트

0개의 댓글