Cloudwiki/위키 문법 가이드/mermaid

` ```mermaid ` 코드펜스를 사용하면 **텍스트로 다이어그램**(플로우차트·시퀀스·간트·ER 등)을 작성할 수 있습니다. 외부 이미지 편집기 없이 본문 안에서 다이어그램을 작성·수정할 수 있어, 변경 이력(diff)과 검색이 그대로 적용됩니다.

상위 문서: [[Cloudwiki/위키 문법 가이드]]

---

## 기본 사용법

코드 블록의 언어로 `mermaid` 를 지정하면, 코드가 아닌 다이어그램으로 렌더링됩니다.

```mermaid
flowchart TD
    A[시작] --> B
    B -->|예| C[처리]
    B -->|아니오| D[종료]
    C --> D
```

위 다이어그램은 아래와 같이 작성합니다.

~~~
```mermaid
flowchart TD
    A[시작] --> B
    B -->|예| C[처리]
    B -->|아니오| D[종료]
    C --> D
```
~~~

> {mdi:information-outline} 코드펜스 내부의 내용은 위키 문법으로 해석되지 않으므로, Mermaid 문법의 `{}`·`|...|`·`==>` 같은 기호가 위키 확장 문법과 충돌하지 않습니다.

---

## 지원하는 다이어그램

Mermaid 가 지원하는 주요 다이어그램 종류입니다. 코드 첫 줄의 키워드로 종류를 지정합니다.

| 분류 | 키워드 |
| --- | --- |
| 흐름 / 관계 | `flowchart` · `sequenceDiagram` · `classDiagram` · `stateDiagram` · `erDiagram` |
| 일정 / 계획 | `gantt` · `timeline` · `journey` |
| 데이터 | `pie` · `quadrantChart` |
| 기타 | `gitGraph` · `mindmap` |

### 시퀀스 다이어그램

```mermaid
sequenceDiagram
    participant U as 사용자
    participant W as 위키
    U->>W: 문서 요청
    W-->>U: 렌더링된 문서
```

~~~
```mermaid
sequenceDiagram
    participant U as 사용자
    participant W as 위키
    U->>W: 문서 요청
    W-->>U: 렌더링된 문서
```
~~~

### 간트 차트

```mermaid
gantt
    title 릴리즈 일정
    dateFormat YYYY-MM-DD
    section 개발
    백엔드 구현   :a1, 2026-01-01, 7d
    프론트엔드 구현 :after a1, 5d
```

~~~
```mermaid
gantt
    title 릴리즈 일정
    dateFormat YYYY-MM-DD
    section 개발
    백엔드 구현   :a1, 2026-01-01, 7d
    프론트엔드 구현 :after a1, 5d
```
~~~

### 파이 차트

```mermaid
pie title 사용 언어 비율
    "TypeScript" : 60
    "CSS" : 25
    "기타" : 15
```

~~~
```mermaid
pie title 사용 언어 비율
    "TypeScript" : 60
    "CSS" : 25
    "기타" : 15
```
~~~

### ER 다이어그램

```mermaid
erDiagram
    USER ||--o{ PAGE : writes
    PAGE ||--o{ REVISION : has
```

~~~
```mermaid
erDiagram
    USER ||--o{ PAGE : writes
    PAGE ||--o{ REVISION : has
```
~~~

---

## 동작 특징

- **테마 자동 대응**: 라이트 / 다크 모드에 맞춰 다이어그램 색이 자동으로 전환됩니다. 테마를 바꾸면 즉시 다시 그려집니다.
- **지연 로드**: 다이어그램이 포함된 문서에서만 렌더링 라이브러리를 불러옵니다. 다이어그램이 없는 문서에는 추가 비용이 없습니다.
- **오류 표시**: 다이어그램 문법에 오류가 있어도 문서 전체가 깨지지 않고, 해당 위치에 오류 메시지 박스만 표시됩니다.

---

## 참고

더 많은 다이어그램 종류와 상세 문법은 [Mermaid 공식 문서](https://mermaid.js.org)를 참고하세요.