저는 Mermaid를 사용하여 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램 및 간트 차트를 PNG 또는 SVG 형식으로, base64로 인코딩하여 렌더링하는 API를 구축했습니다. 이를 통해 에이전트들이 헤드리스 브라우저 스택을 구성하지 않고도 다이어그램 구문을 공유 가능한 이미지로 변환할 수 있게 되었습니다. 파이프라인은 headless Chromium과 mermaid-cli를 사용하여 작은 HTTP 서비스에 감쌌습니다. 제 테스트에서는 작동했습니다. 그러다가 실제 사용자들이 다이어그램이 있어야 할 자리에 빈 흰색 사각형의 스크린샷을 보내오기 시작했습니다.
버그는 SVG 출력에 놀라울 정도로 특화되어 있었습니다. PNG는 정상적으로 렌더링되었습니다. 하지만 SVG는 유효한 XML과 함께 유효한 파일로 돌아왔지만, 아무것도 없었습니다. 브라우저에서 열어보면 빈 캔버스만 보였습니다. 원인은 다음과 같습니다: mermaid의 SVG 출력은 font-family가 렌더 서버에 존재하지 않는 글꼴을 설정하는 <text> 요소를 포함하고 있었고, 제 headless Chromium은 --font-render-hinting=none으로 구성되어 있었으며 게다가 설치된 글꼴이 전혀 없는 최소한의 컨테이너 이미지였습니다. 브라우저는 대체(fallback) 글꼴을 사용하여 텍스트를 보여주지만, Slack, Discord, GitHub 미리보기 등 대부분의 이미지 뷰어는 그렇지 않습니다. 이들은 누락된 글꼴을 존중하여 아무것도 렌더링하지 않습니다. 텍스트는 DOM에 존재했지만, 그저 보이지 않았던 것입니다.
해결책은 Dockerfile에서 두 줄을 추가하는 것이었습니다: fonts-dejavu-core를 설치하고 mermaid의 fontFamily를 서버에 실제로 존재하는 글꼴 스택(DejaVu Sans, sans-serif)으로 설정하는 것(기본값인 `
이미지나 다이어그램 렌더링 API를 구축한다면, 개발 환경의 브라우저에서만 테스트하지 말고 실제로 사용될 곳에서 출력물을 테스트하세요. '유효한 SVG'와 '보이는 다이어그램'은 같은 것이 아닙니다.
저는 이것을 https://x402.freeq.one/tools/mermaid.html으로 패키징했습니다. 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 간트 차트를 하나의 호출로 PNG 또는 SVG 형식, base64까지 지원합니다.