수식, Mermaid, 다이어그램 임베드

마침내 Markdown 이 지원하는 평문 다이어그램

수식 (LaTeX 스타일)

GitHub 는 2022 년부터 KaTeX 로 LaTeX 수식을 자체 렌더링해. 문장 안에 넣을 땐 $ ... $ 로 감싸고, 크게 보여줄 땐 문단 하나를 통째로 $$ ... $$ 로 잡아. 같은 문법이 요즘 문서 플랫폼 대부분에서 그대로 먹어 (GitLab, Obsidian, Notion, MkDocs Material + 플러그인).

Mermaid 다이어그램

```mermaid fenced 블록은 flowchart, sequence diagram, class diagram, ER diagram, Gantt chart, state machine 같은 걸로 렌더링돼. GitHub 가 별도 도구 없이 바로 그려줘. 다이어그램 소스가 파일 안에 그대로 있다는 게 핵심이야. diff 가 읽히고, 버전 관리가 되고, 바이너리를 뽑아내는 파이프라인이 아예 필요 없어.

다른 다이어그램 방언

GeoJSON — ```geojson 을 쓰면 GitHub 가 지도로 그려줘.
STL — ```stl 은 GitHub 에서 3D 모델로 뜨고.
PlantUML, GraphViz — 일부 플랫폼 (MkDocs + 플러그인) 은 지원하는데 GitHub 는 안 해.

휴대성 전술: Mermaid 를 안 그려주는 GitHub 밖 플랫폼에 배포한다면, mmdc (mermaid-cli) 로 다이어그램을 한 번 뽑아서 SVG 를 소스 옆에 같이 commit 해. 문서는 SVG 를 참조하되 소스도 남겨두는 거야. 그러면 편집도 되고 어디서든 보이기도 해.

Code

Inline 과 display 수식·markdown

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

The normal distribution PDF:

$$
f(x) = \frac{1}{\sigma\sqrt{2\pi}} \, e^{-\frac{1}{2}\left(\frac{x - \mu}{\sigma}\right)^2}
$$

Mermaid — flowchart·markdown

```mermaid
flowchart LR
    A[Push to main] --> B{CI passing?}
    B -- yes --> C[Deploy to Vercel]
    B -- no --> D[Block release]
    C --> E[Site live]
```

Mermaid — sequence diagram·markdown

```mermaid
sequenceDiagram
    participant U as User
    participant W as WebUI
    participant B as Backend
    U->>W: send message
    W->>B: POST /api/chat
    B-->>W: SSE stream
    W-->>U: render tokens
```

Mermaid → SVG 렌더링 (CLI fallback)·bash

# 한 번만 설치
npm install -g @mermaid-js/mermaid-cli

# .mmd 파일 렌더링
mmdc -i diagram.mmd -o diagram.svg

# 또는 Markdown 파일에서 fenced 블록 추출
# (일부 에디터엔 'export diagram as SVG' 빌트인)

Exercise

잘 아는 시스템을 하나 골라. auth flow 든 CI 파이프라인이든 데이터 모델이든. Markdown 파일에 fenced 블록으로 Mermaid 다이어그램을 그려서 GitHub 에 push 하고 눈으로 확인해. 그 다음 mmdc 로 SVG 를 뽑아 소스 옆에 같이 commit 하고, 다른 문서에서 둘 다 참조해봐. 이걸로 어디서든 보이면서 고칠 수도 있는 다이어그램 파이프라인이 완성돼.

마침내 Markdown 이 지원하는 평문 다이어그램

수식 (LaTeX 스타일)

Mermaid 다이어그램

다른 다이어그램 방언

Code

External links

Exercise

Progress

댓글 0