{"id":2282,"date":"2026-06-20T02:33:55","date_gmt":"2026-06-20T02:33:55","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart\/"},"modified":"2026-06-20T02:33:55","modified_gmt":"2026-06-20T02:33:55","slug":"your-first-diagram-in-vpascode-a-5-minute-quickstart","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/id\/your-first-diagram-in-vpascode-a-5-minute-quickstart\/","title":{"rendered":"Diagram Pertama Anda di VPasCode \u2013 Panduan Cepat 5 Menit"},"content":{"rendered":"
\n

VPasCode adalah alat diagram-sebagai-kode yang intuitif dan platform terpadu teks ke diagram<\/a> platform yang memungkinkan Anda membuat diagram menggunakan format populer seperti PlantUML, Mermaid, dan Graphviz. Dengan kemampuan AI bawaan yang terintegrasi, Anda sekarang dapat menghasilkan visual secara instan dari bahasa alami.<\/p>\n<\/header>\n

\n

Apa itu VPasCode?<\/h2>\n

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.<\/p>\n

Bagian terbaiknya? Anda dapat mulai membuat diagram segera di www.vpascode.com<\/a> \u2013 tidak diperlukan pendaftaran untuk fitur dasar. Untuk gambaran lengkap tentang fitur AI bawaan terbaru, lihat Pengumuman Pembaruan Besar VPasCode<\/a>.<\/p>\n<\/section>\n

\n

Langkah 1: Akses VPasCode<\/h2>\n

Buka www.vpascode.com<\/a> 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.
\n<\/p>\n

\"VPasCode
Antarmuka intuitif VPasCode dengan pengeditan kode berdampingan dan pratinjau waktu nyata<\/figcaption><\/figure>\n

Perintah Gambar:<\/strong> 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<\/p>\n<\/section>\n

\n

Langkah 2: Buat Diagram Anda (Melalui Perintah AI atau Kode)<\/h2>\n

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.<\/p>\n

Opsi A: Hasilkan Secara Instan dengan AI Bawaan<\/h3>\n

Alih-alih memulai dari awal, Anda dapat mengetikkan perintah dalam bahasa alami langsung di dalam antarmuka aplikasi. Misalnya, coba masukkan:<\/p>\n

\u201cBuat diagram kasus penggunaan dalam PlantUML untuk sistem ATM\u201d<\/p><\/blockquote>\n

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<\/a>.<\/p>\n

Opsi B: Tulis Kode Bagan Alir Secara Manual<\/h3>\n

Sebagai alternatif, Anda dapat menulis atau menempelkan kode secara manual. Hapus editor dan gunakan contoh bagan alir Mermaid sederhana ini:<\/p>\n

\n
\nMermaid<\/span>\n\n<\/path><\/path><\/svg>\nEdit Mermaid di VPasCode<\/span>\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
graph TD\n    A[Start] --> B{Apakah ini berfungsi?}\n    B -->|Ya| C[Terbaik!]\n    B -->|Tidak| D[Debug]\n    D --> B\n    C --> E[Selesai]<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nEdit Mermaid di VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
Sintaks Mermaid ini membuat diagram alur keputusan dasar. Berikut artinya:<\/p>\n