Gunakan subgraf diagram alir bertingkat untuk kontainer bertajuk, termasuk blok daun. Jika kontainer kosong dirender dengan buruk, tambahkan pengisi tak terlihat di dalam setiap daun. Ini mempertahankan hierarki yang terlihat; periksa hasilnya di perender Obsidian yang terpasang.

Panduan ini membuat satu diagram netral: blok luar bertajuk Collection, yang berisi Group A dan Group B, dengan kontainer daun bertajuk di dalam setiap grup. Tujuannya adalah agar daun-daun tersebut tetap tampak sebagai kontainer dengan judul, bukan menggantinya dengan persegi panjang biasa berlabel.

Apa yang sebaiknya mewakili blok daun bertajuk?

Representasikan setiap kontainer yang terlihat dengan subgraph, terlepas dari apakah kontainer itu berisi blok lain yang bermakna. Mermaid mendokumentasikan subgraf, ID subgraf eksplisit, dan penyarangan dalam contoh diagram alirnya. Deklarasi simpul biasa seperti leafA["Block A"] membuat simpul berlabel; deklarasi itu tidak menyatakan kontainer bertajuk. Lihat Diagram Alir — Sintaks Dasar Mermaid.

Untuk contoh ini, bedakan model yang terlihat dari dukungan tata letaknya. Collection, grup, dan blok daun adalah elemen yang bermakna. Pengisi adalah detail implementasi yang digunakan untuk memberi kontainer daun isi bagi tata letak. Penambahan elemen bantu itu tidak mengubah deklarasi daun dari subgraf menjadi simpul.

Perbedaan itu juga menetapkan batas pendekatan ini: pendekatan ini menghasilkan diagram dengan daun yang terlihat tetap berupa kontainer bertajuk, tetapi sumbernya menyertakan simpul bantu biasa. Jika persyaratan Anda melarang semua deklarasi simpul, termasuk elemen bantu tak terlihat, solusi sementara ini tidak memenuhi persyaratan yang lebih ketat tersebut.

Periksa perender yang digunakan instalasi Mac Anda

Di Obsidian, buka Settings dari bilah sisi, lalu pilih General dan catat versi aplikasinya. Dokumentasi Settings Obsidian menyebutkan bahwa informasi versi terdapat di General. Gunakan versi itu saat memilih catatan rilis yang relevan.

Ada perbedaan penting terkait perender. Catatan rilis resmi 22 Oktober 2026 menyebut Desktop 1.15.0 sebagai akses awal dan menyatakan bahwa Mermaid dirender melalui pustaka Pele milik Obsidian, dengan kompatibilitas untuk sintaks Mermaid 12.1.0. Rilis yang sama mengubah kelas diagram yang dihasilkan menjadi kelas milik Pele. Jangan berasumsi bahwa instalasi yang lebih lama menggunakan Pele, atau bahwa kompatibilitas berarti hasilnya identik dengan Mermaid.js. Lihat Obsidian 1.15.0 Desktop (Akses awal).

Dokumentasi Mermaid yang diambil untuk panduan ini menampilkan versi 12.2.0. Itu versi yang berbeda dari tingkat kompatibilitas yang disebutkan dalam catatan rilis Obsidian tersebut. Anggap dokumentasi, editor daring, dan aplikasi yang terpasang sebagai lingkungan terpisah sampai Anda memeriksa contoh yang sama di masing-masing lingkungan.

Untuk percobaan pertama, hindari konfigurasi khusus perender dan selektor lembar gaya eksternal pada diagram. Contoh di bawah menggunakan subgraf dan penataan gaya lokal diagram, sebagai titik awal sederhana untuk memeriksa instalasi Anda.

Buat kontainer bertingkat di catatan Obsidian

Buka catatan dalam tampilan pengeditan, lalu tempel seluruh blok di bawah, termasuk pagar pembuka dan penutupnya. Obsidian mendokumentasikan diagram Mermaid sebagai blok kode berpagar dengan pengenal bahasa mermaid. Tidak diperlukan plugin diagram tambahan untuk format catatan yang didokumentasikan tersebut. Lihat Sintaks pemformatan lanjutan.

```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;
```

Tekan Cmd+E untuk beralih antara pengeditan dan Reading view. Gunakan tampilan baca untuk memeriksa diagram yang sudah jadi tanpa kursor pengeditan menampilkan sumbernya. Kontrol ini didokumentasikan dalam Tampilan dan mode pengeditan Obsidian.

Hasil yang diharapkan memiliki enam kontainer bertajuk yang terlihat: satu koleksi, dua grup, dan tiga blok daun. Setiap daun berisi elemen bantu dengan label satu spasi. Kelas spacer meminta isian, batas, dan teks transparan. Ini menggabungkan mekanisme kelas Mermaid yang terdokumentasi dengan solusi tata letak; Mermaid mendokumentasikan classDef dan penetapan kelas dalam referensi penataan gaya diagram alir-nya.

Contoh ini telah diperiksa berdasarkan sintaks yang terdokumentasi; contoh ini belum dirender dalam sesi Obsidian Mac untuk artikel ini. Karena itu, kriteria penerimaannya bersifat visual dan lokal: keenam judul harus muncul, setiap grup harus berisi daun yang ditetapkan untuknya, dan tidak boleh ada persegi panjang pengisi yang terlihat. Jarak dan posisi saudara yang persis bukan kriteria penerimaan.

Ubah label tanpa mengubah hierarki

Mulailah dengan hanya mengubah judul yang diapit tanda kutip. Pertahankan ID collection, groupA, blockA, dan ID lainnya agar tetap unik. Dengan begitu, versi yang diedit lebih mudah dibandingkan dengan contoh awal.

Untuk menambahkan daun lain, salin satu subgraf daun lengkap, beri ID baru pada subgraf dan pengisinya, lalu tambahkan ID pengisi baru ke penetapan kelas terakhir. Letakkan sebelum end milik grup yang menaunginya. Misalnya, daun keempat di dalam Group B berada di samping blockC, di dalam groupB.

Baca pernyataan penutup dari dalam ke luar: tutup daun, tutup grupnya, lalu tutup koleksi. Indentasi memperjelas struktur saat mengedit, tetapi penempatan setiap end harus dituliskan dengan benar di sumber Anda.

Mengapa menggunakan pengisi alih-alih subgraf kosong?

Perilaku kontainer kosong bervariasi menurut perender dan versi. Isu Mermaid 5402 melaporkan subgraf kosong yang gagal dengan ELK di Mermaid 10.8.0, sementara contoh Dagre yang disertakan berfungsi. Ini laporan historis tentang konfigurasi tertentu, bukan bukti bahwa setiap perender saat ini menolak subgraf kosong. Lihat Perender Elk tidak bekerja pada subgraf kosong.

Kesimpulan praktisnya adalah jangan menjadikan perilaku kontainer kosong sebagai satu-satunya landasan diagram yang ditujukan untuk instalasi yang belum diketahui. Pendekatan pengisi memberi setiap daun isi eksplisit, sementara judul yang bermakna tetap berada pada subgraf.

Gunakan panduan keputusan ini saat menentukan seberapa ketat sumber Anda perlu dibuat:

Persyaratan Pendekatan awal Hal yang perlu diperiksa
Daun yang terlihat harus tetap menjadi kontainer bertajuk Subgraf bertingkat dengan pengisi transparan Judul, hubungan penampungan, dan elemen bantu tersembunyi
Sumber tidak boleh berisi simpul bantu Coba subgraf daun kosong di perender sasaran Apakah setiap daun kosong dirender dengan baik
Blok daun nantinya akan berisi item sungguhan Pertahankan subgraf daun dan ganti pengisinya Hapus hanya elemen bantu yang sudah tidak diperlukan
Blok memerlukan penempatan kolom yang disengaja Evaluasi diagram blok Mermaid secara terpisah Dukungan sintaks pada versi terpasang dan tampilan judul

Dokumentasi diagram blok khusus Mermaid menjelaskan blok komposit, kolom, dan jarak eksplisit. Fitur-fitur itu layak dievaluasi saat penempatan menjadi tugas utama. Namun, fitur tersebut tidak dengan sendirinya menjamin bahwa konversi akan mempertahankan tampilan kontainer bertajuk yang sama persis. Lihat Dokumentasi Diagram Blok.

Diagnosis hasil yang tampak keliru

Ubah satu hal saja pada satu waktu. Simpan salinan lengkap contoh awal di catatan terpisah agar Anda dapat membedakan perbedaan perender dari kesalahan pengeditan.

  1. Catatan menampilkan kode, bukan diagram. Periksa apakah pagar pembuka menggunakan mermaid, lalu beralih ke Reading view. Bandingkan pagar tersebut dengan format diagram yang didokumentasikan Obsidian.
  2. Daun tampak seperti persegi panjang biasa berlabel. Periksa deklarasinya. Barisnya harus diawali subgraph, dengan pengisi pada baris terpisah di dalamnya.
  3. Persegi panjang kecil tetap terlihat di dalam daun. Cocokkan ID pengisi dengan pernyataan class yang terakhir. Hapus sementara penataan gayanya untuk mengenali elemen bantu yang terlihat, lalu pulihkan kembali.
  4. Blok muncul di grup yang salah. Periksa urutan pernyataan end penutup sebelum menyesuaikan pengaturan tata letak.
  5. Diagram berfungsi secara daring, tetapi berbeda di Obsidian. Bandingkan catatan rilis aplikasi terpasang dengan versi perender daring. Jadikan contoh lokal yang berfungsi sebagai acuan.

Pertahankan hubungan penampungan sebelum menyesuaikan penempatan

Setelah judul dan hubungan penampungan benar, tentukan apakah susunannya cukup mudah dibaca. Jangan mengganti subgraf daun dengan simpul hanya agar perseginya lebih kecil: perubahan itu mengubah representasi yang ingin Anda pertahankan.

Demikian pula, tambahkan penghubung hanya jika diagram memerlukan hubungan di luar penampungan. Mermaid mendokumentasikan batasan arah: menghubungkan simpul di dalam subgraf ke bagian luar menyebabkan subgraf itu mewarisi arah induknya. Periksa kembali tata letaknya setelah menambahkan sisi tersebut. Lihat Arah dalam subgraf.

Akhiri dengan memeriksa catatan pada lebar yang biasa Anda gunakan untuk membacanya. Pertahankan versi yang menampilkan koleksi, grup-grupnya, dan daun-daun bertajuk dengan jelas. Hasil yang berguna adalah hierarki penampungan yang mudah dibaca dengan blok daun tetap berupa subgraf, serta elemen bantu tata letak tak terlihat yang dipahami dengan jelas dan mudah dihapus nanti.

Sumber