VPasCode adalah ruang kerja berbasis browser untuk membuat dan melihat diagram dari kode berbasis teks. Alat ini mendukung bahasa diagram termasuk PlantUML, Mermaid, Graphviz, dan D2, serta menggabungkan pengeditan kode, rendering langsung, dan alat bantuan AI dalam satu tempat. Anda menulis atau menghasilkan skrip diagram, dan VPasCode merendernya sebagai diagram visual.
1. Mulai sebuah diagram
-
Buka VPasCode di browser web Anda.
-
Mulai dengan editor kosong, atau tempelkan skrip diagram yang sudah ada.
-
Untuk PlantUML, sertakan
@startumldan@endumlpenanda. VPasCode dapat mendeteksi sintaks PlantUML dan mengaktifkan renderer yang sesuai. -
Periksa diagram yang telah dirender saat Anda bekerja.
2. Hasilkan diagram dengan AI
Gunakan asisten AI untuk mengubah deskripsi dalam bahasa biasa menjadi kode diagram. Berikan spesifikasi yang jelas mengenai elemen dan hubungan yang ingin Anda sertakan.
Sebagai contoh, Anda dapat bertanya:
Buat diagram urutan untuk autentikasi login pengguna, termasuk pengguna, aplikasi web, layanan autentikasi, dan basis data.
Tinjau kode yang dihasilkan dan output yang dirender. Perbaiki permintaan jika ada peserta, langkah, atau hubungan penting yang terlewat.
3. Sempurnakan kode yang sudah ada
Daripada memulai dari awal, gunakan instruksi dalam bahasa biasa untuk memodifikasi diagram yang sudah Anda miliki. Jelaskan perubahan yang Anda inginkan dan di mana perubahan tersebut harus ditempatkan.
Sebagai contoh:
Tambahkan pemeriksaan gerbang pembayaran segera setelah langkah pengiriman pesanan.
Kemudian tinjau kode dan diagram yang telah diperbarui untuk memastikan perubahan tersebut sesuai dengan alur kerja yang dimaksud.
4. Perbaiki kesalahan
Jika diagram tidak dirender sebagaimana mestinya, gunakan alat Perbaikan Kesalahan Kode AI untuk membantu mendiagnosis dan memperbaiki masalah sintaks. Alat ini dapat mengidentifikasi masalah seperti salah ketik, kurung yang hilang, atau token yang tidak sejajar, melakukan perbaikan, dan menjelaskan apa yang salah.
Setelah menerapkan perbaikan, periksa baik kode maupun diagram yang dirender untuk memastikan hasilnya benar.
5. Terjemahkan teks diagram
Gunakan alat Terjemahan Diagram AI untuk menerjemahkan teks dalam diagram, seperti label, properti kelas, dan deskripsi pesan. Hal ini dapat membantu mempersiapkan diagram untuk tim internasional.
Tinjau istilah yang diterjemahkan dalam konteksnya, terutama kosakata teknis dan nama yang seharusnya tidak diubah.
6. Terapkan tema
Pilih tema di editor untuk menyesuaikan gaya visual diagram. Opsi yang tersedia termasuk tema Klasik Visual Paradigm dan alternatif klasik lainnya. Pengaturan tema dapat menerapkan parameter kulit yang sesuai untuk Anda.
Periksa hasilnya terkait keterbacaan dan konsistensi sebelum mengekspor.
7. Ekspor dan bagikan
Pilih format ekspor yang sesuai dengan cara diagram akan digunakan:
| Format | Berguna untuk |
|---|---|
| SVG | Dokumentasi web yang dapat diskalakan dan wiki teknis |
| PNG | Aplikasi obrolan, pelacak bug, dan presentasi |
| Dokumen formal dan pencetakan |
Untuk membagikan diagram, gunakan URL langsung atau kode QR yang dihasilkan oleh platform.
Alur kerja praktis
-
Deskripsikan sistem, proses, atau arsitektur yang ingin Anda modelkan.
-
Buat kode diagram awal dengan AI, atau tempel skrip yang sudah ada.
-
Tinjau rendering langsung dan perhalus diagram dengan instruksi yang ditargetkan.
-
Gunakan perbaikan kesalahan jika masalah sintaks mencegah rendering.
-
Terjemahkan label atau terapkan tema jika diperlukan.
-
Ekspor dalam format yang sesuai dengan dokumentasi atau presentasi Anda.
-
Bagikan diagram menggunakan URL atau kode QR-nya.
