<TinaMermaid>
Render code block diagram Mermaid jadi SVG. Auto-imported sama module-nya, tapi nggak disambungkan ke <TinaMarkdown> secara default. mermaid itu dependency yang besar, jadi sifatnya opt-in.
Props
| Prop | Tipe | Wajib | Deskripsi |
|---|---|---|---|
source | string | Iya | Teks source diagram mermaid-nya (isi mentah dari code block). |
Cara ngaktifinnya
npm install mermaid
<TinaMarkdown :content="post.body" :components="{ 'tina-mermaid': TinaMermaid }" />
mermaid-nya sendiri di-import secara dinamis cuma pas instance <TinaMermaid> beneran ke-mount, jadi nggak nambah bundle kalau nggak ada halaman yang render diagram mermaid. Tanpa prop components disambungkan ke <TinaMarkdown>, code block mermaid dirender sebagai kode biasa. <TinaMermaid> nggak pernah ke-mount sendirian.
Perilaku fallback
Kalau mermaid belum diinstall, komponennya nangkep import yang gagal dan render source diagram mentah di dalam block <pre> plus catatan singkat, bukan malah error.
Lihat Rich-Text Lanjutan buat cara nambahin tombol toolbar 'mermaid' ke field rich-text.