Skip to content

Commit 126dab5

Browse files
archivesdjarchivesdj
committed
feat: Mermaid 다이어그램 예제 추가 및 코드블럭 처리 개선
1 parent 39d2c10 commit 126dab5

File tree

2 files changed

+244
-0
lines changed

2 files changed

+244
-0
lines changed

‎content/posts/markdown-diagrams.md‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
---
2+
title: "마크다운에서 다이어그램"
3+
date: 2025-04-16
4+
draft: false
5+
description: "마크다운에서 Mermaid를 사용하여 다양한 다이어그램을 그리는 방법을 알아봅니다."
6+
tags: ["markdown", "mermaid", "diagram"]
7+
---
8+
9+
## Mermaid 다이어그램 예제
10+
11+
Mermaid는 마크다운에서 다이어그램을 그릴 수 있게 해주는 도구입니다. 각 다이어그램의 작성 방법과 실행 결과를 함께 살펴보겠습니다.
12+
13+
### 순서도 (Flowchart)
14+
15+
**작성 방법:**
16+
````
17+
```mermaid
18+
flowchart TD
19+
A[시작] --> B{조건}
20+
B -->|참| C[작업1]
21+
B -->|거짓| D[작업2]
22+
C --> E[종료]
23+
D --> E
24+
```
25+
````
26+
27+
**실행 결과:**
28+
```mermaid
29+
flowchart TD
30+
A[시작] --> B{조건}
31+
B -->|참| C[작업1]
32+
B -->|거짓| D[작업2]
33+
C --> E[종료]
34+
D --> E
35+
```
36+
37+
### 시퀀스 다이어그램
38+
39+
**작성 방법:**
40+
````
41+
```mermaid
42+
sequenceDiagram
43+
participant Client
44+
participant Server
45+
participant Database
46+
47+
Client->>Server: 요청
48+
Server->>Database: 쿼리
49+
Database-->>Server: 결과
50+
Server-->>Client: 응답
51+
```
52+
````
53+
54+
**실행 결과:**
55+
```mermaid
56+
sequenceDiagram
57+
participant Client
58+
participant Server
59+
participant Database
60+
61+
Client->>Server: 요청
62+
Server->>Database: 쿼리
63+
Database-->>Server: 결과
64+
Server-->>Client: 응답
65+
```
66+
67+
### 클래스 다이어그램
68+
69+
**작성 방법:**
70+
````
71+
```mermaid
72+
classDiagram
73+
class Animal {
74+
+String name
75+
+int age
76+
+makeSound()
77+
}
78+
class Dog {
79+
+fetch()
80+
}
81+
class Cat {
82+
+climb()
83+
}
84+
Animal <|-- Dog
85+
Animal <|-- Cat
86+
```
87+
````
88+
89+
**실행 결과:**
90+
```mermaid
91+
classDiagram
92+
class Animal {
93+
+String name
94+
+int age
95+
+makeSound()
96+
}
97+
class Dog {
98+
+fetch()
99+
}
100+
class Cat {
101+
+climb()
102+
}
103+
Animal <|-- Dog
104+
Animal <|-- Cat
105+
```
106+
107+
### 상태 다이어그램
108+
109+
**작성 방법:**
110+
````
111+
```mermaid
112+
stateDiagram-v2
113+
[*] --> Idle
114+
Idle --> Processing: 시작
115+
Processing --> Success: 완료
116+
Processing --> Error: 실패
117+
Success --> [*]
118+
Error --> [*]
119+
```
120+
````
121+
122+
**실행 결과:**
123+
```mermaid
124+
stateDiagram-v2
125+
[*] --> Idle
126+
Idle --> Processing: 시작
127+
Processing --> Success: 완료
128+
Processing --> Error: 실패
129+
Success --> [*]
130+
Error --> [*]
131+
```
132+
133+
### 간트 차트
134+
135+
**작성 방법:**
136+
````
137+
```mermaid
138+
gantt
139+
title 프로젝트 일정
140+
dateFormat YYYY-MM-DD
141+
section 섹션1
142+
작업1 :a1, 2024-03-21, 3d
143+
작업2 :a2, after a1, 2d
144+
section 섹션2
145+
작업3 :a3, 2024-03-22, 2d
146+
작업4 :a4, after a3, 1d
147+
```
148+
````
149+
150+
**실행 결과:**
151+
```mermaid
152+
gantt
153+
title 프로젝트 일정
154+
dateFormat YYYY-MM-DD
155+
section 섹션1
156+
작업1 :a1, 2024-03-21, 3d
157+
작업2 :a2, after a1, 2d
158+
section 섹션2
159+
작업3 :a3, 2024-03-22, 2d
160+
작업4 :a4, after a3, 1d
161+
```
162+
163+
### 파이 차트
164+
165+
**작성 방법:**
166+
````
167+
```mermaid
168+
pie
169+
title 데이터 분포
170+
"데이터1" : 30
171+
"데이터2" : 20
172+
"데이터3" : 50
173+
```
174+
````
175+
176+
**실행 결과:**
177+
```mermaid
178+
pie
179+
title 데이터 분포
180+
"데이터1" : 30
181+
"데이터2" : 20
182+
"데이터3" : 50
183+
```
184+
185+
### 엔티티 관계 다이어그램
186+
187+
**작성 방법:**
188+
````
189+
```mermaid
190+
erDiagram
191+
CUSTOMER ||--o{ ORDER : places
192+
ORDER ||--|{ LINE-ITEM : contains
193+
CUSTOMER {
194+
string name
195+
string email
196+
}
197+
ORDER {
198+
int orderNumber
199+
date orderDate
200+
}
201+
LINE-ITEM {
202+
int quantity
203+
float price
204+
}
205+
```
206+
````
207+
208+
**실행 결과:**
209+
```mermaid
210+
erDiagram
211+
CUSTOMER ||--o{ ORDER : places
212+
ORDER ||--|{ LINE-ITEM : contains
213+
CUSTOMER {
214+
string name
215+
string email
216+
}
217+
ORDER {
218+
int orderNumber
219+
date orderDate
220+
}
221+
LINE-ITEM {
222+
int quantity
223+
float price
224+
}
225+
```
226+
227+
## Mermaid 관련 링크
228+
229+
- [Mermaid 공식 문서](https://mermaid.js.org/)
230+
- [Mermaid Live Editor](https://mermaid.live/)
231+
- [Mermaid GitHub 저장소](https://github.com/mermaid-js/mermaid)
232+
- [Mermaid 다이어그램 유형](https://mermaid.js.org/syntax/flowchart.html)
233+
- [Mermaid 문법 가이드](https://mermaid.js.org/intro/n00b-syntaxReference.html)
234+
- [Mermaid 설정 옵션](https://mermaid.js.org/config/setup/modules/mermaidAPI.html)

‎layouts/_default/_markup/render-codeblock-mermaid.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{{ if eq .Type "mermaid" }}
2+
<pre class="mermaid">
3+
{{- .Inner | htmlEscape | safeHTML }}
4+
</pre>
5+
{{ .Page.Store.Set "hasMermaid" true }}
6+
{{ else }}
7+
<pre class="language-{{ .Type }}">
8+
{{- .Inner | htmlEscape | safeHTML }}
9+
</pre>
10+
{{ end }}

0 commit comments

Comments
 (0)