Mermaid 다이어그램 예제
Mermaid는 마크다운에서 다이어그램을 그릴 수 있게 해주는 도구입니다. 각 다이어그램의 작성 방법과 실행 결과를 함께 살펴보겠습니다.
순서도 (Flowchart)
작성 방법:
```mermaid
flowchart TD
A[시작] --> B{조건}
B -->|참| C[작업1]
B -->|거짓| D[작업2]
C --> E[종료]
D --> E
```
실행 결과:
flowchart TD
A[시작] --> B{조건}
B -->|참| C[작업1]
B -->|거짓| D[작업2]
C --> E[종료]
D --> E
시퀀스 다이어그램
작성 방법:
```mermaid
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: 요청
Server->>Database: 쿼리
Database-->>Server: 결과
Server-->>Client: 응답
```
실행 결과:
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: 요청
Server->>Database: 쿼리
Database-->>Server: 결과
Server-->>Client: 응답
클래스 다이어그램
작성 방법:
```mermaid
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+fetch()
}
class Cat {
+climb()
}
Animal <|-- Dog
Animal <|-- Cat
```
실행 결과:
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+fetch()
}
class Cat {
+climb()
}
Animal <|-- Dog
Animal <|-- Cat
상태 다이어그램
작성 방법:
```mermaid
stateDiagram-v2
[*] --> Idle
Idle --> Processing: 시작
Processing --> Success: 완료
Processing --> Error: 실패
Success --> [*]
Error --> [*]
```
실행 결과:
stateDiagram-v2
[*] --> Idle
Idle --> Processing: 시작
Processing --> Success: 완료
Processing --> Error: 실패
Success --> [*]
Error --> [*]
간트 차트
작성 방법:
```mermaid
gantt
title 프로젝트 일정
dateFormat YYYY-MM-DD
section 섹션1
작업1 :a1, 2024-03-21, 3d
작업2 :a2, after a1, 2d
section 섹션2
작업3 :a3, 2024-03-22, 2d
작업4 :a4, after a3, 1d
```
실행 결과:
gantt
title 프로젝트 일정
dateFormat YYYY-MM-DD
section 섹션1
작업1 :a1, 2024-03-21, 3d
작업2 :a2, after a1, 2d
section 섹션2
작업3 :a3, 2024-03-22, 2d
작업4 :a4, after a3, 1d
파이 차트
작성 방법:
```mermaid
pie
title 데이터 분포
"데이터1" : 30
"데이터2" : 20
"데이터3" : 50
```
실행 결과:
pie
title 데이터 분포
"데이터1" : 30
"데이터2" : 20
"데이터3" : 50
엔티티 관계 다이어그램
작성 방법:
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER {
string name
string email
}
ORDER {
int orderNumber
date orderDate
}
LINE-ITEM {
int quantity
float price
}
```
실행 결과:
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER {
string name
string email
}
ORDER {
int orderNumber
date orderDate
}
LINE-ITEM {
int quantity
float price
}