원고 · .md
.md 파일이나 이미지를 끌어다 놓으세요
Markdown을 붙여넣거나, .md 파일을 끌어다 놓거나, 파일을 여세요
교정지
A4 · 페이지 나눔은 내려받은 PDF 기준
실시간
```mermaid 블록이 있는 Markdown을 쓰거나 붙여 넣고, 모든 다이어그램이 글자까지 선택되는 벡터 그래픽으로 담긴 PDF를 내려받으세요.
Markdown을 붙여넣거나, .md 파일을 끌어다 놓거나, 파일을 여세요
Mermaid는 몇 줄의 텍스트로 순서도, 시퀀스 다이어그램, 간트 차트 등을 그려 줍니다. 문제는 이 다이어그램을 PDF로 옮길 때입니다. 많은 온라인 Markdown 변환기는 Mermaid를 아예 렌더링하지 못해 코드를 그대로 출력하고, 어떤 도구는 페이지 전체를 커다란 이미지 한 장으로 만듭니다. 편집기에서 내보내면 넓은 다이어그램이 잘리거나 내 컴퓨터에 설치된 글꼴에 따라 결과가 달라지기도 합니다.
여기서는 모든 ```mermaid 블록을 브라우저에서 SVG로 렌더링해 PDF에 네이티브 벡터 그래픽으로 넣습니다. 어떤 배율에서도 선명하고, 다이어그램 속 글자를 선택, 복사, 검색할 수 있으며, classDef나 style로 지정한 색도 쓴 그대로 유지됩니다.
다이어그램이 픽셀이 아니라 벡터 경로와 텍스트로 들어가므로 어떤 크기로 인쇄해도 선명하고 파일도 가볍습니다. PDF 뷰어의 검색으로 다이어그램 속 단어를 찾을 수 있고, 순서도의 라벨을 그대로 복사할 수도 있습니다.
다이어그램은 페이지에 들어가면 원래 크기 그대로, 가로로 넓으면 여백을 넘지 않도록 본문 폭에 맞게 줄어들고, 한 페이지보다 길면 한 페이지에 들어가도록 줄어듭니다. 라벨은 HTML을 끼워 넣는 방식이 아니라 SVG 텍스트로 그려집니다. 다른 도구로 내보냈을 때 라벨 자리가 빈칸으로 나오는 원인이 바로 그 HTML 방식입니다.
순서도, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, 개체 관계도, 간트 차트, 파이 차트, 마인드맵, 타임라인 등 Mermaid가 지원하는 유형은 Mermaid가 직접 렌더링합니다. 그래서 문법은 GitHub, GitLab, Obsidian, Notion에서 쓰던 것과 똑같습니다.
사용한 변환기가 Mermaid를 렌더링하지 못하고 일반 코드 블록으로 처리했기 때문입니다. 여기서는 mermaid로 표시된 코드 블록을 모두 다이어그램으로 그립니다. 문법이 틀렸다면 미리보기와 PDF에 Mermaid 오류 메시지, 줄 번호, 문제가 된 줄을 담은 상자가 표시되고, 문서의 나머지는 그대로 렌더링됩니다.
네. 이 편집기들에서 쓰는 것과 같은 Mermaid 문법이므로, Markdown 파일을 끌어다 놓거나 내용을 붙여 넣으면 그대로 렌더링됩니다.
비트맵 이미지가 아니라 벡터 그래픽입니다. 확대해도 선명하고, 안의 글자는 선택하고 검색할 수 있는 진짜 텍스트입니다.
네. 편집기에 ```mermaid 블록만 넣고 내려받으면 다이어그램 하나만 담긴 PDF가 됩니다. 크기는 원래대로이고 페이지보다 클 때만 줄어듭니다. 다른 곳에 쓰려면 미리보기의 다이어그램에 마우스를 올려 SVG를 복사하거나 SVG·PNG로 내려받으세요.
네. classDef, class, style로 지정한 채우기 색, 선 색, 선 두께가 PDF에 그대로 남습니다.
아니요. Mermaid도 PDF 엔진도 브라우저 안에서 동작합니다. 이 페이지는 문서를 어디로도 보낼 수 없습니다.
ChatGPT 답변을 표, 코드, 수식까지 그대로 PDF로 저장
Claude 답변과 Markdown 아티팩트를 Mermaid 다이어그램까지 PDF로
Google Gemini 답변을 제대로 조판된 PDF로 내보내기
ChatGPT나 Claude가 만든 PDF의 한글 깨짐을 붙여넣기로 해결