Yaprak bloklar da dahil olmak üzere başlıklı kapsayıcılar için iç içe akış şeması alt grafiklerini kullanın. Boş kapsayıcılar kötü görüntülendiğinde, her yaprağın içine görünmez bir aralayıcı ekleyin. Bu, görünür hiyerarşiyi korur; sonucu yüklediğiniz Obsidian oluşturucusunda kontrol edin.

Bu kılavuz tek bir nötr diyagram oluşturuyor: Collection başlıklı bir dış blok; bunun içinde Group A ve Group B var ve her grubun içinde başlıklı yaprak kapsayıcılar bulunuyor. Amaç, bu yaprakların başlıklı kapsayıcılar gibi görünmesini sağlamak; onları sıradan etiketli dikdörtgenlerle değiştirmek değil.

Başlıklı bir yaprak blok neyi temsil etmeli?

İçinde başka anlamlı bir blok olsun ya da olmasın, görünür her kapsayıcıyı bir subgraph olarak tanımlayın. Mermaid, akış şeması örneklerinde alt grafikleri, açık alt grafik kimliklerini ve iç içe yapıları belgeliyor. leafA["Block A"] gibi sıradan bir düğüm bildirimi etiketli bir düğüm oluşturur; başlıklı bir kapsayıcı tanımlamaz. Bkz. Mermaid’in Akış Şemaları — Temel Sözdizimi.

Bu örnekte görünür modeli düzen desteğinden ayırın. Collection, gruplar ve yaprak bloklar anlamlı öğelerdir. Aralayıcı, yaprak kapsayıcıya düzen için içerik sağlamak üzere kullanılan bir uygulama ayrıntısıdır. Bu yardımcıyı eklemek, yaprak bloğun bildirimini alt grafik yerine düğüme dönüştürmez.

Bu ayrım, bu yaklaşımın sınırını da belirler: görünür yaprakların başlıklı kapsayıcı olarak kaldığı bir diyagram oluşturur, ancak kaynakta sıradan yardımcı düğümler bulunur. Görünmez yardımcılar dahil hiçbir düğüm bildiriminin bulunmaması gerekiyorsa, bu geçici çözüm daha katı gereksinimi karşılamaz.

Mac yüklemenizin hangi oluşturucuyu kullandığını kontrol edin

Obsidian’da kenar çubuğundan Settings’i açın, ardından General’ı seçip uygulama sürümünü not edin. Obsidian’ın Ayarlar belgeleri, sürüm bilgilerinin bulunduğu yer olarak General’ı gösteriyor. İlgili sürüm notlarını seçerken bu sürümü kullanın.

Oluşturucu açısından önemli bir ayrım var. 22 Ekim 2026 tarihli resmî sürüm notları, Desktop 1.15.0 sürümünü erken erişim olarak etiketliyor ve Mermaid sözdizimini Obsidian’ın Pele kitaplığıyla işlediğini, Mermaid 12.1.0 sözdizimiyle uyumluluk sunduğunu belirtiyor. Aynı sürümde, oluşturulan diyagram sınıfları Pele’nin sınıflarıyla değiştiriliyor. Daha eski bir yüklemenin Pele kullandığını ya da uyumluluğun Mermaid.js ile aynı çıktıyı verdiğini varsaymayın. Bkz. Obsidian 1.15.0 Desktop (Erken erişim).

Bu kılavuz için alınan Mermaid belgelerinde 12.2.0 sürümü gösteriliyor. Bu, Obsidian sürüm notlarında belirtilen uyumluluk düzeyinden ayrı bir sürümdür. Her birinde aynı örneği kontrol edene kadar belgeleri, çevrimiçi düzenleyiciyi ve yüklediğiniz uygulamayı ayrı ortamlar olarak değerlendirin.

İlk denemede diyagramı oluşturucuya özgü yapılandırmalardan ve harici stil sayfası seçicilerinden uzak tutun. Aşağıdaki örnek alt grafikler ve diyagram içinde tanımlı stiller kullanıyor; kendi yüklemenizi kontrol etmek için basit bir başlangıç noktası sunuyor.

Obsidian notunda iç içe kapsayıcıları oluşturun

Düzenleme görünümünde bir not açın ve açılış ile kapanış çitleri dahil aşağıdaki bloğun tamamını yapıştırın. Obsidian, Mermaid diyagramlarının dil tanımlayıcısı mermaid olan çitli kod blokları şeklinde kullanılmasını belgeliyor. Belgelenen bu not biçimi için ek bir diyagram eklentisi gerekmiyor. Bkz. Gelişmiş biçimlendirme sözdizimi.

```mermaid
flowchart TB
    subgraph collection["Collection"]
        subgraph groupA["Group A"]
            subgraph blockA["Block A"]
                spacerA[" "]
            end
            subgraph blockB["Block B"]
                spacerB[" "]
            end
        end
        subgraph groupB["Group B"]
            subgraph blockC["Block C"]
                spacerC[" "]
            end
        end
    end

    classDef spacer fill:transparent,stroke:transparent,color:transparent;
    class spacerA,spacerB,spacerC spacer;
```

Düzenleme görünümü ile Reading view arasında geçiş yapmak için Cmd+E tuşlarına basın. Düzenleme imlecinin kaynak kodu göstermediği bitmiş diyagramı incelemek için okuma görünümünü kullanın. Bu denetimler Obsidian’ın Görünümler ve düzenleme modu belgelerinde açıklanıyor.

Amaçlanan sonuçta altı görünür başlıklı kapsayıcı bulunur: bir koleksiyon, iki grup ve üç yaprak blok. Her yaprak, etiketi tek bir boşluk olan bir yardımcı içerir. spacer sınıfı dolgu, kenarlık ve metin için şeffaflık ister. Bu yaklaşım, Mermaid’in belgelenmiş sınıf mekanizmasını bir düzen geçici çözümüyle birleştiriyor; Mermaid, classDef ve sınıf atamasını akış şeması stil başvurusunda belgeliyor.

Örnek, belgelenmiş sözdizimine göre incelendi; bu yazı için Mac’te çalışan bir Obsidian oturumunda oluşturulup kontrol edilmedi. Bu nedenle kabul ölçütü yerel olarak görsel denetimdir: altı başlığın tümü görünmeli, her grup kendisine atanmış yaprakları içermeli ve hiçbir aralayıcı dikdörtgen görünmemelidir. Kesin aralıklar ve kardeş öğelerin konumları kabul ölçütü değildir.

Hiyerarşiyi değiştirmeden etiketleri değiştirin

Önce yalnızca tırnak içindeki başlıkları değiştirin. collection, groupA, blockA ve diğer kimlikleri birbirinden farklı tutun. Böylece düzenlenmiş sürümü başlangıç örneğiyle karşılaştırmak kolaylaşır.

Başka bir yaprak eklemek için yaprak alt grafiğinin tamamını kopyalayın, hem alt grafiğe hem de aralayıcıya yeni kimlikler verin ve yeni aralayıcı kimliğini son sınıf atamasına ekleyin. Bunu kapsayan grubun end bildiriminden önce yerleştirin. Örneğin, Group B içine eklenecek dördüncü bir yaprak, groupB içinde blockC öğesinin yanına gelir.

Kapanış bildirimlerini içten dışa doğru okuyun: önce yaprağı, sonra grubunu, en son koleksiyonu kapatın. Girintileme, düzenleme sırasında bu yapıyı görünür kılar; ancak kaynak kodunuzun doğru ifade etmesi gereken, her end öğesinin konumudur.

Neden boş alt grafikler yerine aralayıcı kullanmalı?

Boş kapsayıcıların davranışı oluşturucuya ve sürüme göre değişiklik gösterdi. Mermaid’in 5402 numaralı sorunu, Mermaid 10.8.0 sürümünde boş bir alt grafiğin ELK ile başarısız olduğunu, verilen Dagre örneğinin ise çalıştığını bildiriyor. Bu, belirli bir kurulumla ilgili geçmişe dönük bir rapordur; güncel her oluşturucunun boş alt grafikleri reddettiğinin kanıtı değildir. Bkz. Boş alt grafikte Elk oluşturucusu çalışmıyor.

Buradan çıkarılacak pratik sonuç, belirtilmemiş bir yüklemede kullanılacak diyagramın temelini yalnızca boş kapsayıcı davranışına dayandırmamaktır. Aralayıcı yaklaşımı, anlamlı başlığı alt grafikte tutarken her yaprağa açık içerik sağlar.

Kaynağınızın ne kadar katı olması gerektiğine karar verirken şu kılavuzu kullanın:

Gereksinim Başlangıç yaklaşımı Kontrol edilecekler
Görünür yapraklar başlıklı kapsayıcı olarak kalmalı Şeffaf aralayıcılarla iç içe alt grafikler Başlıklar, kapsayıcılık ve gizli yardımcılar
Kaynakta yardımcı düğüm bulunmamalı Hedef oluşturucuda boş yaprak alt grafikleri deneyin Her boş yaprağın kabul edilebilir biçimde görünüp görünmediği
Yaprak bloklara daha sonra gerçek öğeler eklenecek Yaprak alt grafiklerini tutup aralayıcılarını değiştirin Artık gerekmeyen yardımcıları kaldırın
Blokların belirli sütunlara yerleşmesi gerekiyor Mermaid blok diyagramlarını ayrıca değerlendirin Yüklenen sözdizimi desteği ve başlık sunumu

Mermaid’in özel blok diyagramı belgeleri bileşik blokları, sütunları ve açık aralıkları açıklıyor. Yerleşim temel görev olduğunda bu özellikleri değerlendirmekte yarar var. Ancak bunlar tek başına, dönüşümün bu başlıklı kapsayıcı görünümünü aynen koruyacağını göstermez. Bkz. Blok Diyagramları Belgeleri.

Yanlış görünen bir sonucu teşhis edin

Her seferinde tek bir şeyi değiştirin. Oluşturucu farkını düzenleme hatasından ayırt edebilmek için başlangıç örneğinin tamamının bir kopyasını ayrı bir notta tutun.

  1. Notta diyagram yerine kod görünüyor. Açılış çitinin mermaid kullandığını kontrol edin ve ardından Reading view’a geçin. Çitleri Obsidian’ın belgelenmiş diyagram biçimiyle karşılaştırın.
  2. Bir yaprak sıradan etiketli bir dikdörtgen gibi görünüyor. Bildirimini inceleyin. subgraph ile başlamalı ve aralayıcısı içinde ayrı bir satırda bulunmalıdır.
  3. Yaprağın içinde küçük bir dikdörtgen görünmeye devam ediyor. Aralayıcının kimliğini son class bildirimiyle karşılaştırın. Hangi yardımcıyı gördüğünüzü belirlemek için stili geçici olarak kaldırıp sonra geri yükleyin.
  4. Bir blok yanlış grupta görünüyor. Düzen ayarlarını değiştirmeden önce kapanış end bildirimlerinin sırasını kontrol edin.
  5. Diyagram çevrimiçi çalışıyor, ancak Obsidian’da farklı görünüyor. Yüklü uygulamanın sürüm notlarını çevrimiçi oluşturucunun sürümüyle karşılaştırın. Çalışan yerel örneği başvuru olarak saklayın.

Yerleşimi ayarlamadan önce kapsayıcılığı koruyun

Başlıklar ve kapsayıcılık doğru olduğunda, düzenin okunabilir olup olmadığına karar verin. Dikdörtgenini küçültmek için yaprak alt grafiğini düğümle değiştirmeyin: bu değişiklik, korumaya çalıştığınız gösterimi değiştirir.

Benzer şekilde, yalnızca diyagramın kapsayıcılığın ötesinde bir ilişki göstermesi gerekiyorsa bağlantı ekleyin. Mermaid bir yön sınırlamasını belgeliyor: bir alt grafiğin içindeki düğümü dışarıdaki bir düğüme bağlamak, alt grafiğin üst öğesinin yönünü devralmasına yol açar. Bu tür kenarlar ekledikten sonra düzeni yeniden kontrol edin. Bkz. Alt grafiklerde yön.

Son olarak notu, normalde okuduğunuz genişlikte inceleyin. Koleksiyonu, gruplarını ve başlıklı yapraklarını açıkça gösteren sürümü tutun. Yararlı sonuç, yaprak blokların alt grafik olarak kaldığı, okunabilir bir kapsayıcılık hiyerarşisidir; görünmez düzen yardımcıları da açıkça anlaşılır ve daha sonra kolayca kaldırılabilir.

Kaynaklar