Memulai dengan Visual Paradigm VPasCode membutuhkan waktu kurang dari satu menit. Karena platform ini sepenuhnya berbasis cloud, Anda tidak perlu menginstal runtime Java, mengonfigurasi modul Node.js, atau mengunduh dependensi ekstensi IDE yang berat. Anda dapat beralih dari sintaks teks mentah menjadi diagram visual yang sangat akurat dalam tiga langkah sederhana saja.
Ikuti panduan cepat ini untuk membuat, menyesuaikan, dan berbagi aset Diagram-as-Code (DaC) pertama Anda.
Langkah 1: Buka Editor Langsung
Navigasikan browser Anda ke VPasCode Playground. Secara default, Anda akan disambut oleh antarmuka modern dengan dua panel:
- Panel Kiri (Editor Kode): Editor teks ringan dengan kinerja tinggi yang dilengkapi penyorotan sintaks otomatis, nomor baris, dan deteksi kesalahan aktif.
- Panel Kanan (Jendela Pratinjau Langsung): Pemroses diagram waktu nyata yang memperbarui tata letak visual Anda secara otomatis saat Anda mengetik atau mengubah representasi teks Anda.
Langkah 2: Pilih Mesin Anda dan Tempelkan Rancangan
VPasCode secara otomatis mengenali sintaks Anda. Untuk melihatnya berfungsi, bersihkan teks tempatkan di panel kiri dan salin-tempel salah satu contoh dasar berikut ke dalam editor:
Pilihan A: Diagram Alir Markdown (Sintaks Mermaid)
Jika Anda lebih suka tata letak diagram alir yang agil dan dari atas ke bawah, gunakan blok sederhana ini:
graph TD
A[Permintaan Klien] --> B{Gerbang API}
B --> |Token Sah| C[layanan Otorisasi]
B --> |Token Tidak Sah| D[Diakses Ditolak]
C --> E[(Database Pengguna)]
Pilihan B: Komponen Arsitektur Perangkat Lunak (Sintaks PlantUML)
Jika Anda ingin memetakan komponen sistem yang terstruktur dengan bingkai batas formal, gunakan blok ini:
@startuml
package "Lapisan Aplikasi" {
[Aplikasi Web] -kanan-> [Gerbang API]
}
database "Penyimpanan Data" {
[Gerbang API] --> [SQL Utama]
[Gerbang API] ..> [Cache Redis] : "Optimasi Baca"
}
@enduml
Saat Anda menempelkan kode, panel sebelah kanan akan segera mengompilasi teks Anda dan menampilkan diagram visual yang bersih dan rapi.
Langkah 3: Ekspor dan Bagikan Karya Anda
Begitu Anda puas dengan tata letak Anda, Anda dapat langsung mengekspor atau berbagi dokumen Anda menggunakan bilah kontrol workspace yang terletak di bagian atas antarmuka:
- Salin URL yang Dapat Dibagikan:Klik tombol Bagikan tombol untuk membuat tautan instan. VPasCode menggunakan serialisasi status tanpa basis data, yang berarti seluruh teks diagram Anda dikompres secara aman langsung ke hash URL. Siapa pun yang mengklik tautan Anda dapat melihat dan mengedit model kode yang persis secara instan.
- Unduh Vektor Beresolusi Tinggi (SVG):Klik tombol Ekspor SVG tombol untuk mengunduh aset vektor yang dapat diskalakan. Ini sangat cocok untuk penyemat yang bersih di dalam repositori Git, wiki tim, atau file dokumentasi markdown teknis internal.
- Unduh Gambar Statis (PNG):Klik Ekspor PNG untuk mendapatkan tampilan tangkapan beresolusi tinggi yang siap dijadikan langsung ke Slack, Microsoft Teams, atau presentasi desain.
Sekarang Anda telah merender aset pertama Anda, jelajahi bagian-bagian berikutnya dari Dokumentasi kami untuk menguasai metode desain individu Panduan PlantUML, Panduan Mermaid, dan Panduan Graphviz metodologi desain!