WASM으로 HTML을 이미지 변환하는 라이브러리 개발 중 Mermaid 렌더러를 구현하게 된 과정

요약

본 글은 HTML을 이미지로 변환하는 WASM 기반 라이브러리 개발 과정에서 시작된 올인원 렌더링 패키지 구축 경험을 다룹니다. 이 엔진은 Cloudflare Workers 같은 Edge 환경에서도 작동하며, 기존에 구현한 레이아웃 엔진의 강점을 활용하여 Mermaid 다이어그램을 자체 C++ 파서로 SVG 문자열화하는 방식으로 통합했습니다. 이를 통해 Markdown부터 Mermaid까지 다양한 요소를 하나의 시스템으로 PDF 및 이미지 변환이 가능해졌습니다.

핵심 포인트

• WASM 기반 구현으로 Node.js, 브라우저, Cloudflare Workers 등 환경 제약 없이 작동합니다.
• Mermaid 렌더링은 C++로 Mermaid 문자열을 파싱하여 SVG를 직접 생성하는 방식으로 구현했습니다.
• HTML 레이아웃에 사용된 글꼴 측정 로직을 활용해 다이어그램의 라벨 정렬 정확도를 높였습니다.
• CSS 변경 시에도 페이지 크기, 문자 수 등을 '지문(fingerprint)'으로 기록하여 구조적 변화를 감지합니다.