Pele – Temalandırılabilir SVG Olarak Mermaid Diyagramları

Yazılım geliştirme süreçlerinde sistem mimarilerini, veri akışlarını ve algoritmik karar ağaçlarını görselleştirmek hem öğrenme hem de teknik dokümantasyon açısından kritik bir adımdır. Pele, Mermaid diyagramlarını CSS değişkenleriyle temalandırılabilir SVG formatına dönüştüren hafif ve açık kaynaklı bir kütüphanedir. Standart Mermaid sözdizimini yazdığınızda, Pele bunu doğrudan yüksek performanslı bir SVG çıktısına dönüştürür.

Mermaid Sözdiziminden SVG Çıktısına#

Pele, metin tabanlı diyagram tanımlarını alıp hızlıca görsel bileşenlere çevirir. Örneğin bir akış şeması (flowchart) tanımladığınızda, diyagramın akış yönünü ve karar noktalarını basitçe belirleyebilirsiniz:

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

Geliştiriciler için bu yaklaşım, diyagramları kod tabanında versiyon kontrolü altında tutmayı ve dokümantasyonu kodla senkronize etmeyi kolaylaştırır.

CSS Değişkenleri ile Yeniden Oluşturmadan Temalandırma#

Geleneksel diyagram araçlarında tema veya renk değişikliği yapmak genellikle diyagramın baştan sona yeniden işlenmesini (re-rendering) gerektirir. Pele ise renkleri ve yazı tiplerini ayarlamak için doğrudan CSS değişkenlerini kullanır. Bu sayede açık (Light) ve koyu (Dark) tema geçişleri veya özel renk paleti güncellemeleri diyagramı yeniden oluşturmaya gerek kalmadan anında uygulanır:

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

Modern web uygulamalarında tasarım sistemiyle (design system) tam uyumlu diyagramlar sunmak bu mimariyle çok daha pratik hale gelir.

Pele ve Mermaid.js Karşılaştırması#

Üretim ortamındaki uygulamalarda paket boyutu, çalışma hızı ve bağımlılık yönetimi doğrudan kullanıcı deneyimini etkiler. Pele ve standart Mermaid.js arasındaki temel farklar şunlardır:

• Paket Boyutu (Bundle size - gzip): Pele 230 kB iken, Mermaid.js 1.6 MB boyutundadır.
• Oluşturma Süresi (Render time): Pele 0.05–0.3 ms aralığında sonuç üretirken, Mermaid.js 6–82 ms sürer.
• Doğrudan Bağımlılıklar (Direct dependencies): Pele 0 bağımlılığa sahipken, Mermaid.js 23 doğrudan bağımlılık içerir.
• Küçük Ekranlar (Small screens): Pele yerleşim düzenini ekrana uyarlarken (Adapts the layout), Mermaid.js diyagramı ölçeklendirerek küçültür (Scales the diagram).
• Temalandırma (Theming): Pele CSS değişkenleri ile çalışırken, Mermaid.js özel tema yapılandırması (Theme configuration) gerektirir.

Sıfır bağımlılık ve milisaniyenin altındaki oluşturma süresi, özellikle gerçek zamanlı güncellenen arayüzlerde ve düşük donanımlı mobil cihazlarda ciddi bir performans avantajı sağlar.

Uygulamanıza Entegrasyon ve API Kullanımı#

Pele'yi projenize dahil etmek için kullandığınız paket yöneticisine göre aşağıdaki komutlardan birini çalıştırabilirsiniz:

• npm: npm install pele
• pnpm: pnpm add pele
• yarn: yarn add pele
• bun: bun add pele

Kurulumun ardından Mermaid sözdizimini render() fonksiyonuna ileterek dönen SVG çıktısını doğrudan sayfanıza ekleyebilirsiniz:

import { render } from 'pele';

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

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

Pratik Çıkarım: Eğitim platformları, teknik bloglar veya geliştirici araçları inşa ederken sayfa yüklenme hızından ödün vermeden dinamik ve duyarlı (responsive) diyagramlar göstermek için Pele oldukça verimli bir alternatiftir.