Pele: Mermaid Diagramsni CSS bilan Uslublashgan SVGga Aylantirish

Pele — bu Mermaid diagrammalarni SVGga aylantiradigan yengil kutubxona. U CSS o'zgaruvchilaridan foydalanib, diagrammalarni uslublashish imkonini beradi. Bu kutubxona Mermaid.jsga qaraganda kamroq bog'liqlik, kichik hajm va tezroq ishlaydi.

Qanday ishlaydi

Pele ishlash usuli juda oddiy. Siz Mermaid sintaksisini yozsangiz, Pele uni SVGga aylantiradi. Misol uchun, quyidagi diagrammaga qarang:

1flowchart TD2  A[Mermaid text] --> B{Flowchart?}3  B -- Yes --> C[Pele]4  B -- No --> D[Mermaid]5  C --> E([SVG])6  D --> E

1.pele {2  --pele-bg: #fffcf0;3  --pele-fg: #100f0f;4  --pele-muted: #6f6e69;5  --pele-line: #100f0f;6  --pele-surface: #f2f0e5;7  --pele-surface-alt: #e6e4d9;8  --pele-border: #cecdc3;9}

flowchart TD
  A[Mermaid text] --> B{Flowchart?}
  B -- Yes --> C[Pele]
  B -- No --> D[Mermaid]
  C --> E([SVG])
  D --> E

Diagrammaning ranglarini va shriftlarini CSS o'zgaruvchilaridan foydalanib o'zgartirishingiz mumkin. Rang o'zgarishlari qayta ishlashsiz amalga oshiriladi.

1npm install pele

1pnpm add pele

pele {
  --pele-bg: #fffcf0;
  --pele-fg: #100f0f;
  --pele-muted: #6f6e69;
  --pele-line: #100f0f;
  --pele-surface: #f2f0e5;
  --pele-surface-alt: #e6e4d9;
  --pele-border: #cecdc3;
}

Pele ning afzalliklari

Pele Mermaid.jsga qaraganda bir nechta afzalliklarga ega:

1yarn add pele

• Zero dependencies: Pele hech qanday bog'liqlikka ega emas.
• Kichik hajm: Pele Mermaid.jsga qaraganda 6 marta kichikroq.
• Tezroq ishlash: Pele Mermaid.jsga qaraganda 500 marta tezroq ishlaydi.
• Har qanday diagrammalarni qo'llab-quvvatlaydi: Pele Mermaid 12.1.0 versiyasidagi barcha diagrammalarni qo'llab-quvvatlaydi.

Pele ni ilovangizga qo'shing

Pele ni ilovangizga API orqali qo'shing. Mermaid sintaksisini render() funksiyasiga o'tkazing va qaytgan SVG ni sahifangizga joylashtiring.

1bun add pele

npm install pele
pnpm add pele
yarn add pele
bun add pele

import { render } from 'pele';
const { svg } = render(`flowchart LR
  A[Mermaid text] --> B[SVG]`);
document.querySelector('#diagram').innerHTML = svg;

Pele ning qanday ishlatilishi

Pele ochiq manbali kutubxona boʻlib, tezroq diagrammalarni chizish va uslublarni moslashtirish uchun Obsidian ilovasi uchun ishlab chiqilgan. U Pele, olov va vulqonlarning xudosi sharafiga nomlangan.

1import { render } from 'pele';23const { svg } = render(`flowchart LR4  A[Mermaid text] --> B[SVG]`);56document.querySelector('#diagram').innerHTML = svg;

Quyidagi havolalarga qarang

• Misol: Qo'llab-quvvatlanadigan diagrammalar turlarini ko'ring.
• API: Ilovangizda diagrammalarni chizish.
• Uslublashish: CSS o'zgaruvchilaridan foydalanib ranglarni va shriftlarni o'zgartiring.
• Moslashuvchanlik: Sintaksis, joylashuv va xususiyatlarni Mermaid bilan taqqoslang.

Asl manba: pele.run