Untuk carta alir Mermaid yang mudah dibaca dan konsisten dalam Obsidian pada Mac, tentukan gaya nod yang boleh digunakan semula dalam setiap rajah. Kekalkan tema aplikasi anda, semak pemapar yang digunakan oleh versi terpasang anda, dan tambah CSS khusus rajah hanya apabila anda memerlukan tetapan lalai yang dikongsi.

Panduan ini menghasilkan carta alir kecil dengan isian nod yang konsisten, label yang mudah dibaca dan satu langkah alternatif yang ditandakan dengan jelas. Semua label adalah rekaan. Matlamatnya ialah corak gaya yang boleh digunakan semula untuk nota biasa, dengan arahan berasingan bagi keadaan Mermaid dan pemapar Pele yang lebih baharu dalam Obsidian berbeza.

Semak pemapar yang dipasang sebelum memilih tetapan

Cari binaan anda di Settings → About → App → Current version, lokasi yang didokumenkan dalam bantuan versi akses awal Obsidian. Catat versi itu sebelum menyelesaikan masalah gaya.

Terdapat batas penting: nota keluaran 22 Oktober 2026 untuk Obsidian 1.15.0 Desktop, bertanda Early access, memperkenalkan Pele untuk memaparkan rajah Mermaid. Nota tersebut menyatakan bahawa Pele menyokong sintaks Mermaid 12.1.0, menggunakan warna dan fon tema, serta menghasilkan kelas SVG yang berbeza. Nota keluaran itu menerangkan keluaran tersebut sahaja; nota itu tidak menentukan pemapar yang dipasang pada Mac anda. Lihat Obsidian 1.15.0 Desktop.

Gunakan jadual keputusan ini sebelum menyalin konfigurasi daripada tutorial lain:

Persekitaran pemaparan anda Mulakan dengan Batas yang perlu diingati
Obsidian yang menggunakan Mermaid sendiri Kelas carta alir pada peringkat sumber; frontmatter rajah jika perlu Ciri konfigurasi bergantung pada versi Mermaid yang dipasang.
Obsidian yang menggunakan Pele Gaya pada peringkat sumber; pemboleh ubah CSS Pele jika perlu Tema Mermaid dan warna themeVariables tidak terpakai.
Pemalam yang menggantikan pemaparan rajah Pemapar dan tetapan yang didokumenkan oleh pemalam itu Tingkah laku pemapar terbina dalam sahaja tidak memadai untuk menentukan keserasian.

Pele mendokumenkan reka letak dan rupanya sendiri secara jelas, walaupun ia menerima sintaks Mermaid. Dokumentasi Keserasian juga menyatakan bahawa sokongan konfigurasi berbeza mengikut jenis rajah. Anggap keserasian sintaks dan hasil visual yang serupa sebagai dua persoalan berasingan.

Bina gaya carta alir yang boleh digunakan semula dalam nota

Cipta nota baharu dan tampal blok lengkap di bawah, termasuk pagar pembuka dan penutup. Dokumentasi sintaks pemformatan lanjutan Obsidian menetapkan blok kod berpagar berlabel mermaid untuk rajah.

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

Sintaks classDef Mermaid yang didokumenkan mentakrifkan rupa yang boleh digunakan semula; class menetapkannya kepada nod bernama. Di sini, tiga nod berkongsi standard, manakala satu nod menggunakan alternate. Asingkan pengecam nod daripada label yang kelihatan supaya perubahan pada perkataan mudah dijejaki. Mekanisme ini diterangkan dalam Carta Alir — Sintaks Asas.

Palet ini ialah pilihan reka bentuk ilustrasi. Ia memadankan isian berwarna pucat dengan teks gelap dan sempadan yang lebih menonjol. Label Option D juga mengenal pasti langkah alternatif, jadi maknanya tidak bergantung pada isian biru semata-mata.

Pratonton nota dan periksa label pada saiz bacaan biasa anda. Hasil yang dikehendaki ialah tiga nod kelabu yang sepadan dan satu nod biru. Biarkan anak panah menggunakan tetapan lalai pemapar pada mulanya; ini memudahkan anda menilai satu perubahan pada satu masa.

Untuk menggunakan semula corak ini, salin seluruh blok ke nota lain, ubah label dan sambungan, kemudian kemas kini senarai nod dalam dua baris terakhir. Simpan satu salinan rujukan palet. Ini ialah amalan manual: mengedit rujukan tidak akan mengemas kini rajah yang telah disalin ke tempat lain secara automatik.

Pele turut menyokong penggayaan yang ditakrifkan dalam rajah, dan dokumentasinya menerangkan bahawa warna yang ditakrifkan dalam sumber kekal tetap apabila tema berubah. Oleh itu, pendekatan ini berguna apabila anda mahukan palet yang konsisten sambil mengekalkan tema Obsidian anda. Lihat Pele Theming.

Gunakan frontmatter rajah hanya apabila Mermaid memaparkan rajah

Jika persekitaran yang dipasang menggunakan Mermaid sendiri dan menyokong frontmatter rajah, anda boleh menetapkan palet keseluruhan dan tipografi rajah secara serentak. Mermaid mendokumenkan konfigurasi frontmatter bermula daripada versi 10.5.0. Konfigurasi peringkat tapak ditentukan oleh aplikasi integrasi; penulis nota boleh menggunakan konfigurasi setempat rajah. Lihat Konfigurasi Mermaid.

Alternatif lengkap ini menetapkan rupa yang dikongsi oleh ketiga-tiga nod. Uji dahulu dalam blok berasingan:

```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 itu mesti berada di dalam pagar mermaid, sebelum flowchart TD. Ia ialah konfigurasi rajah, berasingan daripada sifat nota di bahagian atas fail Markdown.

Mermaid menetapkan base sebagai tema yang boleh disesuaikan dan memerlukan warna perenambelasan untuk enjin temanya. Dokumentasi Konfigurasi Tema menyenaraikan pemboleh ubah teks, isian, sempadan, garisan dan fon yang digunakan di atas. Tetapan ini menentukan rupa rajah tanpa memilih tema aplikasi Obsidian yang lain.

Dalam Pele, menukar warna themeVariables dalam contoh ini tidak akan menghasilkan kesan yang sama: warna tersebut secara jelas tidak disokong. Gunakan kelas yang ditakrifkan dalam sumber untuk warna nod tetap, atau pendekatan pemboleh ubah CSS di bawah untuk tetapan lalai pemapar yang dikongsi. Jangan anggap tetapan tema Mermaid yang diabaikan sebagai alasan untuk terus melaras nilai perenambelasan. Lihat Keserasian Pele.

Tambah tetapan lalai Pele yang dikongsi dengan cebisan CSS ringkas

Bagi pemasangan berasaskan Pele, pemboleh ubah CSS menawarkan satu lagi cara yang disokong. Cara ini berguna apabila beberapa rajah perlu berkongsi tetapan lalai dan anda lebih suka mengubah satu helaian gaya daripada menyunting setiap blok.

Cebisan lengkap berikut menyasarkan carta alir Pele. Ia menetapkan teks, isian, sempadan dan warna penyambung tanpa mengubah nota sekeliling atau tema aplikasi. Pemilih dan pemboleh ubah ini didokumenkan dalam Pele Theming.

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

Pasangnya melalui aliran kerja desktop Obsidian yang didokumenkan:

  1. Buka Settings.
  2. Di bawah Appearance → CSS snippets, pilih Open snippets folder.
  3. Cipta fail teks biasa bernama diagram-defaults.css dalam folder itu dan tampal CSS ke dalamnya.
  4. Kembali ke Appearance → CSS snippets dan pilih Reload snippets.
  5. Aktifkan diagram-defaults.

Kawalan ini dan penggunaan automatik perubahan cebisan yang disimpan didokumenkan dalam Cebisan CSS — Bantuan Obsidian. Pada Mac, pastikan editor anda menyimpan nama fail dengan sambungan .css.

Uji tetapan lalai yang dikongsi menggunakan rajah tiga nod daripada bahagian sebelumnya, dengan membuang frontmatter rajahnya. Warna yang ditentukan dalam sumber boleh mengatasi tetapan lalai pemapar, jadi kelas nod yang dinyatakan secara jelas dalam contoh pertama tidak sesuai untuk menilai sama ada pemboleh ubah isian yang dikongsi berkesan.

Cebisan ini sengaja menggunakan palet cerah yang tetap. Jika tetapan bacaan pilihan anda memerlukan palet lain, ubah teks, permukaan, sempadan dan garisan secara bersama, kemudian periksa hasilnya. Pemboleh ubah --pele-bg digunakan untuk elemen latar belakang; pemboleh ubah itu tidak menjamin panel legap di belakang seluruh rajah.

Pastikan cebisan ini khusus untuk Pele. Dokumentasi carta alir Mermaid mengesyorkan classDef untuk penggayaan nod dan memberi amaran bahawa CSS luaran mungkin kalah kepada gaya dalaman Mermaid. Jangan anggap helaian gaya yang menyasarkan satu pemapar akan berfungsi dengan pemapar yang satu lagi. Lihat panduan kelas CSS Mermaid.

Diagnosis rajah yang sukar dibaca mengikut urutan yang konsisten

Gunakan urutan berikut apabila rajah berjaya dipaparkan tetapi rupanya tidak konsisten. Urutan ini memisahkan sintaks, skop gaya dan ruang yang tersedia tanpa mengubah tema aplikasi anda.

  1. Ringkaskan ujian. Salin rajah nota ke nota sementara dan gunakan tiga label pendek. Jika contoh kecil itu juga gagal, selidiki sintaks atau sokongan pemapar sebelum memperhalus warna.
  2. Pilih satu mekanisme penggayaan. Uji kelas sumber sahaja, frontmatter Mermaid sahaja atau pemboleh ubah Pele sahaja. Menggabungkannya terus menyukarkan anda mengenal pasti penggantian gaya.
  3. Semak pasangan warna. Periksa teks berbanding isian nod, kemudian sempadan dan anak panah berbanding nota sekeliling. Baiki pasangan yang sukar dibaca sebelum menambah warna aksen lain.
  4. Semak lebar bacaan. Pratonton rajah pada lebar panel yang biasa anda gunakan. Pendekkan label atau cuba susunan menegak jika carta terlalu lebar.
  5. Tambah kerumitan secara beransur-ansur. Tambah nod yang selebihnya, gaya alternatif dan label tepi dalam kumpulan kecil. Simpan versi terakhir yang mudah dibaca untuk perbandingan.

Untuk menyemak arah, Mermaid mendokumenkan TD sebagai atas ke bawah dan LR sebagai kiri ke kanan. Cuba ubah pengisytiharan itu sahaja sebelum menulis semula rajah. Lihat Arah carta alir.

Nilai hasil akhir dalam pemapar Obsidian yang dipasang pada anda. Editor luaran boleh membantu memeriksa sintaks, tetapi Pele mendokumenkan kedudukan nod, jarak dan laluan tepi yang berbeza daripada Mermaid. Sumber yang sama tidak semestinya menghasilkan geometri yang sama.

Simpan rajah rujukan kecil bersama palet yang boleh digunakan semula. Setelah label, nod dan penyambungnya jelas dibaca pada lebar panel biasa anda, gunakan konvensyen yang sama dalam nota kerja. Konsistensi datang daripada gaya yang boleh diulang dan pemahaman tentang batas pemapar; tema Obsidian anda boleh kekal seperti sedia ada.

Sumber