معرفی ابزار Pele؛ رندر نمودارهای Mermaid به SVG قابل‌شخصی‌سازی با CSS

معرفی ابزار Pele

ابزار Pele یک کتابخانه سبک و متن‌باز جدید است که کدهای ساختاریافته Mermaid را دریافت کرده و آن‌ها را به گرافیک برداری مقیاس‌پذیر یا همان SVG تبدیل می‌کند. ویژگی کلیدی این ابزار، امکان کنترل و شخصی‌سازی کامل ظاهر نمودارها با استفاده از CSS variables است. به این ترتیب، تغییر رنگ‌ها و فونت‌ها به‌صورت آنی و بدون نیاز به اجرای مجدد فرآیند رندترینگ اعمال می‌شود.

نحوه کار و جزئیات فنی

کتابخانه Pele به شکلی طراحی شده است که استفاده از آن در برنامه‌های وب بسیار ساده باشد. با فراخوانی متد render و ارسال دستورات Mermaid به آن، خروجی SVG دریافت می‌شود که می‌توانید آن را مستقیماً در DOM صفحه قرار دهید:

import { render } from 'pele';

const { svg } = render(`flowchart LR
 A[Mermaid text] --> B[SVG]`);

document.querySelector('#diagram').innerHTML = svg;

برای تغییر استایل‌ها نیز کافی است متغیرهای مربوطه را در CSS بازنویسی کنید:

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

نگاهی به بحث‌های هکرنیوز

در بحث‌های پیرامون این پروژه در Hacker News، توسعه‌دهندگان به چند نکته جالب اشاره کردند:

• یکی از کاربران با اشاره به نام پروژه ذکر کرد که کلمه «pele» در زبان لتونی به معنای موش است.
• بحث مهمی درباره نیاز کتابخانه اصلی Mermaid به مرورگر (یا محیط headless browser) برای چینش المان‌های SVG مطرح شد؛ اگر این محدودیت در ابزار جدید کمتر باشد، Pele می‌تواند خبری بسیار عالی برای استفاده در محیط‌های مختلف و سرور ساید باشد.
• برخی کاربران نیز به‌دشواریِ پیدا کردن لینک مخزن گیت‌هاب در نسخه اولیه سایت اشاره کردند و یادآور شدند که وجود آیکون GitHub در بالای صفحه برای پروژه‌های متن‌باز اهمیت زیادی دارد. (مخزن این پروژه توسط کاربران در Obsidian پیدا شد).

چرا این ابزار برای مهندسان اهمیت دارد؟

نمایش نمودارها در برنامه‌های وب معمولاً با چالش‌های استایل‌دهی و هماهنگی با حالت‌های تاریک و روشن (Dark/Light mode) روبه‌رو است. ابزار Pele با تکیه بر قابلیت‌های CSS این امکان را فراهم می‌کند که بدون دستکاری ساختار داخلی نمودار، تم آن را با ظاهر کلی اپلیکیشن هماهنگ کنید. این ویژگی برای توسعه‌دهندگانی که به دنبال بهینه‌سازی عملکرد و ساده‌سازی فرآیند نمایش دیاگرام‌ها هستند، بسیار کاربردی است.