Mermaid 지원 Markdown 뷰어 및 편집기

Markdown 문서

Markdown 파일을 작성하거나 붙여 넣거나 열면 GitHub처럼 즉시 미리 볼 수 있습니다. 표, 작업 목록, 각주, 알림, Mermaid 다이어그램, LaTeX 수식, 구문 강조된 코드를 지원하며, HTML로 다운로드하거나 PDF로 저장할 수도 있습니다. 모든 처리는 브라우저에서 이루어집니다.

스크롤 동기화

줄바꿈 유지

---
title: "예제 문서"
tags: [markdown, mermaid, katex]
---

# 예제 문서

이 텍스트를 편집하면 결과를 바로 볼 수 있습니다. **굵게**, *기울임꼴*, ~~취소선~~, `코드`, https://ittools.tech 같은 링크, 각주[^1]를 지원합니다.

> [!NOTE]
> GitHub 알림도 작동합니다. TIP, IMPORTANT, WARNING, CAUTION도 사용해 보세요.

## 작업 목록과 표

- [x] README 작성하기
- [ ] 다이어그램 추가하기

| HTTP | Endpoint | Status |
|:-------|:-----|-------:|
| `GET` | `/api/users` | 200 |
| `POST` | `/api/users` | 201 |
| `DELETE` | `/api/users/42` | 204 |

```typescript
async function getUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(response.statusText);
  return response.json();
}
```

## 다이어그램과 수식

```mermaid
sequenceDiagram
    participant C as App
    participant A as API
    participant D as DB
    C->>A: GET /api/users/42
    A->>D: SELECT * FROM users WHERE id = 42
    D-->>A: row
    A-->>C: 200 OK (JSON)
```

```mermaid
flowchart LR
    A[Commit] --> B{Tests OK?}
    B -- ✓ --> C[Build]
    B -- ✗ --> D[Fix]
    D --> A
    C --> E[Deploy]
```

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Euler: $e^{i\pi} + 1 = 0$

</details>

[^1]: 모든 처리는 브라우저에서 이루어지며 문서는 어떤 서버로도 전송되지 않습니다.

단어 0개 · 0줄 · 읽는 시간 0분

작동 방식

Markdown은 README, 기술 문서, 위키, 그리고 거의 모든 개발 도구의 메모에 쓰이는 형식이지만, 플랫폼마다 자체 확장 문법을 더합니다. 이 뷰어는 가장 널리 쓰이는 GitHub Flavored Markdown(GFM)을 따르며, 기본 문법 외에도 표, 작업 목록, 취소선, 자동 링크, 각주, 그리고 NOTE, TIP, IMPORTANT, WARNING, CAUTION 알림을 표시합니다.

mermaid로 지정한 코드 블록은 다이어그램(흐름도, 시퀀스, 클래스, 상태, 개체-관계, 간트, Git 등)으로 변환되고, $ 기호 사이의 수식은 KaTeX로 그려지며, 나머지 코드는 지정한 언어에 맞게 구문 강조됩니다. 문서가 Jekyll, Hugo, Docusaurus에서처럼 --- 줄로 둘러싼 YAML 블록으로 시작하면 별도의 표로 표시됩니다.

문서는 브라우저 밖으로 나가지 않습니다. 문서에 포함된 HTML은 표시하기 전에 정리되므로 다른 사람의 README를 열어도 스크립트가 실행되지 않으며, 다이어그램과 수식 라이브러리는 문서에서 사용할 때만 다운로드됩니다.

예시

```mermaid
flowchart LR
  A[Commit] --> B[Build] --> C[Deploy]
```

Commit → Build → Deploy언어를 mermaid로 지정한 코드 블록은 다이어그램으로 그려집니다. 구문 오류가 있으면 코드가 그대로 보이고 그 아래에 Mermaid 오류 메시지가 표시됩니다.

## Getting Started
## API v2.0 (beta)
## Getting Started

#getting-started · #api-v20-beta · #getting-started-1제목에는 GitHub와 같은 id가 붙습니다. 소문자로 바꾸고, 공백은 하이픈으로 바꾸고, 문장 부호는 빼고, 중복되면 끝에 숫자를 붙입니다. 따라서 [텍스트](#getting-started) 같은 링크는 여기서도 저장소에서도 똑같이 동작합니다.

Line one
Line two

<p>Line one
Line two</p>  →  <p>Line one<br>Line two</p>

표준 Markdown에서는 줄바꿈 하나로는 줄이 나뉘지 않습니다. 빈 줄을 넣거나 줄 끝에 공백 두 칸을 넣어야 합니다. GitHub 댓글과 이슈에서는 줄바꿈이 그대로 반영되므로, 같은 방식으로 보려면 ‘줄바꿈 유지’를 켜세요.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.[!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION]으로 시작하는 인용문은 GitHub처럼 색이 있는 알림으로 표시됩니다. 이를 지원하지 않는 플랫폼에서는 일반 인용문으로 보입니다.

활용 사례

저장소에 올리기 전에 README나 CHANGELOG가 어떻게 보일지 확인합니다.
편집기를 설치하지 않고 다운로드한 .md 파일을 읽습니다. 버튼으로 열거나 끌어다 놓으면 됩니다.
아키텍처, 흐름, 시퀀스를 나타내는 Mermaid 다이어그램을 시험하고 실시간 미리보기로 구문을 바로잡습니다.
문서를 독립 실행형 HTML 페이지나 PDF로 변환해 Git을 쓰지 않는 사람과 공유합니다.
LaTeX 표기법으로 수식을 넣어 노트나 기술 문서를 작성합니다.
AI 어시스턴트가 돌려준 Markdown 텍스트를 서식, 표, 코드 블록이 적용된 모습으로 봅니다.

자주 묻는 질문

어떤 종류의 Mermaid 다이어그램을 그릴 수 있나요?

Mermaid가 제공하는 모든 종류를 그릴 수 있습니다. flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture, kanban 등입니다. 다이어그램은 사이트 테마에 따라 밝은 색상이나 어두운 색상을 사용하며 strict 모드로 그려지므로, 레이블 텍스트로 HTML을 삽입하거나 클릭 시 코드를 실행할 수 없습니다.

수식은 어떻게 작성하나요?

인라인 수식은 $a^2 + b^2 = c^2$처럼 $ 기호 사이에 쓰고, 한 줄을 차지하는 가운데 정렬 수식은 $$ 사이에 쓰거나 언어를 math로 지정한 코드 블록에 넣습니다. 문법은 KaTeX가 지원하는 LaTeX입니다. 가격처럼 $ 기호를 그대로 쓰려면 앞에 백슬래시를 붙이세요. 다만 "$5와 $10"은 두 번째 $ 앞에 공백이 있고 뒤에 숫자가 오므로 수식으로 처리되지 않습니다.

Markdown 안에서 HTML을 쓸 수 있나요?

네, GitHub처럼 사용할 수 있습니다. 접을 수 있는 섹션을 위한 details와 summary, 키 표시용 kbd, sub와 sup, 크기를 지정한 img, align이 있는 p 같은 태그입니다. 표시하기 전에 스크립트, onclick 같은 이벤트 속성, javascript: 링크, style 및 form 태그를 제거하므로 다른 사람의 문서가 코드를 실행하거나 페이지의 나머지 부분을 바꿀 수 없습니다.

PDF로 어떻게 변환하나요?

‘내보내기’에서 ‘인쇄 또는 PDF로 저장’을 선택하면 사이트 인터페이스 없이 문서만 담긴 인쇄 대화 상자가 열리고, 거기서 ‘PDF로 저장’을 고르면 됩니다. 표, 코드 블록, 다이어그램은 페이지 사이에서 잘리지 않도록 처리됩니다. 게시용 파일이 필요하다면 ‘.html 다운로드’로 스타일이 포함된 독립 실행형 페이지를 만들 수 있습니다.

상대 경로를 쓴 이미지가 왜 보이지 않나요?

뷰어가 저장소의 다른 폴더에 접근할 수 없기 때문입니다. ./docs/logo.png 같은 경로는 사용자의 디스크나 GitHub에만 존재합니다. https://로 시작하는 전체 주소의 이미지는 문제없이 표시됩니다.