‏Pele: رندر سبک دیاگرام‌های Mermaid به SVG

Pele یه کتابخونهٔ متن‌باز و سبکه که دیاگرام‌های Mermaid رو به SVG رندر می‌کنه. Mermaid یه زبان متنیه که باهاش می‌شه فلوچارت و دیاگرام نوشت. کار با Pele ساده‌ست: متن Mermaid رو به تابع render() می‌دید و SVGی که برمی‌گردونه رو تو صفحه می‌ذارید. سورس پروژه زیر حساب obsidianmd روی GitHub منتشر شده.

مهم‌ترین ادعای Pele سبک و سریع بودنه. طبق مقایسه‌ای که تو سایت پروژه اومده، حجم gzip شدهٔ Pele حدود ۲۳۰ کیلوبایته، در حالی که Mermaid.js حدود ۱٫۶ مگابایته. زمان رندر هم بین ۰٫۰۵ تا ۰٫۳ میلی‌ثانیه‌ست، در برابر ۶ تا ۸۲ میلی‌ثانیه برای Mermaid.js. Pele هیچ وابستگی مستقیمی نداره ولی Mermaid.js بیست و سه تا داره. یعنی اگه فقط رندر دیاگرام لازم دارید، بار خیلی کمتری روی باندل‌تون میاد.

تم‌دهی تو Pele با متغیرهای CSS انجام می‌شه، نه با تنظیمات theme مثل Mermaid.js. رنگ پس‌زمینه، متن، خط‌ها و سطح‌ها هر کدوم یه متغیر دارن. چون رنگ‌ها از CSS خونده می‌شن، عوض کردنشون بدون رندر دوباره اعمال می‌شه؛ مثلاً سوییچ به حالت تاریک فقط با CSS انجام می‌شه:

.pele {
  --pele-bg: #fffcf0;
  --pele-fg: #100f0f;
  --pele-line: #100f0f;
  --pele-border: #cecdc3;
}

یه فرق دیگه هم تو صفحه‌های کوچیکه. به گفتهٔ سایت پروژه، Pele چیدمان دیاگرام رو برای صفحهٔ کوچیک تغییر می‌ده، در حالی که Mermaid.js فقط کل دیاگرام رو کوچیک می‌کنه. یه Playground هم برای امتحان کردن سینتکس و دیدن خروجی فراهم شده.

نکات کلیدی:

• حجم gzip حدود ۲۳۰ کیلوبایت در برابر ۱٫۶ مگابایت Mermaid.js
• زمان رندر ۰٫۰۵ تا ۰٫۳ میلی‌ثانیه در برابر ۶ تا ۸۲ میلی‌ثانیه
• صفر وابستگی مستقیم در برابر ۲۳ وابستگی Mermaid.js
• تم‌دهی با متغیرهایی مثل --pele-bg و --pele-fg، بدون رندر دوباره
• چیدمان دیاگرام رو برای صفحه‌های کوچیک تطبیق می‌ده