Markdown으로 다이어그램 그리기 (Mermaid)

Mermaid는 텍스트 렌더링 기반의 차트 도구로, 별도의 포토샵이나 그려서 캡처할 필요 없이 마크다운 코드만으로 깔끔한 다이어그램을 만들 수 있는 강력한 기능입니다.

1. 기본 순서도 (Flowchart)

```mermaid
graph TD
    A[사용자 요청] --> B{로그인 여부}
    B -- 예 --> C[메인 페이지 이동]
    B -- 아니오 --> D[로그인 페이지 이동]
```

2. 시퀀스 다이어그램 (Sequence Diagram)

시스템 또는 객체 간의 데이터 주고받는 순서를 표현합니다.

```mermaid
sequenceDiagram
    Client->>Server: 1. API 요청 (GET /user)
    Server->>DB: 2. 사용자 정보 조회 Query
    DB-->>Server: 3. User Data 반환
    Server-->>Client: 4. JSON 응답 (200 OK)
```

3. Gantt 차트 (프로젝트 일정)

```mermaid
gantt
    title 프로젝트 개발 일정
    dateFormat YYYY-MM-DD
    section 기획
    요구사항 수집      :a1, 2026-09-01, 7d
    section 개발
    DB 설계           :a2, after a1, 5d
    프론트엔드 개발    :a3, after a2, 10d
```

직접 실습해보세요! 편집기에서 직접 실습하기 →