온라인에서 Mermaid 다이어그램 렌더링 및 내보내기: AI 코드를 선명한 SVG·PNG로 변환

ChatGPT, Claude, DeepSeek 같은 AI 모델은 시스템 아키텍처, 시퀀스 다이어그램, 데이터베이스 ERD를 Mermaid 문법으로 빠르게 작성해 줍니다. 하지만 flowchart TD나 sequenceDiagram 같은 코드 블록을 그대로 파워포인트 슬라이드, 워드 문서, 고객 보고서에 붙여넣을 수는 없습니다. 텍스트 정의를 깔끔한 이미지 파일로 바꾸려면 실시간 미리보기와 내보내기 워크플로우가 필요합니다.

실시간 미리보기로 AI 문법 오류 즉시 잡기

코드를 Mermaid 렌더러에 붙여넣으면 오른쪽 캔버스에 즉시 다이어그램이 그려집니다. AI가 생성한 코드에서 구문 오류가 발생할 때 가장 흔한 원인은 노드 레이블 안에 따옴표 없이 괄호나 콜론이 포함된 경우입니다.

• 오류가 나는 표기: A[사용자 로그인 (관리자)] --> B[대시보드]
• 안전한 큰따옴표 표기: A["사용자 로그인 (관리자)"] --> B["대시보드"]

특수문자나 괄호가 들어간 레이블을 큰따옴표 ""로 감싸면 파서가 괄호를 노드 모양 문법으로 오인하는 문제를 깔끔하게 해결할 수 있습니다.

발표 환경에 맞춰 테마와 스타일 전환하기

어두운 코드 에디터에서 잘 보이던 다이어그램도 흰색 슬라이드 배경에 올리면 대비가 떨어질 수 있습니다. 내보내기 전에 Mermaid 렌더러 상단 툴바에서 외형을 조정해 보세요.

1. 테마(Theme): 인쇄 문서나 밝은 슬라이드에는 default 또는 neutral, 다크 모드 화면에는 dark, 차분한 기술 문서에는 forest가 적합합니다.
2. 클래식 vs 손그림 스타일(Look): 최종 아키텍처와 ERD에는 정교한 클래식 스타일을 사용하고, 초기 기획 회의에서는 손그림(Hand-drawn) 모드로 전환하면 세부 디자인보다 흐름 자체에 집중하기 좋습니다.

벡터 SVG와 고해상도 PNG 선택 기준

다이어그램을 삽입할 대상에 따라 파일 형식을 선택하세요.

• SVG(벡터 그래픽): 기술 블로그, 웹 문서, Figma 디자인 작업에 가장 좋습니다. 아무리 확대해도 글자와 선이 깨지지 않습니다.
• PNG(비트맵 이미지): Google Slides, PowerPoint, Slack, Jira, Word처럼 SVG 삽입이 제한되는 환경에 적합합니다. 웹사이트 게시용으로 파일 용량을 더 줄이고 싶다면 이미지 변환기를 사용해 WebP나 AVIF로 변환할 수 있습니다.

Markdown 문서 발행 워크플로우와 결합하기

전체 기술 사양서를 Markdown으로 작성 중이라면 먼저 다이어그램을 검증해 이미지로 내보낸 뒤, 본문은 Markdown HTML 변환기로 정리하세요. 원본 Mermaid 코드를 저장소나 문서 주석에 함께 보관해 두면 나중에 구조가 바뀌어도 몇 줄만 수정해 즉시 새 다이어그램을 뽑을 수 있습니다.

마무리

Mermaid는 다이어그램을 코드처럼 버전 관리할 수 있게 해 주며, 브라우저 렌더러는 그 문법을 즉시 발표 가능한 그래픽으로 바꿔 줍니다. 복잡한 노드 이름에 큰따옴표를 쓰고, 배경에 맞는 테마를 고른 뒤 목적에 맞게 SVG나 PNG로 내보내 보세요.