페일(Pele)은 머이미다(Mermaid) 문법으로 작성된 다이어그램을 SVG 형식으로 렌더링하기 위한 경량화된 오픈 소스 라이브러리입니다. 주요 특징 중 하나는 CSS 변수 기반의 테마 기능으로, 다이어그램의 시각적인 스타일을 쉽게 커스터마이징할 수 있습니다. 페일(Pele) · 머이미다(Mermaid) 다이어그램을 테마 적용 SVG로 더 빠르게 렌더링하세요! 🌋 · GitHubhttps://github.com/obsidianmd/pele 페일(Pele)의 제작자인 케파노(kepano) 氏의 게시글이 여기 있습니다.
이것은 Pele입니다, 다이어그램 및 차트를 위한 새로운 렌더링 라이브러리로, 최신 Mermaid 구문과 호환됩니다. - mermaid.js보다 100-500배 더 빠르고 - 6배 더 작은 번들 - 의존성 없음 - 쉬운 테마 적용 - 기기 너비에 반응형
Obsidian을 불가능하게 빠르고 통일된 디자인으로 만드는 것을 추구하는 동안, 저는 Mermaid 라이브러리가 너무 크고, 너무 느리고, 테마를 적용하기가 너무 어렵다는 것을 항상 발견했습니다. Pele는 다음 Obsidian 버전에서 새로운 렌더링기로 출시될 예정이지만, 지금 바로 사용할 수 있습니다. Pele [ˈpɛlɛ]는 화산과 불의 여신이라는 이름에서 유래되었습니다. MIT 라이선스 하에 오픈 소스입니다. 플레이그라운드에서 직접 사용해보세요!
위의 게시물을 인용한 “원래 Mermaid보다 빠르다고 느껴지지 않을 수도 있습니다”라는 게시물도 보였지만, kepano 氏は 성능보다는 보안 측면에 대한 의식을 갖게 된 것이 제작의 계기가 되었다고 언급했습니다. 또한, kepano 氏はObsidian의 개발사인 Dynalist의 CEO이며, Obsidian과 Mermaid의 통합에 결정적인 역할을 한 사람입니다.
존경하는 자세로, 스스로 조사해 보십시오. 정반대입니다.
Mermaid.js가 “https://t.co/Zd5q1pO13u”로 전환되었으며, 원래 비전을 잃고 있습니다. 새로운 사이트를 확인해 보세요.
저는 오픈 소스 프로젝트를 수년간 유지해 왔습니다. 제 GitHub 기록과 프로젝트를 여기에서 확인해 보세요: https://t.co/GAFXTLWexfI
저는 Minimal.Mermaid.js에 대해 6년 동안 테마를 작성했으며, 커밋 내역을 확인해 보세요.
Mermaid.js는 2020년 7월부터 Obsidian에서 0.7.6 버전으로 업데이트되었습니다.
우리는 8.5.2에서 11.13.0까지 15번 업그레이드했기 때문에 라이브러리를 매우 잘 알고 있습니다.
수백만 명의 Obsidian 사용자들은 다이어그램/차트에서 무엇을 원하는지 정확히 알려주며, 저는 그 점을 우선 순위로 정하고 있습니다: 성능, 안전성, 테마, 모바일 친화성.
최신 Mermaid 버전(12.1)에는 또 다른 레이아웃 엔진(총 3개)이 포함되어 있으며, 의심스러운 안전 기록을 가지고 있습니다(CVE를 참조하세요). Obsidian 1.13에서는 잠재적으로 안전하지 않은 Mermaid 다이어그램 때문에 새로운 토글/경고를 도입해야 했습니다.
Pele를 사용하든 사용하지 않든 신경 쓰이는 것은 아무것도 아닙니다. 하지만 그것이 좋은 이유는 아닙니다.
Pele의 주요 특징은 다음과 같습니다.
* **경량성:** 작은 번들 크기 및 직접 의존 관계 없음
* **고속 렌더링:** Mermaid.js에 비해 현저히 짧은 렌더링 시간
* **CSS 테마:** CSS 변수를 사용한 간편한 외관 사용자 정의
* **반응형 디자인:** 작은 모바일 화면에 대한 대응
* **오픈 소스:** 무료로 이용 가능하며 수정 가능
고속 렌더링에 대한 자세한 내용은 공식 웹사이트의 “Playground” 페이지에서 직접 확인할 수 있습니다.
Playground · Pele [https://pele.run/playground](https://pele.run/playground) 사이트에서 화면 왼쪽에는 Mermaid 기법이 있고, 화면 오른쪽에는 이에 해당하는 플로우차트 그림이 표시됩니다.
Pele와 Mermaid를 비교하려면 화면 오른쪽 상단의 “Compare”를 클릭합니다.
Pele와 Mermaid가 생성한 플로우차트 그림이 함께 표시되고, 화면 오른쪽 하단에 각각의 소요 시간이 표시됩니다. Mermaid의 59ms에 비해 Pele는 0.3ms이므로 성능 차이는 압도적입니다.
Mermaid 기법의 일부를 변경하고, 변경 사항이 반영되는 데 걸리는 시간을 확인할 수도 있습니다. 다만, “Compare”를 해제하고 “Pele”와 “Mermaid”로 각각 확인하는 것이 차이를 더 실감나게 합니다.
페일을 npm을 통해 설치하려면 다음 명령을 실행합니다.
npm install 페일 혹은 CDN에서 읽어옵니다.
페일의 기본적인 사용법은 render() 함수를 사용하여 SVG화된 다이어그램을 HTML 요소 내에 설정하는 것입니다.
import { render } from '페일';
const { svg } = render(`flowchart LR A[Mermaid 텍스트] --> B[SVG]`);
document.
querySelector('#diagram').
innerHTML = svg; 또한, 브라우저 환경에서는 mount() 함수를 사용하면 "요소에 대한 렌더링", "CSS에서 폰트 읽기", "컨테이너 너비에 맞춘 레이아웃 조정"이 자동으로 수행됩니다.
import { mount } from '페일';
const diagram = mount(container, source); 페일의 특징 중 하나는 "CSS 변수를 사용하여 외관을 사용자 정의할 수 있는" 것입니다.
CSS변수 이름 기본값 용도 --pele-bg#ffffff 배경색 --pele-fg#1f1f1f 텍스트 색상 --pele-muted#6e6e6e 부가 텍스트 색상 --pele-line#1f1f1f 가장자리 및 화살표 색상 --pele-surface#f3f3f3 노드 채우기 색상 --pele-surface-alt#e6e6e6 서브 그래프 채우기 색상 --pele-border#8a8a8a 노드 및 서브 그래프 경계선 색상 --pele-accent#5b7bd5 강조 색상 --pele-critical#e45756 간트 차트의 중요 작업, 칸반 보드의 고 우선 순위 등 --pele-error#e45756 mount()가 표시하는 오류 --pele-font 컨테이너의 기본 글꼴 레이블의 글꼴 --pele-font-mono 컨테이너의 기본 글꼴 단행 글꼴 레이블의 글꼴 --pele-title-weightbold 다이어그램 제목 --pele-heading-weightbold 클래스 이름 또는 섹션 레이블과 같은 제목 --pele-bold-weightbold 레이블 내의 굵은 텍스트 --pele-radius4px 둥근 모양의 모서리 반경 CSS 변수는 루트의