Mermaid 다이어그램을 PNG, SVG, Markdown으로 내보내기

형식부터 정하세요

목적지가 mermaid를 렌더링할 수 있다면, 아예 내보내지 마세요. 텍스트로 커밋된 다이어그램은 줄 단위로 리뷰할 수 있지만, 같은 다이어그램을 PNG로 커밋하면 통째로 교체하는 것만 가능합니다.

이 에디터에서 내보내기

코드 탭을 여세요 — 내보내기 버튼은 툴바에 있고, 각 버튼은 현재 렌더링된 결과에 대해 동작합니다.

1. Copy SVG — <svg> 마크업을 클립보드에 담아, HTML 파일이나 디자인 툴에 바로 붙여넣을 수 있게 합니다.
2. Download SVG — diagram.svg로 저장합니다.
3. Download PNG — diagram.png로 저장하며, 흰 배경 위에 2배 해상도로 렌더링되어 고밀도 화면에서도 선명하고 흰 슬라이드 위에서 투명 얼룩으로 나타나는 일이 없습니다.
4. Download .mmd — mermaid 소스를 일반 텍스트 파일로 저장합니다.
5. Download .md (Notion) — 소스를 ```mermaid 펜스 블록으로 감싸 저장하며, Notion, GitHub, Obsidian은 붙여넣을 때 이를 렌더링합니다.

💡슬라이드 덱이라면 PNG를 선택하세요. 문서 제목, 포스터, 인쇄물처럼 크기가 조정될 것이라면 SVG를 선택하세요 — PNG를 내보낸 크기보다 크게 확대하면 즉시 흐릿해집니다.

대신 텍스트로 남기기

펜스 블록은 그 자리에서 계속 수정 가능한 상태로 남는 유일한 내보내기 방식입니다. 백틱 세 개, mermaid라는 단어, 다이어그램, 그리고 다시 백틱 세 개:

```mermaid
flowchart LR
  A[Write] --> B[Review]
  B --> C[Merge]
```

• GitHub — README 파일, 이슈, 풀 리퀘스트, 댓글에서 렌더링됩니다.
• GitLab — 위키, 이슈, 머지 리퀘스트에서 렌더링됩니다.
• Notion — 코드 블록에 붙여넣고 언어를 Mermaid로 설정하세요.
• Obsidian — 미리보기와 게시된 노트에서 렌더링됩니다.
• Docusaurus / MkDocs Material / VitePress — 빌드된 문서에서 mermaid 블록이 렌더링됩니다.

흔히 틀어지는 것들

PNG가 흐릿해요

PNG는 고정 해상도입니다 — 정해진 픽셀 크기로 내보내지고, 그보다 크게 확대하면 보간이 일어납니다. 이 에디터가 2배 해상도로 내보내는 것도 그 때문입니다. 그래도 부족하다면 SVG를 내보내 원하는 크기로 변환하거나, 그냥 SVG를 사용하세요.

SVG에 배경이 없어요

SVG는 설계상 투명하게 내보내지므로, 어두운 노드 텍스트가 어두운 슬라이드 위에서 사라집니다. SVG를 밝은 카드 위에 올리거나, 흰 배경으로 내보내지는 PNG를 사용하세요.

다른 곳에서 폰트가 다르게 보여요

SVG는 폰트를 내장하지 않고 폰트 계열을 참조만 하므로, 해당 폰트가 없는 기기에서는 다른 폰트로 대체되어 라벨 박스가 어긋납니다. 뷰어의 폰트를 통제할 수 없다면 PNG를 사용하세요.

다이어그램이 잘려요

내보내기는 현재 렌더링된 화면을 그대로 읽으므로, 큰 다이어그램을 내보내기 전에 화면을 다시 가운데로 맞추세요. 노드 라벨이 지나치게 길다면 <br>로 줄을 나누세요 — mermaid는 라벨을 자동으로 줄바꿈하지 않습니다.