🚀 Visual Paradigm dengan senang hati mengumumkan bahwa VPasCode – platform diagram-as-code terpadu kami – kini mendukung empat jenis diagram Mermaid tambahan. Anda kini dapat membuat diagram profesional berikut menggunakan notasi teks sederhana:
- 🐟 Diagram Ishikawa (Ikan / Sebab-Akibat) – Analisis akar masalah menjadi lebih mudah
- ⚡ Diagram Pemodelan Acara – Desain alur informasi sistem dan timeline
- 🟡 Diagram Venn – Visualisasikan hubungan dan perpotongan himpunan
- 🗺️ Peta Wardley – Pemetaan rantai nilai strategis dan analisis evolusi
Apakah Anda seorang manajer produk, arsitek perangkat lunak, pengembang, atau strategis, VPasCode membantu Anda membuat diagram menggunakan sintaks yang sudah Anda kuasai, dengan pratinjau real-time, berbagi URL satu klik, dan ekspor SVG/PNG gratis.
🔍 Apa yang Membuat VPasCode Berbeda?
VPasCode (singkatan dari Visual Paradigm’s asCode platform) adalah lingkungan teks-ke-diagram terpadu. Ini menghasilkan PlantUML, Mermaid, Graphviz, dan lainnya (dengan format tambahan yang akan datang). Anda dapat dengan bebas beralih antar sintaks dalam editor yang sama, tanpa perlu mempelajari banyak alat.
Peningkatan ini berfokus pada sintaks terbaru Mermaid (v11.12.3+ dan v11.15.0+). Di bawah ini Anda akan menemukan contoh kode yang berfungsi untuk setiap jenis diagram baru – cukup salin dan tempelkan ke VPasCode.
📌 1. Diagram Ishikawa (Tulang Ikan) – Analisis Akar Masalah
Juga dikenal sebagai diagram sebab-akibat atau diagram tulang ikan. Sempurna untuk manajemen kualitas dan sesi pemecahan masalah.
✅ Contoh – Analisis Akar Masalah “Foto Buram”
ishikawa-beta
Foto Buram
Proses
Tidak fokus
Kecepatan rana terlalu lambat
Film pelindung tidak dilepas
Filter penataan diterapkan
Pengguna
Tangan gemetar
Perangkat
LENS
Lensa tidak sesuai
Lensa rusak
Lensa kotor
SENSOR
Sensor rusak
Sensor kotor
Lingkungan
Subjek bergerak terlalu cepat
Terlalu gelap
💡 Catatan sintaks: Baris pertama menentukan masalah (kepala ikan). Pengindenan menciptakan cabang penyebab hierarkis (tulang ikan).
📌 2. Diagram Pemodelan Acara – Perilaku Sistem seiring Waktu
Pemodelan Acara menggambarkan bagaimana informasi berubah dalam suatu sistem seiring waktu. Ini menggunakan UI, perintah, acara, dan pemroses yang diatur dalam alur renang. VPasCode mendukung sintaks padat dan santai, data dalam baris, serta blok data eksternal.
✅ Contoh Minimal – Alur Tambah Item Keranjang Belanja
eventmodeling
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded
✅ Contoh Data dalam Baris
eventmodeling
tf 01 ui CartUI
tf 02 cmd AddItem { deskripsi: string }
tf 03 evt ItemAdded { deskripsi: string }
✅ Blok Data & Referensi Ganda
eventmodeling
tf 01 ui CartUI
tf 02 cmd AddItem [[AddItem01]]
tf 03 evt ItemAdded [[ItemAdded]]
tf 04 cmd AddItem [[AddItem02]]
tf 05 evt ItemAdded [[ItemAdded]]
data AddItem01 {
deskripsi: 'john'
gambar: 'avatar_john'
harga: 20.4
}
data AddItem02 {
deskripsi: 'jack'
gambar: 'avatar_jack'
harga: 12.5
}
data ItemAdded {
deskripsi: string
gambar: string
harga: number
}
✅ Atur Ulang Bingkai
pemodelan peristiwa
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded
rf 04 evt External.InventoryChanged
tf 05 pcr InventoryProcessor
tf 06 cmd ChangeInventory
tf 07 evt Cart.InventoryChanged
💡 Token kunci: tf (kerangka waktu), rf (kerangka ulang), ui / cmd / evt / pcr / rmo (tipe entitas). Gunakan namespace seperti Inventory.InventoryChanged untuk membuat jalur renang terpisah.
📌 3. Diagram Venn – Hubungan dan Irisan Himpunan
Tampilkan hubungan logis antar himpunan menggunakan lingkaran yang tumpang tindih. Mendukung ukuran kustom, label, simpul teks, dan gaya.
✅ Contoh Dasar – Tumpang tindih Tim
venn-beta
title "Tumpang tindih Keterampilan Tim"
set Frontend
set Backend
union Frontend,Backend["Desain API"]
✅ Contoh Ukuran, Simpul Teks & Gaya
venn-beta
set A["Tim Frontend"]:20
text A1["React"]
text A2["Sistem Desain"]
set B["Tim Backend"]:12
text B1["Pengembangan API"]
union A,B["Keterampilan Full-stack"]:3
text AB1["Spesifikasi OpenAPI"]
style A fill:#ff6b6b
style A,B color:#2c3e50
style A1 color:#e74c3c
💡 Gunakan :number untuk mengatur ukuran lingkaran, text untuk menambahkan label di dalam himpunan, dan style untuk warna kustom.
📌 4. Peta Wardley – Pemetaan Rantai Nilai Strategis
Peta Wardley membantu Anda memvisualisasikan komponen-komponen bisnis atau sistem, posisi mereka dalam rantai nilai, serta tahap evolusi mereka (Genesis → Dibuat Khusus → Produk → Komoditas). VPasCode mendukung sepenuhnya sintaks resmi Mermaid Wardley menggunakan wardley-beta sebagai jenis diagram.
✅ Contoh – Pipeline Pengembangan Perangkat Lunak
wardley-beta
title Pipeline Penyebaran Perangkat Lunak
anchor "Kebutuhan Pengguna" [0.95, 0.70]
component "Penyebaran Manual" [0.15, 0.25]
component "Skrip CI/CD" [0.45, 0.50]
component "Pipeline Otomatis" [0.75, 0.65]
component "Infrastruktur Cloud" [0.30, 0.40]
"Kebutuhan Pengguna" -> "Pipeline Otomatis"
"Pipeline Otomatis" -> "Skrip CI/CD"
"Skrip CI/CD" -> "Penyebaran Manual"
"Penyebaran Manual" -> "Infrastruktur Cloud"
evolve "Penyebaran Manual" 0.20
evolve "Skrip CI/CD" 0.55
evolve "Pipeline Otomatis" 0.85
evolve "Infrastruktur Cloud" 0.70
note "Adopsi Cloud mempercepat kematangan pipeline" [0.40, 0.35]
💡 Nama komponen yang mengandung spasi harus dibungkus dengan tanda kutip ganda. Koordinat berkisar dari 0 hingga 1 pada kedua sumbu (visibilitas vs. evolusi).
🛠️ Coba VPasCode Sekarang Juga
Buka ke VPasCode editor: https://www.vpascode.com/.
Pilih mode sintaks Mermaid, tempel salah satu contoh kode di atas, dan saksikan diagram Anda dirender secara instan.
Mulai gratis – Tidak perlu kartu kredit, tidak perlu instalasi. Yang Anda butuhkan hanyalah peramban.
📖 Dokumentasi Resmi & Referensi
Visual Paradigm – Pemodelan Profesional, Disederhanakan.
VPasCode adalah platform diagram-as-code untuk tim yang menghargai efisiensi, kolaborasi, dan pemetaan berbasis teks.