Mac’te Obsidian’da okunaklı ve tutarlı Mermaid akış şemaları oluşturmak için her diyagramın içinde yeniden kullanılabilir düğüm stilleri tanımlayın. Uygulama temanızı koruyun, yüklü sürümünüzün hangi işleyiciyi kullandığını kontrol edin ve yalnızca ortak varsayılanlara ihtiyaç duyduğunuzda diyagrama özgü CSS ekleyin.

Bu kılavuzda tutarlı düğüm dolgularına, okunaklı etiketlere ve açıkça belirtilmiş bir alternatif adıma sahip küçük bir akış şeması oluşturuyoruz. Tüm etiketler örnek amaçlıdır. Amaç, sıradan notlarda kullanılabilecek yeniden kullanılabilir bir biçimlendirme düzeni sunmak ve Mermaid ile Obsidian’ın daha yeni Pele işleyicisinin farklı davrandığı durumlar için ayrı yönergeler vermektir.

Ayarları seçmeden önce yüklü işleyicinizi kontrol edin

Sürümünüzü Settings → About → App → Current version yolundan bulun; bu konum Obsidian’ın Erken erişim sürümleri yardımında belgelenmiştir. Stillerle ilgili sorunları gidermeden önce bu sürümü not edin.

Önemli bir ayrım var: Erken erişim olarak işaretlenen 22 Ekim 2026 tarihli Obsidian 1.15.0 Desktop sürüm notları, Mermaid diyagramlarını işlemek için Pele’yi sunuyor. Notlarda Mermaid 12.1.0 söz diziminin desteklendiği, tema renkleriyle yazı tiplerinin kullanıldığı ve farklı SVG sınıfları oluşturulduğu belirtiliyor. Bu sürüm notları söz konusu sürümü açıklar; Mac’inizde hangi işleyicinin yüklü olduğunu göstermez. Bkz. Obsidian 1.15.0 Desktop.

Başka bir öğreticideki yapılandırmayı kopyalamadan önce aşağıdaki karar tablosunu kullanın:

İşleme ortamınız Şununla başlayın Hatırlamanız gereken sınır
Mermaid’in kendisini kullanan Obsidian Kaynak düzeyinde akış şeması sınıfları; isteğe bağlı olarak diyagram önbilgisi Yapılandırma özellikleri yüklü Mermaid sürümüne bağlıdır.
Pele kullanan Obsidian Kaynak düzeyinde stiller; isteğe bağlı olarak Pele CSS değişkenleri Mermaid temaları ve themeVariables renkleri uygulanmaz.
Diyagram işlemeyi değiştiren bir eklenti Eklentinin belgelendirdiği işleyici ve ayarlar Yerleşik işleyicinin davranışı, uyumluluğu belirlemek için yeterli değildir.

Pele, Mermaid söz dizimini kabul etse bile kendi düzenini ve görünümünü açıkça belgeliyor. Uyumluluk belgelerinde yapılandırma desteğinin diyagram türüne göre değiştiği de belirtiliyor. Söz dizimi uyumluluğunu ve görsel çıktının birebir aynı olmasını ayrı konular olarak değerlendirin.

Notun içinde yeniden kullanılabilir bir akış şeması stili oluşturun

Yeni bir not oluşturun ve aşağıdaki bloğu açılış ve kapanış çitleriyle birlikte yapıştırın. Obsidian’ın Gelişmiş biçimlendirme söz dizimi belgelerinde, diyagramlar için mermaid etiketi taşıyan çitli bir kod bloğu belirtiliyor.

```mermaid
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
    B --> D[Option D]

    classDef standard fill:#edf2f7,stroke:#475569,color:#172033,stroke-width:2px;
    classDef alternate fill:#e0f2fe,stroke:#0369a1,color:#172033,stroke-width:2px;
    class A,B,C standard;
    class D alternate;
```

Mermaid’in belgelenen classDef söz dizimi yeniden kullanılabilir bir görünüm tanımlar; class ise bu görünümü adlandırılmış düğümlere atar. Burada üç düğüm standard sınıfını, biri de alternate sınıfını kullanıyor. İfade değişikliklerini kolayca izleyebilmek için düğüm kimliklerini görünen etiketlerden ayrı tutun. Bu yöntemler Akış şemaları — Temel söz dizimi belgesinde açıklanıyor.

Renk paleti örnek amaçlı bir tasarım tercihidir. Açık dolguları koyu metin ve belirgin kenarlıklarla eşleştirir. Option D etiketi de alternatif adımı tanımlar; böylece anlamı yalnızca mavi dolguya bağlı kalmaz.

Notu önizleyin ve etiketleri alışık olduğunuz okuma boyutunda kontrol edin. Beklenen sonuç, birbiriyle eşleşen üç gri düğüm ve bir mavi düğümdür. Başlangıçta okları işleyicinin varsayılanlarında bırakın; böylece her seferinde tek bir değişikliğin etkisini değerlendirmek kolaylaşır.

Bu düzeni yeniden kullanmak için bloğun tamamını başka bir nota kopyalayın, etiketleri ve bağlantıları değiştirin, son iki satırdaki düğüm listelerini güncelleyin. Paletin bir referans kopyasını saklayın. Bu, elle uygulanan bir yöntemdir: referansı düzenlemek, başka yerlere önceden kopyalanmış diyagramları otomatik olarak güncellemez.

Pele diyagram içinde tanımlanan stilleri de destekler ve belgelerinde kaynakta tanımlanan renklerin tema değiştiğinde sabit kaldığı açıklanır. Bu nedenle Obsidian temanızı korurken tutarlı bir palet kullanmak istediğinizde bu yaklaşım işe yarar. Bkz. Pele’de tema oluşturma.

Diyagramı Mermaid işliyorsa diyagram önbilgisini kullanın

Yüklü ortamınız Mermaid’in kendisini kullanıyorsa ve diyagram önbilgisini destekliyorsa diyagramın genel paletini ve tipografisini birlikte ayarlayabilirsiniz. Mermaid, önbilgi yapılandırmasını 10.5.0 sürümünden itibaren belgeliyor. Site düzeyindeki başlatma yapılandırması, Mermaid’i entegre eden uygulamaya aittir; not yazarı bunun yerine diyagrama özgü yapılandırma kullanabilir. Bkz. Mermaid Yapılandırması.

Aşağıdaki eksiksiz alternatif, üç düğümün tümü için ortak bir görünüm ayarlar. Önce ayrı bir test bloğunda deneyin:

```mermaid
---
config:
  theme: base
  themeVariables:
    primaryColor: "#edf2f7"
    primaryTextColor: "#172033"
    primaryBorderColor: "#475569"
    lineColor: "#64748b"
    fontFamily: "Arial, sans-serif"
    fontSize: "16px"
---
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
```

YAML, mermaid çitinin içinde, flowchart TD satırından önce yer almalıdır. Bu, Markdown dosyasının üstündeki not özelliklerinden ayrı bir diyagram yapılandırmasıdır.

Mermaid, özelleştirilebilir tema olarak base değerini belirtir ve tema motoru için onaltılık renkler gerektirir. Tema Yapılandırması belgelerinde yukarıda kullanılan metin, dolgu, kenarlık, çizgi ve yazı tipi değişkenleri listeleniyor. Bu ayarlar, farklı bir Obsidian uygulama teması seçmeden diyagramın görünümünü belirler.

Pele’de bu örnekteki themeVariables renklerini değiştirmek aynı sonucu vermez; bu renkler açıkça desteklenmiyor. Sabit düğüm renkleri için kaynakta tanımlı sınıfları, ortak işleyici varsayılanları içinse aşağıdaki CSS değişkeni yöntemini kullanın. Yok sayılan Mermaid tema ayarlarını onaltılık değerleri değiştirmeye devam etmek için gerekçe saymayın. Bkz. Pele Uyumluluğu.

Küçük bir CSS kod parçacığıyla ortak Pele varsayılanları ekleyin

Pele kullanan bir kurulumda CSS değişkenleri desteklenen başka bir yöntem sunar. Birden fazla diyagramın aynı varsayılanları kullanmasını istiyorsanız ve her bloğu düzenlemek yerine tek bir stil dosyasını değiştirmeyi tercih ediyorsanız bu yöntem kullanışlıdır.

Aşağıdaki eksiksiz kod parçacığı Pele akış şemalarını hedefler. Çevresindeki nota ve uygulama temasına dokunmadan metin, dolgular, kenarlıklar ve bağlantı çizgilerinin renklerini ayarlar. Seçici ve değişkenler Pele’de tema oluşturma belgesinde açıklanıyor.

.pele-flowchart {
  --pele-bg: #ffffff;
  --pele-fg: #172033;
  --pele-line: #64748b;
  --pele-surface: #edf2f7;
  --pele-surface-alt: #e2e8f0;
  --pele-border: #475569;
}

Bunu Obsidian’ın belgelenmiş masaüstü iş akışıyla yükleyin:

  1. Settings bölümünü açın.
  2. Appearance → CSS snippets altında Open snippets folder seçeneğini seçin.
  3. Bu klasörde diagram-defaults.css adlı düz metin bir dosya oluşturup CSS’i içine yapıştırın.
  4. Appearance → CSS snippets bölümüne dönün ve Reload snippets seçeneğini seçin.
  5. diagram-defaults seçeneğini etkinleştirin.

Bu denetimler ve kaydedilen kod parçacıklarının otomatik olarak uygulanması CSS snippets — Obsidian Yardım belgesinde açıklanıyor. Mac’te düzenleyicinizin dosya adını .css uzantısıyla kaydettiğini kontrol edin.

Önceki bölümdeki üç düğümlü diyagramı kullanarak ortak varsayılanları sınayın ve diyagram önbilgisini kaldırın. Kaynakta tanımlı renkler işleyici varsayılanlarının önüne geçebilir; bu yüzden ilk örnekteki açık düğüm sınıfları, ortak dolgu değişkenlerinin etkili olup olmadığını değerlendirmek için uygun değildir.

Bu kod parçacığı bilerek sabit bir açık palet kullanıyor. Tercih ettiğiniz okuma düzeni farklı bir palet gerektiriyorsa metin, yüzey, kenarlık ve çizgi renklerini birlikte değiştirin, ardından sonucu inceleyin. --pele-bg değişkeni arka plan öğeleri içindir; tüm diyagramın arkasında opak bir panel olacağını garanti etmez.

Bu kod parçacığını Pele’ye özgü tutun. Mermaid’in kendi akış şeması belgeleri, düğüm biçimlendirmesi için classDef kullanılmasını öneriyor ve harici CSS’in Mermaid’in kendi stillerinin etkisinde kalabileceği konusunda uyarıyor. Bir işleyiciyi hedefleyen stil dosyasının diğeriyle de çalışacağı varsayılmamalıdır. Bkz. Mermaid’in CSS sınıfları yönergeleri.

Okunamayan diyagramları tutarlı bir sırayla teşhis edin

Diyagram oluşturuluyor ancak görünümü tutarsızsa aşağıdaki sırayı izleyin. Bu adımlar, uygulama temanızı değiştirmeden söz dizimini, stil kapsamını ve kullanılabilir alanı birbirinden ayırır.

  1. Testi küçültün. Notun diyagramını geçici bir nota kopyalayın ve üç kısa etiket bırakın. Küçük örnek de çalışmazsa renkleri iyileştirmeden önce söz dizimini veya işleyici desteğini inceleyin.
  2. Tek bir biçimlendirme yöntemi seçin. Yalnızca kaynak sınıflarını, yalnızca Mermaid önbilgisini veya yalnızca Pele değişkenlerini deneyin. Bunları hemen birleştirmek, öncelik geçişlerini belirlemeyi zorlaştırır.
  3. Eşleşen renkleri kontrol edin. Metni düğüm dolgusu karşısında, ardından kenarlıkları ve okları çevredeki not karşısında inceleyin. Yeni bir vurgu rengi eklemeden önce okunmayan renk çiftini düzeltin.
  4. Okuma genişliğini kontrol edin. Diyagramı normalde kullandığınız bölme genişliğinde önizleyin. Şema fazla genişlerse etiketleri kısaltın veya dikey düzeni deneyin.
  5. Karmaşıklığı aşamalı olarak geri ekleyin. Kalan düğümleri, alternatif stilleri ve kenar etiketlerini küçük gruplar halinde ekleyin. Karşılaştırma için okunabilir son sürümü elinizin altında bulundurun.

Yönü kontrol etmek için Mermaid, TD değerini yukarıdan aşağıya, LR değerini ise soldan sağa olarak belgeliyor. Diyagramı baştan yazmadan önce yalnızca bu bildirimi değiştirmeyi deneyin. Bkz. Akış şeması yönü.

Sonucu yüklü Obsidian işleyicinizde değerlendirin. Harici bir düzenleyici söz dizimini incelemeye yardımcı olabilir, ancak Pele farklı düğüm konumları, aralıklar ve kenar yolları kullandığını belgeliyor. Kaynağın eşleşmesi, geometrinin de eşleşmesini gerektirmez.

Yeniden kullanılabilir paletinizin yanında küçük bir referans diyagramı bulundurun. Etiketleri, düğümleri ve bağlantıları normal bölme genişliğinizde kolayca okunur hale geldiğinde aynı düzeni çalışma notlarınıza uygulayın. Tutarlılık, tekrarlanabilir bir stil ve bilinen işleyici sınırından gelir; Obsidian temanızı olduğu gibi bırakabilirsiniz.

Kaynaklar