Pele, 테마를 적용할 수 있는 Mermaid 다이어그램 SVG 렌더러

AI 요약

Pele은 Mermaid 문법을 받아 SVG를 만드는 렌더러입니다. 웹페이지에서 CSS 변수로 배경, 전경, 선, 표면 색상과 글꼴을 지정하며 색상 변경은 다이어그램을 다시 렌더링하지 않고 반영합니다. API의 render() 함수에 Mermaid 문법을 전달하면 SVG를 돌려줍니다.

Mermaid.js와의 비교

Pele 페이지는 gzip 번들 크기를 230kB, Mermaid.js를 1.6MB로 제시합니다. 렌더링 시간은 Pele 0.05~0.3ms, Mermaid.js 6~82ms라고 설명합니다. Pele은 직접 의존성이 없고 작은 화면에서 레이아웃을 조정하며 CSS 변수로 테마를 설정한다고 안내합니다. 비교 수치의 측정 환경과 다이어그램 조건은 페이지에 나오지 않습니다.

지원 범위와 반응

Pele은 Mermaid의 구문을 따르되 레이아웃은 그대로 따르지 않는다고 제작자가 설명합니다. 예제와 플레이그라운드에는 지원 다이어그램과 Mermaid와의 비교 기능이 있습니다.

Hacker News 반응

• @nickmain — 공식 Mermaid 라이브러리가 SVG 레이아웃을 위해 여전히 전체 브라우저나 헤드리스 브라우저 환경을 요구하나요? 그렇다면 다른 곳에 Mermaid 렌더링을 넣으려는 경우 Pele은 반가운 소식입니다.
  • @invokestatic — Python mermaidx 라이브러리로 CI/CD 과정에서 다이어그램을 넣은 문서를 만들 수 있습니다. 다만 레이아웃과 렌더링이 엉킬 때가 있습니다. 연결선이 서로 교차하고 정돈되지 않는 식입니다. 레이아웃 설정으로 해결되지 않으면 mmdc에서 PNG로 내보내 넣기도 합니다.
  • @falsaberN1 — SVG를 출력하는 Merman도 Github에 있습니다.
• @lukeify — 장난감 수준보다 복잡한 다이어그램에 Mermaid를 쓰면 결과 레이아웃이 난해하고 위상적으로 좋지 않아 늘 좌절합니다. 스타일링은 그에 비하면 사소한 문제입니다.
  • @tptacek — 그래프 레이아웃은 악명 높게 어려운 문제입니다.
  • @kepano — 강하게 동의합니다. 그래서 Pele은 레이아웃이 아니라 문법만 따르도록 설계했습니다. 예제와 플레이그라운드의 비교 모드를 확인해 보세요.
  • @DenisM — 레이아웃 품질이 인상적입니다. 다이어그램을 비교하는 기능도 생각해 보셨나요? 소스는 버전 관리하고 텍스트 차이를 볼 수 있지만, 시각적 비교도 있으면 좋겠습니다.
• @kinduff — 플레이그라운드의 Mermaid 미리보기가 작동하지 않는다고 알렸습니다.
  • @kepano — 어떤 식으로 작동하지 않나요? 브라우저와 오류 등 자세한 내용이 있나요?
  • @kinduff — 자세한 내용을 첨부하지 않아 미안합니다. 관련 정보를 올렸습니다.
• @Ancapistani — 서브그래프가 바깥 노드와 연결될 때도 자체 방향을 유지합니다. 느리더라도 Mermaid.js 대신 쓰기에 충분한 이유입니다. 기능 목록을 다 보기도 전에 마음을 정했습니다.

원문: Pele / 번역·요약: Trawling