Mermaid 변환에는 mermaid-cli로 SVG나 PDF를 내보내면 됩니다.
Mermaid는 텍스트를 다이어그램으로 렌더링하므로 버전 관리하는 문서에 잘 맞습니다. 이 다이어그램을 논문 원고, 슬라이드, 포스터에 넣으려면 파일 형식과 크기를 따로 정해야 합니다. PNG의 픽셀 수가 부족하면 원하는 인쇄 크기에서 흐릿하게 보일 수 있습니다.
명령줄에서 내보내기
공식 도구인
@mermaid-js/mermaid-cli를 설치하면 mmdc 명령을 사용할 수 있습니다.npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.mmd -o diagram.svg # vector, preferred
mmdc -i diagram.mmd -o diagram.pdf # vector PDF
mmdc -i diagram.mmd -o diagram.png -s 3 # raster at 3x scale사용할 곳에서 지원한다면 SVG나 PDF를 우선 선택하세요. 벡터 선과 글자는 확대해도 선명하지만, 파일 안에 포함된 래스터 이미지는 원래 해상도를 그대로 유지합니다. PNG는 배율을 지정한 뒤, 출력 파일의 픽셀 크기가 필요한 인쇄 크기와 해상도에 맞는지 확인하세요.
| 형식 | 벡터 지원 | 적합한 용도 | 피해야 할 경우 |
|---|---|---|---|
| SVG | 벡터 요소를 담는 형식 | 웹에 사용하거나 추가 편집할 때 | 사용할 곳에서 SVG를 지원하지 않을 때 |
| 벡터 요소를 담는 형식 | 논문 원고, 인쇄물, 슬라이드 | 가져올 편집기에서 필요한 요소를 유지하지 못할 때 | |
| PNG | 아니요 | 미리보기 또는 래스터 파일이 필요한 곳 | 최종 사용 크기에 비해 픽셀 수가 부족할 때 |
다른 환경에서 내보내기
VS Code. Mermaid 미리보기 확장 프로그램을 사용하면 문서를 작성하면서 다이어그램을 바로 확인할 수 있습니다. 내보내기 기능은 확장 프로그램마다 다릅니다. SVG, PNG, PDF 중 원하는 형식으로 확실하게 출력하려면 위의 CLI 명령을 사용할 수 있습니다.
Mermaid Live Editor. 브라우저 편집기는 SVG 내보내기와 이미지 렌더링 링크를 제공하므로 다이어그램 하나를 간단히 만들 때 편리합니다. 온라인 렌더링 과정에서는 다이어그램 텍스트가 렌더링 서비스로 전송될 수 있습니다. 민감한 내용은 로컬 CLI로 처리하세요.
CI 파이프라인.
mmdc는 명령줄 도구이므로 다이어그램 렌더링을 빌드 단계에 넣을 수 있습니다. 보통 .mmd 소스를 커밋하고 문서 빌드 때 이미지를 생성합니다. 이렇게 하면 이미지에도 해당 빌드의 소스 변경 사항이 반영됩니다.- run: npm install -g @mermaid-js/mermaid-cli
- run: mmdc -i docs/architecture.mmd -o docs/architecture.svg
모양 조정하기
Mermaid의 기본 설정은 문서 작성에 맞춰져 있습니다. 논문이나 인쇄물에 사용하려면 다음 세 가지를 살펴보세요.
- 테마. 다이어그램의 YAML 프런트매터에서
config아래에theme: neutral을 설정하세요. 인쇄용 테마를 결정하기 전에 실제 사용 크기로 미리 확인하세요. - 글꼴. 설정의
fontFamily로 글꼴을 지정하고, 렌더링 환경에 해당 글꼴이 설치되어 있는지 확인하세요. - 방향.
graph LR과graph TD는 다이어그램의 가로세로 비율을 바꿉니다. 논문의 단 너비에 맞춰 넣을 때는 이 차이가 크게 작용합니다.
---
config:
theme: neutral
fontFamily: Helvetica
---
graph LR
A[Sample collection] --> B[Extraction]
B --> C[Sequencing]
C --> D[Analysis]
Mermaid만으로 해결하기 어려운 경우
Mermaid는 요소 배치를 자동으로 계산하며, 사용자가 세밀하게 조절할 수 있는 범위는 제한적입니다. 문서에서는 편리하지만, 배치 자체가 의미를 전달하는 과학 그림에는 제약이 될 수 있습니다.
요소를 정확한 위치에 놓아야 하거나, 학술지의 시각적 표현 방식에 맞춰야 하거나, 해부학적 위치와 시간 순서 같은 실제 관계를 배치로 드러내야 한다면 다른 도구도 고려하세요. Mermaid로 구조를 잡아 SVG로 내보낸 다음 벡터 편집기에서 마무리하는 방법도 있습니다. 다만 수작업으로 수정한 부분은 Mermaid 소스에서 다시 생성할 때 그대로 재현되지 않습니다.
팁
내보낸 이미지와
.mmd 소스를 함께 커밋하세요. 소스는 변경 내용을 검토하기 쉽고 필요할 때 이미지를 다시 생성할 수 있습니다. 이미지는 결과를 바로 확인하는 데 유용합니다. 하나만 보관하면 변경 검토나 결과 확인 중 한쪽이 불편해집니다.Mermaid에서 구현하기 어려운 구도가 필요하다면 SciFig의 텍스트 기반 다이어그램 생성기와 텍스트로 과학 그림 만들기로 설명문에서 초안을 만들 수 있습니다. 생성된 구조를 검토하고, 래스터 결과물을 벡터화해 편집 가능한 SVG로 바꾼 뒤 브라우저 캔버스에서 수정하세요. 전체 작업 흐름은 연구 시각화 가이드에서 확인할 수 있습니다.
함께 읽으면 좋은 글
관련 읽을거리: AI 텍스트에서 그림으로 연구 즉시 시각화, 2026년 최고의 과학 일러스트레이션 도구 10가지.
