[[Mermaid]]를 사용하면 [[마크다운]]처럼 텍스트 방식으로 코드를 서술하여 그래프와 [[다이어그램]]을 그릴 수 있다.
## 파이 그래프
### 기본 문법
우선 간단한 파이 그래프부터 그려 볼까?
```
```mermaid
pie title 내가 좋애하는 고기
"소고기": 20
"돼지고기": 50
"닭고기": 20
"기타고기": 10
```
```mermaid
pie title 내가 좋애하는 고기
"소고기": 20
"돼지고기": 50
"닭고기": 20
"기타고기": 10
```
### 자동으로 백분율로 변환
굳이 100%에 맞추지 않아도 된다. 그냥 필요한 숫자를 쓰면 알아서 백분율로 변환해준다.
```
```mermaid
pie title 내가 구입한 책
"소설": 36
"수필": 24
"자기개발": 8
"IT": 73
"종교": 32
```
```mermaid
pie title 내가 구입한 책
"소설": 36
"수필": 24
"자기개발": 8
"IT": 73
"종교": 32
```
---
## 플로우 차트
### 그래프의 방향
위에서 아래로
```
```mermaid
graph TD
처음 --> 끝
```
```mermaid
graph TD
처음 --> 끝
```
왼쪽에서 오른쪽으로
```
```mermaid
graph LR
처음 --> 끝
```
```mermaid
graph LR
처음 --> 끝
```
그래프 방향을 나타내는 단어
- TB: Top to Bottom (위에서 아래로)
- TD: top down (위에서 아래로)
- BT: Bottom to Top (아래에서 위로)
- LR: Left to Right (왼쪽에서 오른쪽으로))
- RL: Right to Left (오른쪽에서 왼쪽으로)
### 노드와 모양
기본적인 노드 모양
```
```mermaid
graph LR
id
```
```mermaid
graph LR
id
```
글씨가 있는 노드
```
```mermaid
graph LR
id["나는 상자야!"]
```
```mermaid
graph LR
id["나는 상자야!"]
```
여러 가지 노드 모양
```
```mermaid
graph LR
둥근사각("모서리 둥근 사각형")
더둥근사각(["모서리가 더 둥근 사각형"])
서브루틴[["서브루틴 모양"]]
납작원통[("나는야, 데이터베이스!")]
동그라미(("동그라미 그리려다..."))
왼쪽오목>"아, 왼쪽이 오목해!"]
육각{{"벌집에는 벌꿀이 가득~!"}}
마름모{"아몬드가 죽으면? 다이아몬드!"}
오른평행[/"오른쪽으로 기대!"/]
왼평행[\"왼쪽으로 기대!"\]
사다리꼴[/"뜀틀 넘어봤니?"\]
거꿀사라디[\"배 접어주세요!"/]
```
```mermaid
graph LR
둥근사각("모서리 둥근 사각형")
더둥근사각(["모서리가 더 둥근 사각형"])
서브루틴[["서브루틴 모양"]]
납작원통[("나는야, 데이터베이스!")]
동그라미(("동그라미 그리려다..."))
왼쪽오목>"아, 왼쪽이 오목해!"]
육각{{"벌집에는 벌꿀이 가득~!"}}
마름모{"아몬드가 죽으면? 다이아몬드!"}
오른평행[/"오른쪽으로 기대!"/]
왼평행[\"왼쪽으로 기대!"\]
사다리꼴[/"뜀틀 넘어봤니?"\]
거꿀사라디[\"배 접어주세요!"/]
```
### 연결합시다!
노드와 노르를 연결할 때는 `-->`, `---` , `-.->`처럼 직관적인 기호를 사용한 수 있다.
```
```mermaid
graph LR
A-->B
C---D
```
```mermaid
graph LR
A-->B
C---D
```
연결 중간에 텍스트도 넣을 수 있다.
```
```mermaid
graph LR
A-- 이것은 텍스트 ---B
C---|저 것도 텍스트|D
```
```mermaid
graph LR
A-- 이것은 텍스트 ---B
C---|저것도 텍스트|D
```
```
```mermaid
graph LR
A-- 요것은 텍스트 -->B
C-->|요것도 텍스트|D
```
```mermaid
graph LR
A-- 요것은 텍스트 -->B
C-->|요것도 텍스트|D
```
아직까지 쌍방향 화살표는 안되지만 나름 컨셉맵을 그릴 때는 이런 식으로 할 수는 있다.
```
```mermaid
graph LR
A -->|이리 가고|B
B -->|저리 가고|A
```
```mermaid
graph LR
A -->|이리 가고|B
B -->|저리 가고|A
```
이것은 점선.
```
```mermaid
graph LR
A -.->B
C -. 텍스트예요! .-> D
```
```mermaid
graph LR
A -.->B
C -. 텍스트예요! .-> D
```
### 진짜 그려봅시다!
```
```mermaid
graph LR
R[교육의 3요소] --> A[교육 주체] -.-> AA((교사, 부모, 연장자))
R --> B[교육 객체] -.-> BB((학생, 자녀, 연소자))
R --> C[교육 매체] -.-> CC((교육과정, 교육내용))
```
```mermaid
graph LR
R[교육의 3요소] --> A[교육 주체] -.-> AA((교사, 부모, 연장자))
R --> B[교육 객체] -.-> BB((학생, 자녀, 연소자))
R --> C[교육 매체] -.-> CC((교육과정, 교육내용))
```
```
```mermaid
graph TD
A[일어난다.] --> B{배가 고픈가?}
B -- Yes --> C[밥을 먹는다.] --> D[잠을 잔다]
B -- No --> D
D --> A
```
```mermaid
graph TD
A[일어난다.] --> B{배가 고픈가?}
B -- Yes --> C[밥을 먹는다.] --> D[잠을 잔다.]
B -- No --> D
D --> A
```
규칙을 알고 있으면 생각보다 굉장히 쉽게 그래프를 그릴 수 있다. [[GUI]]에 있는 팔레트에서 이것 저것 도형을 끌고와서 그리는 것보다 이쪽이 훨씬 빨르다. 물론 예쁘지는 않다. 선 모양이 마음에 들지 않는다.
[[Mermaid]]는 이 밖에도 [[클래스 다이어그램]], [[상태 다이어그램]], [[개체 관계 다이어그램]] 등 개발자의 손이 많이 가능 여러 가지 다이어그램을 간단한 [[형식 언어]]로 그릴 수 있어서 좋다.