# CSS 기반 테마 설정 및 Mermaid 다이어그램을 SVG로 렌더링하는 경량 오픈 소스 라이브러리 “Pele”를 Obsidian의 저자 kepano가 출시

> https://bookfactory.kr/board/news/22722
> 게시판: 뉴스
> 작성자: tachikoma43
> 작성일: 2026-10-19T23:16:11.015Z

---

페일(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 변수는 루트의  요소 및  요소에 포함된 모든 요소에 설정할 수 있습니다.

페일(Pele)이 생성 가능한 다이어그램에 대해서는 “Mermaid 12.1.0에 내장된 모든 종류의 다이어그램”이라고 설명되어 있습니다.

실제로 어떤 다이어그램을 생성할 수 있는지 다음 샘플을 참고하시면 확인하실 수 있습니다. Examples · Pele

pele {
  --pele-bg: #fffcf0; /* 배경색을 오프화이트로 변경 */
  --pele-fg: #100f0f; /* 텍스트색을 다크그레이로 변경 */
}

/* 어두운 모드용 설정 예시 */
@media (prefers-color-scheme: dark) {
  .pele {
    --pele-bg: #100f0f; /* 어두운 모드 배경색 */
    --pele-fg: #cecdc3; /* 어두운 모드 텍스트 색상 */
  }
}pele 클래스 이외에도 다음 클래스 이름이 설정에 사용 가능합니다. 클래스 이름 요소 pele 전체 다이어그램의 루트  pele-flowchart 플로우차트의 루트  pele-title 다이어그램 제목 pele-node 노드 모양과 레이블을 포함하는 그룹 pele-edge 에지 선과 마커를 포함하는 그룹 pele-edge-label 에지 레이블 pele-cluster 서브 그래프 pele-cluster-label 서브 그래프 제목 pele-label 노드 레이블 텍스트 pele-marker 화살표와 같은 에지 마커 pele-icon 아이콘 예를 들어, data-id가 "start"인 노드의 레이블에 강조 색상을 적용하는 방법은 다음과 같습니다. .pele-node[data-id="start"] .pele-label {
  fill: var(--pele-accent);
}Pele의 목표 중 하나는 SVG 다이어그램을 안전하게 렌더링하는 것인데, SVG 모양, 텍스트, 링크, 이미지의 생성은 수행하지만, 스크립트, 이벤트 핸들러, HTML 레이블로의 변환은 수행하지 않습니다. JavaScript 콜백은 무시되고, 클릭 문구 내의 내용은 전혀 실행되지 않습니다. 또한, 링크에 http, https, mailto, tel URL 스킴만 허용하고, 이미지에 http, https만 허용합니다. 즉, "//host/share"와 같은 다른 URL 스킴 또는 네트워크 경로가 기본적으로 차단됩니다. Pele는 Mermaid 다이어그램을 매우 빠르고 안전하게 렌더링할 수 있는 경량화 및 의존성 없는 라이브러리이며, 웹 애플리케이션 개발에서 다이어그램 표시의 강력한 선택지로 기대가 높습니다. Google 우선 소스에 설정 복사 기사 제목과 URL을 복사 X Facebook Bluesky Discord Threads

혹은CDN에서 읽어옵니다.Pele의 기본적인 사용법은 render() 함수를 사용하여 SVG로 변환된 다이어그램을 HTML 요소 내에 설정하는 것입니다.import { render } from 'pele';
const { svg } = render(`flowchart LR A[Mermaid 텍스트] --> B[SVG]`);
document.querySelector('#diagram').innerHTML = svg;또한, 브라우저 환경에서는 mount() 함수를 사용하면 "요소 렌더링", "CSS에서 폰트 로딩", "컨테이너 너비에 맞춘 레이아웃 조정"이 자동으로 수행됩니다.import { mount } from 'pele';
const diagram = mount(container, source);Pele의 특징 중 하나는 "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 변수는 루트의  요소 및  요소에 포함된 모든 요소에 설정할 수 있습니다. .pele {
  --pele-bg: #fffcf0; /* 배경색을 오프화이트로 변경 */
  --pele-fg: #100f0f; /* 텍스트 색상을 어두운 회색으로 변경 */
}

/* 어두운 모드용 설정 예시 */
@media (prefers-color-scheme: dark) {
  .pele {
    --pele-bg: #100f0f; /* 어두운 모드 배경색 */
    --pele-fg: #cecdc3; /* 어두운 모드 텍스트 색상 */
  }
}pele 클래스 이외에도 다음 클래스 이름이 설정에 사용 가능합니다. 클래스 이름 요소 pele 전체 다이어그램의 루트  pele-flowchart 플로우차트의 루트  pele-title 다이어그램 제목 pele-node 노드 모양과 레이블을 포함하는 그룹 pele-edge 에지 선과 마커를 포함하는 그룹 pele-edge-label 에지 레이블 pele-cluster 서브 그래프 pele-cluster-label 서브 그래프 제목 pele-label 노드 레이블 텍스트 pele-marker 화살표와 같은 에지 마커 pele-icon 아이콘 예를 들어, data-id가 "start"인 노드의 레이블에 강조 색상을 적용하는 방법은 다음과 같습니다. .pele-node[data-id="start"] .pele-label {
  fill: var(--pele-accent);
}Pele의 목표 중 하나는 SVG 다이어그램을 안전하게 렌더링하는 것인데, SVG 모양, 텍스트, 링크, 이미지의 생성은 수행하지만, 스크립트, 이벤트 핸들러, HTML 레이블로의 변환은 수행하지 않습니다. JavaScript 콜백은 무시되고, 클릭 문구 내의 내용은 전혀 실행되지 않습니다. 또한, 링크에 http, https, mailto, tel URL 스킴만 허용하고, 이미지에 http, https만 허용합니다. 즉, "//host/share"와 같은 다른 URL 스킴이나 네트워크 경로가 기본적으로 차단됩니다. Pele는 Mermaid 다이어그램을 매우 빠르고 안전하게 렌더링할 수 있는 경량화되고 의존성이 없는 라이브러리이며, 웹 애플리케이션 개발에서 다이어그램 표시의 강력한 선택지로 기대가 높습니다. Google 우선 소스에 설정 복사 기사 제목과 URL을 복사 X Facebook Bluesky Discord Threads

Pele의 기본적인 사용법은 render() 함수를 사용하여 SVG로 렌더링된 다이어그램을 HTML 요소 내에 설정합니다. import { render } from 'pele';
const { svg } = render(`flowchart LR A[Mermaid 텍스트] --> B[SVG]`);
document.querySelector('#diagram').innerHTML = svg; 또한, 브라우저 환경에서는 mount() 함수를 사용하면 “요소 렌더링”, “CSS에서 폰트 로딩”, “컨테이너 너비에 맞춘 레이아웃 조정”이 자동으로 수행됩니다. import { mount } from 'pele';
const diagram = mount(container, source); Pele의 특징 중 하나는 “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 변수는 루트의  요소 및  요소에 포함된 모든 요소에 설정할 수 있습니다. .pele {
  --pele-bg: #fffcf0; /* 배경색을 오프화이트로 변경 */
  --pele-fg: #100f0f; /* 텍스트 색을 어두운 회색으로 변경 */
}

/* 어두운 모드용 설정 예시 */
@media (prefers-color-scheme: dark) {
  .pele {
    --pele-bg: #100f0f; /* 어두운 모드 배경색 */
    --pele-fg: #cecdc3; /* 어두운 모드 텍스트 색상 */
  }
}pele 클래스 이외에도 다음 클래스 이름이 설정에 사용 가능합니다. 클래스 이름 요소 pele 전체 다이어그램의 루트  pele-flowchart 플로우차트의 루트  pele-title 다이어그램 제목 pele-node 노드 모양과 레이블을 포함하는 그룹 pele-edge 에지 선과 마커를 포함하는 그룹 pele-edge-label 에지 레이블 pele-cluster 서브 그래프 pele-cluster-label 서브 그래프 제목 pele-label 노드 레이블 텍스트 pele-marker 화살표와 같은 에지 마커 pele-icon 아이콘 예를 들어, data-id가 "start"인 노드의 레이블에 강조 색상을 적용하는 방법은 다음과 같습니다. .pele-node[data-id="start"] .pele-label {
  fill: var(--pele-accent);
}Pele의 목표 중 하나는 SVG 다이어그램을 안전하게 렌더링하는 것인데, SVG 모양, 텍스트, 링크, 이미지의 생성은 수행하지만, 스크립트, 이벤트 핸들러, HTML 레이블로의 변환은 수행하지 않습니다. JavaScript 콜백은 무시되고, 클릭 문구 내의 내용은 전혀 실행되지 않습니다. 또한, 링크에 http, https, mailto, tel URL 스킴만 허용하고, 이미지에 http, https만 허용합니다. 즉, "//host/share"와 같은 다른 URL 스킴이나 네트워크 경로가 기본적으로 차단됩니다. Pele는 Mermaid 다이어그램을 매우 빠르고 안전하게 렌더링할 수 있는 경량화 및 의존성 없는 라이브러리이며, 웹 앱 개발에서 다이어그램 표시의 강력한 선택지로 기대가 높습니다. Google 우선 소스에 설정 복사 기사 제목과 URL을 복사 X Facebook Bluesky Discord Threads

또한, 브라우저 환경에서는 mount() 함수를 사용하면 “요소 렌더링”, “CSS에서 폰트 로딩”, “컨테이너 너비에 맞춘 레이아웃 조정”이 자동으로 수행됩니다. import { mount } from 'pele';
const diagram = mount(container, source); Pele의 특징 중 하나는 “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 Gantt 차트의 중요 작업, 칸반 보드의 고 우선 순위 등 --pele-error#e45756 mount()가 표시하는 오류 --pele-font 컨테이너의 기본 폰트 레이블의 폰트 --pele-font-mono 컨테이너의 기본 폰트 단행본 레이블의 폰트 --pele-title-weightbold 다이어그램 제목 --pele-heading-weightbold 클래스 이름 또는 섹션 레이블과 같은 제목 --pele-bold-weightbold 레이블 내의 굵은 텍스트 --pele-radius4px 둥근 모양의 모서리 반경 CSS 변수는 루트의  요소 및  요소에 포함된 모든 요소에 설정할 수 있습니다. .pele {
  --pele-bg: #fffcf0; /* 배경색을 오프 화이트로 변경 */
  --pele-fg: #100f0f; /* 텍스트 색을 다크 그레이로 변경 */
}

/* 어두운 모드용 설정 예시 */
@media (prefers-color-scheme: dark) {
  .pele {
    --pele-bg: #100f0f; /* 어두운 모드 배경색 */
    --pele-fg: #cecdc3; /* 어두운 모드 텍스트 색상 */
  }
}pele 클래스 이외에도 다음 클래스 이름이 설정에 사용 가능합니다. 클래스 이름 요소 pele 전체 다이어그램의 루트  pele-flowchart 플로우차트의 루트  pele-title 다이어그램 제목 pele-node 노드 모양과 레이블을 포함하는 그룹 pele-edge 에지 선과 마커를 포함하는 그룹 pele-edge-label 에지 레이블 pele-cluster 서브 그래프 pele-cluster-label 서브 그래프 제목 pele-label 노드 레이블 텍스트 pele-marker 화살표와 같은 에지 마커 pele-icon 아이콘 예를 들어, data-id가 "start"인 노드의 레이블에 강조 색상을 적용하는 방법은 다음과 같습니다. .pele-node[data-id="start"] .pele-label {
  fill: var(--pele-accent);
}Pele의 목표 중 하나는 SVG 다이어그램을 안전하게 렌더링하는 것인데, SVG 모양, 텍스트, 링크, 이미지의 생성은 수행하지만, 스크립트, 이벤트 핸들러, HTML 레이블로의 변환은 수행하지 않습니다. JavaScript 콜백은 무시되고, 클릭 문구 내의 내용은 전혀 실행되지 않습니다. 또한, 링크에 http, https, mailto, tel URL 스킴만 허용하고, 이미지에 http, https만 허용합니다. 즉, "//host/share"와 같은 다른 URL 스킴이나 네트워크 경로가 기본적으로 차단됩니다. Pele는 Mermaid 다이어그램을 매우 빠르고 안전하게 렌더링할 수 있는 경량화 및 의존성 없는 라이브러리이며, 웹 앱 개발에서 다이어그램 표시의 강력한 선택지로 기대가 높습니다. Google 우선 소스에 설정 복사 기사 제목과 URL을 복사 X Facebook Bluesky Discord Threads

페이의 특징 중 하나는 “CSS 변수를 사용하여 외관을 사용자 정의할 수 있다”는 점입니다.

CSS 변수는 루트의  요소 및  요소에 포함된 모든 요소에 설정할 수 있습니다.

```css
.pele {
  --pele-bg: #fffcf0; /* 배경색을 오프화이트로 변경 */
  --pele-fg: #100f0f; /* 텍스트색을 다크그레이로 변경 */
}
```

/* 어두운 모드용 설정 예시 */
@media (prefers-color-scheme: dark) {
  .pele {
    --pele-bg: #100f0f; /* 어두운 모드 배경색 */
    --pele-fg: #cecdc3; /* 어두운 모드 텍스트 색상 */
  }
}pele 클래스 이외에도 다음 클래스 이름이 설정에 사용 가능합니다. 클래스 이름 요소 pele 전체 다이어그램의 루트  pele-flowchart 플로우차트의 루트  pele-title 다이어그램 제목 pele-node 노드 모양과 레이블을 포함하는 그룹 pele-edge 에지 선과 마커를 포함하는 그룹 pele-edge-label 에지 레이블 pele-cluster 서브 그래프 pele-cluster-label 서브 그래프 제목 pele-label 노드 레이블 텍스트 pele-marker 화살표와 같은 에지 마커 pele-icon 아이콘 예를 들어, data-id가 "start"인 노드의 레이블에 강조 색상을 적용하는 방법은 다음과 같습니다. .pele-node[data-id="start"] .pele-label {
  fill: var(--pele-accent);
}Pele의 목표 중 하나는 SVG 다이어그램을 안전하게 렌더링하는 것인데, SVG 모양, 텍스트, 링크, 이미지의 생성은 수행하지만, 스크립트, 이벤트 핸들러, HTML 레이블로의 변환은 수행하지 않습니다. JavaScript 콜백은 무시되고, 클릭 문구 내의 내용은 전혀 실행되지 않습니다. 또한, 링크에 http, https, mailto, tel URL 스킴만 허용하고, 이미지에 http, https만 허용합니다. 즉, "//host/share"와 같은 다른 URL 스킴이나 네트워크 경로가 기본적으로 차단됩니다. Pele는 Mermaid 다이어그램을 매우 빠르고 안전하게 렌더링할 수 있는 경량화 및 의존성 없는 라이브러리이며, 웹 애플리케이션 개발에서 다이어그램 표시의 강력한 선택지로 기대가 높습니다. Google 우선 소스에 설정 복사 기사 제목과 URL을 복사 X Facebook Bluesky Discord Threads

다음 클래스 이름도 설정에 사용할 수 있습니다.

예를 들어, data-id가 "start"인 노드의 레이블에 악센트 색상을 적용하려면 다음과 같이 합니다. .pele-node[data-id="start"] .pele-label {
  fill: var(--pele-accent);
}Pele의 목표 중 하나는 SVG 다이어그램을 안전하게 렌더링하는 것이며, SVG 모양, 텍스트, 링크, 이미지의 생성은 수행하지만, 스크립트, 이벤트 핸들러, HTML 레이블로의 변환은 수행하지 않습니다. JavaScript 콜백은 무시되고, 클릭 스테이트먼트 내의 내용은 전혀 실행되지 않습니다. 또한, 링크에 http, https, mailto, tel의 URL 스킴만 허용하고, 이미지에 http, https만 허용합니다. 즉, "//host/share"와 같은 다른 URL 스킴이나 네트워크 경로가 기본적으로 차단됩니다. Pele는 Mermaid 다이어그램을 매우 빠르고 안전하게 렌더링할 수 있는 경량화되고 의존성이 없는 라이브러리이며, 웹 앱 개발에서 다이어그램 표시의 강력한 선택지로서 기대가 높습니다. Google 우선 소스에 설정 Clipboard 기사 제목과 URL을 복사 XFacebookBlueskyDiscordThreads

Pele의 목표 중 하나는 SVG 다이어그램을 안전하게 렌더링하는 것이 있었으며, SVG 형태, 텍스트, 링크, 이미지의 생성은 수행하지만, 스크립트, 이벤트 핸들러, HTML 레이블로의 변환은 수행하지 않습니다. JavaScript 콜백은 무시되며, 클릭 스테이트먼트 내의 내용은 일절 실행되지 않습니다. 또한, 링크에 http, https, mailto, tel의 URL 스킴만을 허용하고, 이미지에 http, https만을 허용합니다. 즉, "//host/share"와 같은 다른 URL 스킴이나 네트워크 경로가 기본적으로 차단됩니다. Pele는 Mermaid 다이어그램을 매우 빠르고 안전하게 렌더링할 수 있는 경량화되고 의존성이 없는 라이브러리이며, 웹 애플리케이션 개발에서 다이어그램 표시의 강력한 선택지로 기대가 듭니다.

[원문 보기](https://gigazine.net/news/20261020-pele/) | 출처: Gigazine