Cloudwiki/위키 문법 가이드/차트

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


---

## 기본 사용법

코드 블록의 언어로 `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)를 참고하세요.

# 차트

` ```chart ` 코드 블록으로 데이터 차트를 그릴 수 있습니다. 다이어그램과 마찬가지로 차트가 있는 문서에서만 렌더링 라이브러리(Chart.js)를 불러오며, 라이트/다크 테마와 색 테마(스킨)를 자동으로 따라갑니다.

```chart
type: bar
labels: [1Q, 2Q, 3Q, 4Q]
series:
  매출: [120, 150, 170, 210]
  이익: [20, 35, 40, 55]
```

````
```chart
type: bar
labels: [1Q, 2Q, 3Q, 4Q]
series:
  매출: [120, 150, 170, 210]
  이익: [20, 35, 40, 55]
```
````

입력은 단순 키-값 형식으로 한정되며 임의 JavaScript 옵션은 지원하지 않습니다.

| 키 | 값 | 설명 |
| --- | --- | --- |
| `type:` | `bar` · `line` · `pie` · `doughnut` · `radar` | 차트 종류 (필수) |
| `labels:` | `[값, 값, ...]` | 축/항목 라벨 (필수) |
| `series:` | 다음 줄부터 들여쓰기로 `이름: [숫자, ...]` 나열 | 데이터 시리즈 (1개 이상, 여러 개 가능) |

작성 규칙:
- 시리즈 항목은 반드시 **들여쓰기**해서 작성합니다.
- 각 시리즈의 값 개수는 `labels` 개수와 같아야 합니다.
- 시리즈는 최대 8개, `pie`/`doughnut` 의 항목(labels)도 최대 8개까지 지원합니다.
- 형식이 잘못되면 문서가 깨지지 않고 해당 위치에 오류 안내 박스가 표시됩니다.
- 코드 블록 내부는 위키 문법이 동작하지 않으므로 `{}` · `[]` 기호가 다른 확장 문법과 충돌하지 않습니다.

---

## 예시

### 선 그래프 (line)

```chart
type: line
labels: [1월, 2월, 3월, 4월, 5월]
series:
  방문자: [320, 410, 390, 480, 560]
```

````
```chart
type: line
labels: [1월, 2월, 3월, 4월, 5월]
series:
  방문자: [320, 410, 390, 480, 560]
```
````

### 도넛 차트 (doughnut)

```chart
type: doughnut
labels: [크롬, 사파리, 파이어폭스, 기타]
series:
  점유율: [64, 19, 8, 9]
```

````
```chart
type: doughnut
labels: [크롬, 사파리, 파이어폭스, 기타]
series:
  점유율: [64, 19, 8, 9]
```
````

### 레이더 차트 (radar)

```chart
type: radar
labels: [속도, 안정성, 문서화, 확장성, 커뮤니티]
series:
  프레임워크A: [80, 90, 70, 85, 75]
  프레임워크B: [65, 70, 90, 60, 95]
```

````
```chart
type: radar
labels: [속도, 안정성, 문서화, 확장성, 커뮤니티]
series:
  프레임워크A: [80, 90, 70, 85, 75]
  프레임워크B: [65, 70, 90, 60, 95]
```
````

### 다중 시리즈 막대 그래프

```chart
type: bar
labels: [월, 화, 수, 목, 금]
series:
  방문자: [120, 150, 130, 170, 200]
  구매자: [30, 45, 40, 55, 60]
  재방문자: [15, 20, 18, 22, 28]
```

````
```chart
type: bar
labels: [월, 화, 수, 목, 금]
series:
  방문자: [120, 150, 130, 170, 200]
  구매자: [30, 45, 40, 55, 60]
  재방문자: [15, 20, 18, 22, 28]
```
````