---
title: "Pele – Temalandırılabilir SVG Olarak Mermaid Diyagramları"
url: https://blog.edumints.com/pele-temalandirilabilir-svg-olarak-mermaid-diyagramlari
category: "Yazılım"
date: 2026-10-18T15:05:25.499Z
publisher: Edumints Blog
lang: tr-TR
source_name: "Hacker News"
source_url: https://pele.run/
---

# 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:

```mermaid
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:

```css
.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:

```javascript
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.

[](https://pele.run/)

---

**Kaynak:** Hacker News (https://pele.run/)
**Yayıncı:** [Edumints Blog](https://blog.edumints.com) · Alıntılarken bu URL'ye bağlantı verin: https://blog.edumints.com/pele-temalandirilabilir-svg-olarak-mermaid-diyagramlari