MD HTML 변환기

가이드 · 2026년 11월 2일

Markdown에 수식과 다이어그램 넣기

기술 문서에는 수식과 흐름도가 자주 들어갑니다. Markdown에 글자로 적어 두면 변환할 때 그림으로 그려져 HTML 파일 안에 들어갑니다. 받는 사람에게는 별도 프로그램도 인터넷도 필요 없습니다.

수식 쓰는 법

LaTeX 수식 문법을 그대로 씁니다. 문장 안의 수식과 따로 줄을 차지하는 수식 모두 두 가지 표기를 지원합니다.

종류표기
문장 안 수식$E = mc^2$ 또는 \(E = mc^2\)
따로 줄을 차지하는 수식$$ ... $$ 또는 \[ ... \]
GitHub 방식코드 블록의 언어를 math로 지정

여러 줄 수식은 다음처럼 씁니다.

$$
\begin{aligned}
y &= (x + 1)^2 \\
  &= x^2 + 2x + 1
\end{aligned}
$$

ChatGPT는 수식을 \( \)와 \[ \]로 쓰는 경우가 많은데, 고치지 않고 그대로 넣어도 됩니다.

수식이 잘 안 될 때

다이어그램 쓰는 법

코드 블록의 언어를 mermaid로 지정하면 글로 적은 구조가 그림이 됩니다. 그림 도구를 열지 않아도 되고, 내용을 고칠 때 글자만 바꾸면 됩니다.

```mermaid
flowchart LR
    A[센서 입력] --> B[전처리]
    B --> C{이상값?}
    C -- 예 --> D[제거]
    C -- 아니요 --> E[모델 실행]
```

흐름도(flowchart) 외에 순서도(sequenceDiagram), 상태도(stateDiagram-v2), 클래스도(classDiagram), 간트 차트(gantt) 등을 쓸 수 있습니다.

다이어그램 요령

결과 파일 크기

수식이 있는 문서에는 수식 글꼴이 함께 들어가 파일이 약 370KB 커집니다. 수식 전용 글꼴을 파일 안에 담아 어디서나 같은 모양으로 보이게 하기 위해서입니다. 수식이 없는 문서에는 들어가지 않습니다. 다이어그램은 실행 프로그램 없이 그림(SVG)만 들어가므로 크기 부담이 작습니다. 다이어그램 프로그램은 작업 화면에서 처음 쓸 때 한 번 받습니다.

어두운 화면에서는

수식은 글자색을 따라가므로 어두운 화면에서도 그대로 잘 보입니다. 다이어그램은 색을 보장하기 위해 항상 흰 바탕 상자 안에 그립니다.

Markdown 변환하러 가기

함께 보면 좋은 글