Diagram Venn menunjukkan hubungan logis antara berbagai himpunan atau kelompok data menggunakan lingkaran yang tumpang tindih. Pendekatan berbasis teks ini memungkinkan Anda dengan cepat menggambarkan konsep-konsep yang berada di persimpangan beberapa kategori tanpa harus bersusah payah dengan alat desain grafis manual.
Struktur Sintaks Dasar
Setiap diagram Venn dimulai dengan venn-beta deklarasi, diikuti dengan mendefinisikan kelompok individu menggunakan set kata kunci. Kemudian Anda mendefinisikan bagaimana kelompok-kelompok tersebut tumpang tindih menggunakan union kata kunci.
venn-beta
set GroupA ["Label A"]
set GroupB ["Label B"]
union GroupA, GroupB ["Label Irisan"]
Referensi Sintaks
Tabel di bawah ini menjelaskan elemen-elemen utama yang digunakan untuk membuat diagram Venn di Mermaid.js.
| Komponen | Deskripsi | Contoh Sintaks |
|---|---|---|
| Deklarasi | Menginisialisasi renderer diagram Venn (saat ini dalam tahap beta). | venn-beta |
| Set | Mendefinisikan kategori data mandiri atau lingkaran. Selalu sediakan identifikasi dan label tampilan. | set A ["Tim Pemasaran"] |
| Union | Mendefinisikan area tumpang tindih antara dua atau lebih set. Pisahkan identifikasi dengan koma. | union A,B ["Tujuan Bersama"] |
| Pengubah Ukuran | Sebuah opsi :Nsufiks yang menyesuaikan ukuran lingkaran atau irisan secara relatif. |
set A ["Kelompok Besar"]:15 |
| Node Teks | Blok yang dimasukkan secara inden digunakan untuk mendaftar poin-poin tertentu langsung di dalam set atau area irisan. | text ItemId ["Bullet Khusus"] |
Rencana Kerja Dunia Nyata: Analisis Peluang Produk
Rencana kerja ini menunjukkan kerangka strategi pengembangan produk klasik yang memetakan titik-titik kesulitan pengguna, tujuan bisnis, dan kelayakan teknis untuk menentukan rilis fitur yang ideal.
venn-beta
set KebutuhanPengguna ["Titik Kesulitan Pengguna"]
set TujuanBisnis ["Nilai Bisnis"]
set KemampuanTeknis ["Kemampuan Teknis"]
union KebutuhanPengguna, TujuanBisnis ["Kemenangan Strategis"]
union KebutuhanPengguna, KemampuanTeknis ["Fitur yang Tidak Dikomersialkan"]
union TujuanBisnis, KemampuanTeknis ["Otomasi Internal"]
union KebutuhanPengguna, TujuanBisnis, KemampuanTeknis ["Titik Manis Produk"]
Kiat Sintaks:Ketika menggunakan tiga atau lebih kategori, Mermaid secara otomatis memetakan irisan bersarang untuk Anda. Cukup deklarasikan 3 cara terakhiruniondengan ketiga identifikasi dipisahkan oleh koma, dan mesin akan menempatkan label secara sempurna di tengah tumpang tindih.
Konsep Lanjutan: Titik-Titik Bullet & Penyesuaian Ukuran
Untuk dokumentasi teknis yang lebih lanjut, Anda dapat menyisipkan titik-titik teks khusus langsung ke dalam lingkaran Anda dan menyesuaikan skala lingkaran untuk merepresentasikan proporsi nyata (seperti ukuran basis data atau jumlah anggota tim).
venn-beta
set Depan ["Frontend"]:10
text F1 ["React"]
text F2 ["CSS"]
set Belakang ["Backend"]:15
text B1 ["Node.js"]
text B2 ["PostgreSQL"]
union Depan, Belakang ["Full-Stack"]:3
text FB1 ["Spesifikasi OpenAPI"]
text FB2 ["SSR Next.js"]
style Depan fill:#E8F4FD, stroke:#0072B1
style Belakang fill:#FDF0E8, stroke:#E06000
Kesalahan Umum Sintaks
Diagram Venn baru saja diperkenalkan ke inti sintaks Mermaid. Ingat tiga aturan desain struktural ini agar grafik Anda tampil dengan lancar:
- Utamakan Urutan:Anda harus sepenuhnya mendeklarasikan baris
setsebelum merujuknya dalam blokunionblok. Merujuk pada identifikasi yang belum secara eksplisit dibuat akan mengganggu proses pembuatan. - Perhatikan Koma Union: Saat membangun sebuah
uniondari beberapa himpunan, pastikan ada koma yang memisahkan pengenal Anda, tetapi tidak ada koma yang mengikuti tepat sebelum label kurung.union A, B, C ["Label"]adalah benar. - Stabilitas Versi Beta: Karena gaya tata letak ini menggunakan flag
venn-betaflag, aturan kustomisasi elemen lanjutan dapat berubah di antar versi. Tetap gunakan kode warna heksadesimal dasar untuk variabelisidangaris tepiuntuk kompatibilitas lintas maksimal.