Untuk menyederhanakan diagram state Mermaid di Obsidian pada Mac, nyatakan setiap transisi yang valid secara eksplisit, persingkat label, dan uji arah pembacaannya. Bandingkan sumber, tujuan, dan teks transisi sebelum menerima hasilnya.

Panduan ini menggunakan empat state sintetis, A hingga D. Tujuannya adalah membuat satu diagram lebih mudah dibaca sambil mempertahankan transisi langsung, jalur kembali, serta penanda awal dan akhir. Tabel transisi menyediakan cara konkret untuk memeriksa bahwa semuanya tetap dipertahankan, terlepas dari cara perender menempatkan panah.

Apa yang harus tetap sama saat Anda menyederhanakan diagram?

Mulailah dengan memisahkan perubahan penyajian dari perubahan model. Label tampilan yang lebih pendek dan arah pembacaan yang berbeda dapat meningkatkan keterbacaan. Menghapus panah mengubah himpunan transisi langsung, meskipun ada rute lain yang tetap mencapai tujuan yang sama.

Misalnya, anggap ada transisi langsung dari A ke C dan juga rute melalui B. Menghapus transisi langsung itu akan memaksa pembaca menyimpulkan adanya kunjungan perantara ke B. Keterjangkauan tetap terjaga, tetapi transisi satu langkah yang valid hilang. Untuk tugas ini, pada akhirnya mencapai tujuan yang sama saja tidak cukup.

Gunakan inventaris transisi berikut sebagai spesifikasi awal. Labelnya adalah nama peristiwa sintetis; label tersebut memiliki makna dalam contoh ini dan harus tetap terpasang pada panah asalnya.

Sumber Tujuan Teks transisi
Awal A Tidak ada
A B step
A C alternate
B C next
B A reset
C B back
C A reset
C D finish
D Akhir Tidak ada

Ada sembilan transisi, termasuk transisi awal dan akhir. Dua panah memiliki label yang sama, reset, tetapi berasal dari state yang berbeda. Pertahankan keduanya. Demikian pula, panah antara B dan C memiliki arah dan label yang berbeda; keduanya adalah transisi terpisah.

Untuk diagram yang lebih besar, catat setiap transisi sebagai kombinasi sumber, tujuan, dan teks sebelum mengedit. Jika teks awal Anda mencakup kondisi atau aksi, pertahankan juga. Mencocokkan jumlah total panah saja tidak dapat mendeteksi panah yang tujuan atau labelnya berubah.

Periksa perender yang digunakan Obsidian terpasang

Di Mac, buka Settings menggunakan ikon roda gigi di bilah sisi, lalu pilih General. Catat versi aplikasi dan versi penginstal yang ditampilkan di bagian atas. Gunakan versi aplikasi saat mencari catatan rilis yang relevan. Lokasi ini dijelaskan dalam bantuan Settings Obsidian.

Batas perender penting. Rilis akses awal Obsidian 1.15.0 Desktop, bertanggal 22 Oktober 2026, beralih ke Pele untuk merender diagram dan menyatakan kompatibilitas dengan sintaks Mermaid 12.1.0. Catatan rilisnya juga menyebutkan bahwa versi ini tidak lagi menyertakan pustaka Mermaid. Pernyataan itu berlaku untuk rilis yang disebutkan; pernyataan tersebut tidak mengidentifikasi perender di setiap versi Obsidian yang terpasang. Lihat catatan rilis Obsidian 1.15.0 Desktop.

Periksa kompatibilitas sintaks dan tampilan visual secara terpisah. Diagram yang diterima editor lain dapat menjadi bahan perbandingan, tetapi aplikasi yang terpasang tetap menjadi tempat untuk memverifikasi hasil akhir. Jangan berasumsi bahwa pengaturan tata letak dari proyek hulu atau contoh dokumentasi yang lebih baru akan berperilaku sama di perender lokal Anda.

Contoh di bawah sengaja tidak menggunakan konfigurasi perender, pengaturan tema, maupun gaya. Jika Anda sudah memiliki diagram yang berfungsi, mulailah dengan deklarasi diagram yang ada dan ubah satu detail penyajian setiap kali. Anda tidak perlu melakukan pemutakhiran hanya untuk membuat inventaris transisi dan mengedit label seperti yang dijelaskan di sini.

Buat versi ringkas dengan transisi eksplisit

Contoh lengkap di bawah menerapkan semua sembilan baris inventaris. Nama state yang terlihat sengaja dibuat pendek. State A adalah titik awal, B dan C memiliki jalur kembali, dan hanya D yang memiliki transisi ke penanda akhir.

Mermaid mendokumentasikan alias state, transisi berlabel, penanda awal dan akhir, serta pernyataan arah dalam referensi diagram state. Metode penyisipan yang didokumentasikan Obsidian adalah blok kode berpagar dengan pengenal bahasa mermaid, seperti dijelaskan dalam Sintaks pemformatan lanjutan.

```mermaid
stateDiagram-v2
    direction LR

    state "Stage A" as A
    state "Stage B" as B
    state "Stage C" as C
    state "Stage D" as D

    [*] --> A

    A --> B : step
    A --> C : alternate

    B --> A : reset
    B --> C : next

    C --> A : reset
    C --> B : back
    C --> D : finish

    D --> [*]
```

Tempel seluruh contoh Markdown tersebut, termasuk baris pembuka dan penutup dengan tiga tanda backtick, ke dalam catatan. Pagar luar dengan empat tanda backtick yang ditampilkan di sini hanya digunakan untuk menampilkan contoh dalam artikel ini; pagar tersebut bukan bagian dari isi catatan.

Untuk memeriksa teks persisnya, gunakan Source mode. Untuk memeriksa hasil yang dirender, beralihlah ke Reading view; di macOS, Cmd+E mengalihkan tampilan membaca dan mengedit. Obsidian menjelaskan kontrol ini dalam Tampilan dan mode pengeditan.

Pernyataan transisi dikelompokkan berdasarkan state sumber agar semua opsi keluaran dari setiap state dapat ditinjau bersama. Susunan ini membantu pemeliharaan teks sumber; susunan ini tidak menjamin letak setiap state oleh perender.

Coba contoh ini pada lebar catatan yang biasa Anda gunakan. Lalu hapus hanya baris direction LR dan bandingkan hasilnya. Pertahankan penyajian yang paling memudahkan Anda mengikuti percabangan dan jalur kembali. Diagram dari kiri ke kanan bisa memerlukan ruang horizontal yang lebih besar, jadi nilai hasilnya di panel catatan yang sebenarnya.

Persingkat label hanya sejauh maknanya tetap jelas. Dalam contoh sintetis ini, Stage B tidak memerlukan penjelasan tambahan. Dalam diagram Anda sendiri, pertahankan kata-kata yang membedakan dua state. Jika penjelasan panjang diperlukan, letakkan di paragraf prosa yang berdekatan dan pastikan ada pemetaan yang jelas ke pengenal state.

Pintasan apa yang dapat mengubah model?

Panah yang berulang dapat menggoda Anda untuk memperkenalkan simpul perantara bersama. Sebelum melakukannya, tanyakan apa yang diwakili simpul itu dan apakah transisi langsung yang asli tetap ada.

Simpul reset bersama mengubah jalur langsung

Dalam inventaris, B dan C masing-masing bertransisi langsung ke A saat reset. Mengganti panah tersebut dengan jalur melalui state baru bernama R akan membuat state perantara dan menghapus sisi langsung yang asli. Pembaca masih dapat menelusuri rute menuju A, tetapi diagram kini menjelaskan langkah yang berbeda.

Untuk mendapatkan hasil persis seperti dalam artikel ini, pertahankan kedua panah reset. Pengulangan itu mencatat dua kondisi awal yang valid untuk peristiwa yang sama. Mengurangi jejak visualnya hanya berguna jika maknanya tetap terjaga.

Pilihan atau percabangan memerlukan alasan dalam model

Mermaid mendokumentasikan <<choice>> untuk percabangan jalur dan <<fork>> serta <<join>> untuk struktur fork dan join. Keduanya adalah konstruksi diagram yang berbeda dalam referensi diagram state.

Jangan menambahkannya hanya untuk mengumpulkan beberapa panah yang berantakan ke persimpangan bersama. Dalam contoh ini, tugasnya adalah mempertahankan transisi langsung dari satu state ke state lain. Menambahkan konstruksi perantara memerlukan penjelasan tersendiri tentang hubungan jalurnya dengan model asli. Panah eksplisit membuat hubungan itu langsung terlihat.

State komposit memiliki batas yang terdokumentasi

Mermaid mendukung state komposit, tetapi dokumentasinya secara eksplisit melarang transisi antara state internal yang termasuk dalam state komposit berbeda. Lihat State komposit.

Jika pengelompokan simpul Anda menimbulkan situasi tersebut, biarkan state yang terhubung tetap datar untuk tugas ini. Memindahkan panah ke state komposit luar mengubah titik akhirnya; tindakan itu tidak otomatis setara. Gunakan hierarki jika hierarki tersebut mewakili struktur model yang sebenarnya dan Anda dapat menjelaskan perilaku masuk dan keluarnya.

Untuk contoh empat state ini, nesting tidak banyak membantu. Penyederhanaan yang berguna adalah menggunakan label lebih pendek dan penyajian yang lebih jelas sambil mempertahankan struktur transisi.

Verifikasi transisi dan hasil yang dirender

Lakukan dua pemeriksaan sebelum mengganti diagram asli. Pemeriksaan pertama mengecek model; pemeriksaan kedua mengecek apakah penyajian yang dipilih berguna.

  1. Bandingkan setiap baris inventaris dengan satu pernyataan transisi. Pastikan kedua titik ujung dan label lengkapnya cocok.
  2. Bandingkan kembali setiap pernyataan transisi dengan inventaris. Ini mendeteksi panah tambahan maupun yang hilang.
  3. Periksa titik awal dan akhir secara terpisah. Di sini, titik awal hanya menuju A, dan hanya D yang menuju titik akhir.
  4. Periksa diagram yang dirender untuk memastikan label terbaca dan kepala panah dapat dibedakan.
  5. Telusuri jalur kembali dari B dan C, karena jalur ini mudah terlewat saat hanya meninjau alur maju.

Untuk contoh ini, lakukan tiga pemeriksaan pembacaan: dari awal ke A, lalu C, kemudian D, lalu ke akhir; dari awal ke A, lalu B, kemudian reset ke A; dan dari awal ke A, lalu C, kemudian kembali ke B. Pemeriksaan ini mencakup rute alternatif, reset, dan koneksi balik. Pemeriksaan ini melengkapi perbandingan baris, bukan menggantikannya.

Perbandingan teks deterministik memastikan bahwa sembilan pernyataan transisi dalam contoh cocok dengan inventaris, termasuk labelnya. Contoh ini tidak dirender di aplikasi Obsidian yang terpasang selama persiapan, jadi jarak akhir dan perutean panahnya tetap perlu diperiksa dalam versi lokal Anda.

Jika catatan menampilkan kode secara literal, pastikan terlebih dahulu bahwa Anda melihatnya di Reading view dan pagar pembukanya bertuliskan mermaid. Jika muncul kesalahan penguraian setelah pengeditan, kembali ke contoh lengkap dan terapkan perubahan satu per satu. Jika hanya tata letaknya yang kurang nyaman, pertahankan transisinya sambil membandingkan panjang label, arah, dan lebar panel yang tersedia.

Pertahankan versi dengan label dan jalur yang paling mudah dibaca setelah lulus perbandingan inventaris. Penyederhanaan yang berhasil memungkinkan pembaca mengikuti transisi valid yang sama dengan lebih mudah, sementara sumbernya tetap mudah diperiksa dan dipelihara.

Sumber