Pele - Mermaid 다이어그램을 테마 적용 가능한 SVG로 렌더링하는 라이브러리

• Pele는 Mermaid 문법으로 작성한 다이어그램을 SVG로 렌더링하는 가벼운 오픈소스 라이브러리임
• CSS 변수로 색상과 글꼴을 설정하며, 색상 변경은 다시 렌더링하지 않아도 적용됨
• 자체 비교 기준으로 Mermaid.js보다 6배 작고 최대 500배 빠르며, 직접 의존성이 없음
• Mermaid 12.1.0에 내장된 모든 다이어그램 유형을 지원하며, 작은 화면에서는 다이어그램을 축소하는 대신 레이아웃을 조정함
• 앱에서는 render() 에 Mermaid 문법을 전달하고 반환된 SVG를 페이지에 삽입해 사용할 수 있음

렌더링과 테마 적용

• Pele는 Mermaid 문법을 입력받아 SVG를 생성함
• CSS 변수 기반 테마로 색상과 글꼴을 설정할 수 있으며, 색상 변경 시 재렌더링이 필요 없음
  • 예제에서는 --pele-bg, --pele-fg, --pele-muted, --pele-line, --pele-surface, --pele-surface-alt, --pele-border로 색상을 지정함
• API의 render()에 Mermaid 문법을 전달한 뒤, 반환된 SVG를 페이지에 삽입하는 방식으로 앱에 통합함
• Obsidian에서 다이어그램을 빠르게 렌더링하고 테마에 맞추기 위해 개발됨
  • 이름은 화산과 불의 여신 Pele에서 따옴

Mermaid.js와의 비교

• Mermaid 12.1.0에 내장된 모든 다이어그램 유형을 지원함
• 자체 비교 기준으로 gzip 번들 크기는 Pele 230 kB, Mermaid.js 1.6 MB이며, Pele가 6배 작음
• 같은 비교에서 렌더링 시간은 Pele 0.05~0.3 ms, Mermaid.js 6~82 ms이며, Pele가 최대 500배 빠름
• 직접 의존성은 Pele 0개, Mermaid.js 23개임
• 작은 화면에서 Pele는 레이아웃을 조정하고, Mermaid.js는 다이어그램 크기를 축소함
• 테마 설정에 Pele는 CSS 변수를, Mermaid.js는 테마 구성을 사용함