mermaid의 대체제로서 Pele 테스트

뉴스 및 이벤트 공지사항
1

저희는 메타 사이트에서 테스트 목적으로 mermaid 테마 컴포넌트를 pele로 교체했습니다 :test_tube:

이건 어떤 건가요?

mermaid는 두 가지로 구성됩니다:

  1. 일반 텍스트로 다이어그램(흐름도, 시퀀스, 타임라인…)을 묘사하는 구문
  2. 브라우저에서 해당 텍스트를 SVG로 변환하는 라이브러리

pele은 2번 부분을 대체합니다. 동일한 구문[1]을 읽지만 자체 엔진과 고유한 스타일 :gear:을 가지고 있습니다.

작동 방식은?

게시물(또는 채팅 메시지)에 ```mermaid 코드 블록을 작성합니다. 게시물이 표시될 때 테마 컴포넌트가 블록을 감지하고 그 위치에서 pele이 다이어그램을 그립니다.

pele은 실제로 다이어그램이 있는 페이지만 다운로드하므로 다른 부분은 느려지지 않습니다.

왜 교체했나요?

mermaid 라이브러리는 크기가 크고 “느립니다”. pele은 6배 더 작고, 최대 500배 더 빠르며, 의존성이 없고, CSS 변수로 테마를 커스터마이징할 수 있으며, MIT 라이선스이고, Obsidian 팀이 개발했습니다.

실제로: 다이어그램이 더 빠르게 나타나며, 추가 작업 없이도 사이트의 색상(라이트/다크 모드 포함)과 일치합니다.

동일한 ```mermaid 구문을 사용하므로 게시물에서는 아무것도 변경할 필요가 없습니다.

귀하의 사이트에서 직접 시도해 보시려면 테마 컴포넌트를 확인해 보세요.

:warning: 먼저 mermaid 컴포넌트를 제거하세요. 두 컴포넌트는 동시에 실행할 수 없습니다.

flowchart LR
  A[mermaid] -->|교체| B[pele]
  B --> C{괜찮은가요?}
  C -->|예| D[🎉]
  C -->|아니요| E[여기에 답글 작성]

시각적 버그를 발견하시면 :folded_hands: 아래 내용을 포함하여 여기에 답글을 남겨 주세요.

  • 게시물 링크 (또는 다이어그램 소스)
  • 스크린샷
  • 브라우저 및 테마 (라이트/다크)

감사합니다 :wink:

  1. mermaid 12.1.0까지 지원되는 모든 다이어그램 유형 ↩︎

29개의 좋아요
2

지시 사항이 불분명합니다. :tada: 리액션을 사용할 수 없습니다 :pensive_face:

좋아 보입니다!

9개의 좋아요
3

지난주에 Pele에 대해 알게 되었어요. 내부 통합을 시도해볼까 생각하다가 오늘 이걸 발견했어요. 코어에서 나온 것이라 아주 빠르네요, 감사합니다!

2개의 좋아요
4

Pele는 이미 많은 플랫폼에 통합되어 있습니다. 그 이유는 명확합니다!

저는 Obsidian에서 사용 중이며, 방금 Discourse 커뮤니티에서도 테스트해 봤는데 매우 좋습니다.

3개의 좋아요
5

제가 이해한 대로라면, Pele을 사용하여 Pele 요소가 우리 커뮤니티/브랜드 스타일을 따르도록 설정하면, 기존에 존재하던 모든 Mermaid 차트(아니면 새로운 차트만 해당할 수도 있지만)가 우리 스타일의 기본 룩 앤 필을 갖출 수 있나요?

6

네 :+1:

컴포넌트에서는 이미 Pele의 CSS 변수를 사이트의 색상 팔레트에 매핑하므로, 모든 다이어그램(기존 및 신규)은 자동으로 사용자의 색상(라이트/다크 모드 포함)을 적용합니다.

추가로 조정하려면 테마의 CSS에서 .pele-diagram 선택자에 대해 --pele-* 변수를 오버라이드하면 됩니다 :wink:

4개의 좋아요