Diagram Pertama Anda di VPasCode – Panduan Cepat 5 Menit

Apa itu VPasCode?

VPasCode (platform diagram-sebagai-kode dari Visual Paradigm) adalah platform terpadu teks-ke-diagram yang memungkinkan Anda membuat diagram menggunakan format populer seperti PlantUML, Mermaid, dan Graphviz. Baik Anda mendokumentasikan arsitektur perangkat lunak, merencanakan proyek, atau memvisualisasikan aliran data, VPasCode menyediakan editor kode gratis, renderer waktu nyata, dan AI terintegrasi untuk mewujudkan ide Anda.

Bagian terbaiknya? Anda dapat mulai membuat diagram segera di www.vpascode.com – tidak diperlukan pendaftaran untuk fitur dasar. Untuk gambaran lengkap tentang fitur AI bawaan terbaru, lihat Pengumuman Pembaruan Besar VPasCode.

Langkah 1: Akses VPasCode

Buka www.vpascode.com di browser web Anda. Anda akan melihat antarmuka yang bersih dengan editor kode di sebelah kiri dan panel pratinjau langsung di sebelah kanan. Platform dimuat secara instan dengan diagram sampel untuk membantu Anda memahami sintaks.

Perintah Gambar: Tangkapan layar antarmuka web VPasCode yang menampilkan tata letak layar terbagi dengan editor kode di sebelah kiri menampilkan sintaks Mermaid dan bagan alir yang dirender di sebelah kanan, antarmuka modern yang bersih dengan bilah alat di bagian atas

Langkah 2: Buat Diagram Anda (Melalui Perintah AI atau Kode)

VPasCode berfungsi sebagai alat diagram-sebagai-kode yang serbaguna yang mendukung berbagai format. Anda memiliki dua cara utama untuk membuat diagram: menulis kode secara manual atau menghasilkannya secara instan menggunakan AI tersemat.

Opsi A: Hasilkan Secara Instan dengan AI Bawaan

Alih-alih memulai dari awal, Anda dapat mengetikkan perintah dalam bahasa alami langsung di dalam antarmuka aplikasi. Misalnya, coba masukkan:

“Buat diagram kasus penggunaan dalam PlantUML untuk sistem ATM”

VPasCode akan secara instan membuat diagram secara native untuk Anda dalam hitungan detik. Untuk melihat alur kerja ini dalam aksi, tonton video panduan kami: Buat & Edit Diagram dengan Cepat Menggunakan AI di YouTube.

Opsi B: Tulis Kode Bagan Alir Secara Manual

Sebagai alternatif, Anda dapat menulis atau menempelkan kode secara manual. Hapus editor dan gunakan contoh bagan alir Mermaid sederhana ini:

graph TD
    A[Start] --> B{Apakah ini berfungsi?}
    B -->|Ya| C[Terbaik!]
    B -->|Tidak| D[Debug]
    D --> B
    C --> E[Selesai]

Sintaks Mermaid ini membuat diagram alur keputusan dasar. Berikut artinya:

• graph TD – Membuat grafik dari atas ke bawah
• A[Start] – Mendefinisikan simpul berlabel “Start”
• --> – Membuat koneksi panah
• B{Apakah ini berfungsi?} – Membuat berlian keputusan
• |Ya| dan |Tidak| – Label untuk jalur keputusan

Perintah Gambar:Tampilan dekat editor VPasCode yang menampilkan kode diagram alur Mermaid dengan penyorotan sintaks, kursor berada di area kode, dan font monospace yang bersih

Langkah 3: Lihat Pratinjau Waktu Nyata

Saat Anda mengetik atau memberikan perintah, alat diagram-sebagai-kode ini secara instan merender visual Anda di sisi kanan. Tidak perlu mengklik “kompilasi” atau “segarkan” – mesin teks ke diagram waktu nyata memperbarui secara otomatis.

Langkah 4: Ekspor dan Bagikan Diagram Anda

Setelah Anda puas dengan diagram Anda, Anda memiliki beberapa pilihan:

Ekspor sebagai Gambar

Klik tombol “Ekspor” dan pilih format yang Anda inginkan:

• SVG – Format vektor yang sempurna untuk presentasi dan dokumentasi (dapat diskalakan tanpa kehilangan kualitas)
• PNG – Format gambar raster yang kompatibel dengan semua aplikasi

Bagikan melalui URL

VPasCode menghasilkan URL unik untuk diagram Anda. Cukup salin tautan dari bilah alamat browser Anda dan bagikan dengan rekan kerja. Siapa pun yang memiliki tautan tersebut dapat melihat diagram Anda – tidak memerlukan akun.

Bonus: Manfaatkan Kemampuan AI Terintegrasi dalam Aplikasi

VPasCode memiliki integrasi AI yang tertanam secara mendalam. Selain menghasilkan diagram lengkap dari perintah teks seperti “Buat diagram kasus penggunaan dalam PlantUML untuk sistem ATM”, juga mencakup Perbaikan kesalahan berbasis AI. Ketika parser mendeteksi kesalahan sintaks, cukup klik tombol “Perbaiki oleh AI” untuk memperbaiki kode Anda dan menerima penjelasan yang bermanfaat.

AI memahami sintaks PlantUML, Mermaid, dan Graphviz secara mendalam, memberikan dukungan tanpa hambatan baik Anda membuat permintaan dari awal atau men-debug kode.

Apa Selanjutnya?

Anda baru saja menjelajahi dasar-dasar VPasCode! Berikut beberapa ide untuk melanjutkan perjalanan Anda:

• Jelajahi berbagai jenis diagram – Cobalah membuat diagram urutan, diagram kelas, atau model C4 menggunakan permintaan dalam bahasa alami
• Eksperimen dengan format lain – Beralih antara Mermaid, PlantUML, dan Graphviz dengan mulus
• Gunakan terjemahan AI – Terjemahkan diagram Anda label ke dalam bahasa yang berbeda dengan bantuan AI
• Integrasikan dengan dokumentasi – Kirim diagram Anda ke Visual Paradigm OpenDocs untuk dokumentasi yang komprehensif

Ingat, semua fitur inti – pengeditan diagram, rendering langsung, dan ekspor – sepenuhnya gratis. Fitur AI tingkat lanjut tersedia dengan Visual Paradigm Online Combo Edition atau Visual Paradigm Desktop Professional Edition dengan pemeliharaan aktif.