Mermaid 다이어그램을 SVG로 변환하는 경량 라이브러리 Pele 공개
원제: Pele – Mermaid diagrams as themeable SVG
왜 중요한가
문서화·노트 앱 등에서 Mermaid 다이어그램 렌더링 성능 병목을 해결할 수 있는 실용적인 대안이 등장했다는 점에서 의미가 있다.
오픈소스 라이브러리 Pele가 Mermaid 문법으로 작성된 다이어그램을 CSS 변수 기반 테마 적용이 가능한 SVG로 렌더링하는 기능을 제공한다. Mermaid.js 대비 번들 크기는 약 6배 작은 230kB(gzip), 렌더링 속도는 최대 500배 빠른 0.05~0.3ms를 기록하며, 외부 의존성은 0개다.
Pele는 Mermaid 12.1.0에 내장된 모든 다이어그램 타입을 지원하는 경량 오픈소스 라이브러리다. MIT 라이선스로 공개되었으며, npm·pnpm·yarn·bun을 통해 설치할 수 있다.
핵심 차별점은 성능과 크기다. Mermaid.js의 번들 크기가 gzip 기준 1.6MB인 데 비해 Pele는 230kB에 불과하다. 렌더링 속도 역시 Mermaid.js의 6~82ms 대비 0.05~0.3ms로 압도적으로 빠르다. 직접 의존성도 23개 대 0개로 극명하게 갈린다.
테마 적용 방식이 특징적이다. CSS 변수(`--pele-bg`, `--pele-fg` 등)를 사용해 배경·전경·선·테두리 색상을 지정하며, 색상 변경 시 다이어그램을 재렌더링할 필요가 없다. 소형 화면에서는 Mermaid.js가 단순히 다이어그램을 축소하는 반면, Pele는 레이아웃 자체를 조정한다.
사용법은 간단하다. `render()` 함수에 Mermaid 문법 문자열을 전달하면 SVG가 반환되며, 이를 DOM에 직접 삽입하면 된다. 이 라이브러리는 원래 노트 앱 Obsidian에서 다이어그램을 빠르게 렌더링하고 사용자 테마에 맞추기 위해 개발되었다. 개발자 kepano가 만들었으며, 화산과 불의 여신 펠레(Pele)에서 이름을 따왔다.