Mermaid 다이어그램을 CSS로 꾸미는 가벼운 SVG 렌더러 공개
원제 Pele – Mermaid diagrams as themeable SVG
198 포인트댓글 23
Key Point
Mermaid의 성능 문제(느린 렌더링, 큰 번들)를 해결하면서도 CSS 기반의 쉬운 커스터마이징을 제공하는 경량 대안이 필요한 개발자들에게 선택지를 제공한다.
핵심 요약
- Pele는 Mermaid 다이어그램을 SVG로 렌더링하는 가벼운 오픈소스 라이브러리다.
- Mermaid 문법으로 작성한 다이어그램을 Pele에 전달하면 SVG 형태로 변환된다.
- CSS 변수를 이용해 배경색, 글자색, 선 색상 등을 자유롭게 설정할 수 있으며, 다시 렌더링하지 않고도 색상 변경이 적용된다.
- gzip 압축 시 번들 크기는 1.6KB로, 표준 Mermaid.js의 230KB에 비해 매우 작다.
- 렌더링 속도는 0.05~0.3ms로 Mermaid.js의 6~82ms보다 훨씬 빠르다.
- 외부 의존성이 없으며, 소형 화면에서도 레이아웃을 자동으로 조정해 다이어그램을 표시한다.
- npm, pnpm, yarn, bun 패키지 매니저로 설치할 수 있고, import { render } from 'pele'로 불러와 render() 함수에 Mermaid 문법을 전달하면 SVG를 반환받아 DOM에 삽입할 수 있다.