๐ ํ์ด์ฌ ๊ฐ๋ฐ์์ ๋จธ๋ฉ์ด๋ ํฌ๋ค์ ์ํ ํฐ ์์: 'mmdc'๊ฐ ๋จธ๋ฉ์ด๋ ๋ค์ด์ด๊ทธ๋จ์ ํ์ด์ฌ์ฒ๋ผ ์ฝ๊ฒ ๋ง๋ค๋ค! ๐
Source: Dev.to
Mermaid๋ ๋ฌด์์ธ๊ฐ?
Mermaid๋ ๋จ์ํ ํ ์คํธ ๊ธฐ๋ฐ ๋ฌธ๋ฒ(Markdown๊ณผ ๋งค์ฐ ์ ์ฌํจ)์ผ๋ก ๋ค์ด์ด๊ทธ๋จ์ ์ ์ํ๊ณ ์ด๋ฅผ ์ค์ ๋ค์ด์ด๊ทธ๋จ์ผ๋ก ๋ ๋๋งํด ์ฃผ๋ ์คํโ์์ค ๋ค์ด์ด๊ทธ๋จ ๋๊ตฌ์ ๋๋ค.
๋ค์๊ณผ ๊ฐ์ด ํ๋ฌธ์ ์์ฑํฉ๋๋ค:
graph TD
A --> B
B --> C
โฆ๊ทธ๋ฆฌ๊ณ Mermaid๋ ์ด๋ฅผ ์๊ฐ์ ์ธ ํ๋ก์ฐ์ฐจํธ๋ก ๋ณํํด ๋ฌธ์, ์ํค, ๋ธ๋ก๊ทธ, ํน์ ๊ธฐ์ ๋ฌธ์์ ์ฝ์ ํ ์ ์๊ฒ ํด ์ค๋๋ค. ๋ฐฐ์ฐ๊ธฐ ์ฝ๊ณ , ๋ฒ์ ๊ด๋ฆฌ์ ์นํ์ ์ด๋ฉฐ, ๋ค์ํ ๋๊ตฌ์ ํตํฉ๋ฉ๋๋ค. (Mermaid)
์ mmdc๊ฐ ํ์ ์ ์ธ๊ฐ
์ ํต์ ์ผ๋ก Mermaid๋ฅผ SVG, PNG, PDF ๋ฑ์ผ๋ก ๋ณํํ๋ ค๋ฉด ๋ค์์ด ํ์ํ์ต๋๋ค:
- Node.js
- npm
- Mermaid CLI
- ๋ธ๋ผ์ฐ์ ๋๋ ํค๋๋ฆฌ์ค ์์ปค
- ์ถ๊ฐ ์์คํ ๋๊ตฌ
mmdc๋ ์ด ๋ชจ๋ ๊ฒ์ ๋ฐ๊ฟ๋๋ค. ์์ Python ์๋ฃจ์
์ผ๋ก, pip install ํ ๋ฒ์ผ๋ก ์ค์นํ ์ ์์ผ๋ฉฐ ์ธ๋ถ ๋๊ตฌ๋ฅผ ์ ํ ์ค์นํ ํ์๊ฐ ์์ต๋๋ค. ๋ด๋ถ์ ์ผ๋ก PhantomJS ์ธ์คํด์ค๋ฅผ ํ์ฉํ๋ ๊ฐ๋ ฅํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ Phasma๋ฅผ ์ฌ์ฉํด Mermaid ์ฝ๋๋ฅผ ์ค์ ๋ค์ด์ด๊ทธ๋จ ์ถ๋ ฅ๋ฌผ๋ก ๋ ๋๋งํฉ๋๋ค โ ๋ณ๋๋ก ๋ญ๊ฐ๋ฅผ ์ค์นํ ํ์๊ฐ ์์ฃ . ๋ฐ๋ผ์ Python ํ๊ฒฝ, ์๋ํ, ๋ฌธ์ ํ์ดํ๋ผ์ธ, CI/CD ์ํฌํ๋ก์ ์ต์ ์
๋๋ค.
์ค์น
pip install mmdc
์ด๊ฒ๋ง์ผ๋ก ์ค๋น ์๋ฃ! Node.js, npm, apt ์ค์น, ๋ธ๋ผ์ฐ์ ๋ฑ์ด ํ์ ์์ต๋๋ค.
๋ช ๋ น์ค์์ ์ฌ์ฉํ๊ธฐ
๊ฐ๋จํ Mermaid ํ์ผ์ SVG๋ก ๋ณํ:
mmdc --input my_diagram.mmd --output my_diagram.svg
ํ์ฅ์๋ฅผ ์ง์ ํ๋ฉด PNG ๋๋ PDF๋ ๋ฐ๋ก ๋ง๋ค ์ ์์ต๋๋ค:
mmdc --input my_diagram.mmd --output my_diagram.png
mmdc --input my_diagram.mmd --output my_diagram.pdf
์๋ํ๋ ๋ฌธ์ ๋น๋, ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ, ๋ธ๋ก๊ทธ ํ์ดํ๋ผ์ธ์ ์์ฑ๋ง์ถค!
Python์์๋ ์ฌ์ฉํ๊ธฐ
Python ์ฝ๋์์ ์ง์ ๋ค์ด์ด๊ทธ๋จ์ ์์ฑ:
from mmdc import MermaidConverter
converter = MermaidConverter()
mermaid_text = """
graph TD
A[Start] --> B{Is it cool?}
B -->|Yes| C[Love it!]
B ---->|No| D[Try again]
"""
converter.to_svg(mermaid_text, output_file="cool_diagram.svg")
๊ฐ๋จํ๊ณ ๊ฐ๋ ฅํ๋ฉฐ, Python ์ ํ๋ฆฌ์ผ์ด์ , ๋ฌธ์ ์์ฑ๊ธฐ, ๋ ธํธ๋ถ ์ํฌํ๋ก, ์๋ํ ์คํฌ๋ฆฝํธ์ ๊น๋ํ๊ฒ ํตํฉ๋ฉ๋๋ค!
์์ Mermaid ์ฝ๋ ์ค๋ํซ
Flowchart
graph LR
A[Idea] --> B[Develop]
B --> C[Test]
C --> D[Deploy]
Simple Loop
flowchart TD
Start --> Process
Process --> Review
Review -->|OK| End
Review -->|Fix| Process
Sequence Diagram
sequenceDiagram
Alice->>Bob: Hello Bob!
Bob-->>Alice: Hi Alice!
์ ์ค์ํ๊ฐ
- ์ธ๋ถ ์ค์ ๋ถํ์: Python ๊ฐ๋ฐ์๋ ์ด์ ์ถ๊ฐ ์ค์น ์์ด Mermaid๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ๋ฌธ์ ์๋ํ์ ์ ํฉ: Sphinx, MkDocs, Jupyter, ๋ ธํธ๋ถ, CI/CD์ ์ ์ด์ธ๋ฆฝ๋๋ค.
- Python ์ค์ฌ ์ํฌํ๋ก: ๋ค์ด์ด๊ทธ๋จ์ ์ฝ๋๋ฒ ์ด์ค์ ์ผ๊ธ ๊ตฌ์ฑ ์์๋ก ๋ค๋ฃฐ ์ ์์ต๋๋ค.
๋ง๋ฌด๋ฆฌ
๋ง์ฝ Python ์ ์ฉ์ผ๋ก Mermaid ๋ค์ด์ด๊ทธ๋จ์ ๊น๋ํ๊ฒ ์์ฑํ๊ณ ์ถ๋ค๋ฉด, mmdc๋ ํฐ ์์์
๋๋ค. ๋จ ํ ๋ฒ์ pip install์ผ๋ก ์ฌ๋๋ฐ๋ ํ
์คํธ ๊ธฐ๋ฐ ๋ค์ด์ด๊ทธ๋จ ๋ฐฉ์์ ๋ฐ๋ก Python ์ํ๊ณ์ ๊ฐ์ ธ๋ค ์ค๋๋ค.
์ด์ ๋ค์ด์ด๊ทธ๋จ์ ์ฝ๋ ์ฐ์ ์ผ๋ก ๋ง๋ค ์ ์์ต๋๋ค โ ๋ฒ์ ๊ด๋ฆฌ ๊ฐ๋ฅํ๊ณ , ์๋ํ ๊ฐ๋ฅํ๋ฉฐ, ๊ฐ๋ณ๊ณ ์๋ฆ๋ต๊ฒ โ ์ธ๋ถ ํด์ฒด์ธ์ ๋ฌด๊ฒ ์์ด. ๐ฅ