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

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

수식 (LaTeX 스타일)

GitHub 는 KaTeX 로 LaTeX 수식을 native 렌더링 (2022 부터). inline 수식: $ ... $ . display 수식: 자체 문단의 $$ ... $$. 같은 문법이 대부분 modern docs 플랫폼에서 작동 (GitLab, Obsidian, Notion, MkDocs Material + 플러그인).

Mermaid 다이어그램

```mermaid fenced 블록이 flowchart, sequence diagram, class diagram, ER diagram, Gantt chart, state machine 등으로 렌더링. GitHub 가 native 렌더링. 다이어그램 소스가 파일 안에 — diff 친화적, 버전 관리됨, 바이너리 export 파이프라인 없음.

다른 다이어그램 방언

GeoJSON — ```geojson 이 GitHub 에서 지도 렌더링.
STL — ```stl 이 GitHub 에서 3D 모델 렌더링.
PlantUML, GraphViz — 일부 플랫폼 (MkDocs + 플러그인) 지원, GitHub 는 안 함.

휴대성 전술: Mermaid 를 안 렌더링하는 GitHub 외 타깃에 배포한다면, mmdc (mermaid-cli) 로 다이어그램 한 번 렌더링하고 SVG 를 소스 옆에 commit. SVG 참조 + 소스도 fallback 으로 유지. 편집 가능 + 휴대 가능.

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 export 해서 소스 옆에 commit. 다른 문서에서 둘 다 참조. 휴대 가능, 편집 가능한 다이어그램 파이프라인 완성.

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

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

수식 (LaTeX 스타일)

Mermaid 다이어그램

다른 다이어그램 방언

Code

External links

Exercise

Progress

댓글 0