
Diagram use case membantu tim menjelaskan bagaimana manusia dan sistem eksternal berinteraksi dengan fungsi yang disediakan oleh suatu sistem. Sekarang Anda dapat membuat diagram tersebut di Mermaid dan melihat pratinjau di VPasCode. Kemampuan baru ini memperluas dukungan diagram-sebagai-kode di VPasCode dan memberikan cara lain untuk mendeskripsikan perilaku sistem menggunakan teks, bukan menggambar setiap elemen secara manual.
Sudah menggunakan Mermaid untuk dokumentasi teknis? Sekarang Anda dapat menggunakan VPasCode sebagaieditor diagram Mermaiduntuk diagram use case, bersama dengan jenis diagram lain yang didukung. Jika Anda mencarieditor Diagram Use Case gratisuntuk mengubah sintaks Mermaid menjadi diagram visual, coba dieditor VPasCode.
Apa yang baru: Diagram use case Mermaid
VPasCode sudah mendukung diagram use case yang ditulis dalam PlantUML. Dengan pembaruan ini, Anda juga dapat menuliskannya dalamusecase-beta sintaks, yang tersedia di Mermaid 12.0.0 dan versi selanjutnya. Sintaks ini merepresentasikan aktor, use case, batas sistem, serta hubungan antara aktor dan use case.
Penambahan ini memudahkan Anda untuk menjaga model use case dalam alur kerja berbasis teks yang sama dengan diagram Mermaid lainnya. Edit sumbernya, render pratinjau, dan perbarui diagram sesuai perubahan kebutuhan Anda.

Contoh: Diagram use case sistem ATM
Contoh di bawah ini menampilkan dua aktor dan fungsi ATM yang dapat mereka akses. Batas sistem mengelompokkan use case yang termasuk dalam Sistem ATM.
usecase-beta
direction LR
actor User("User")
actor Technician("Technician")
systemBoundary "ATM System"
Withdraw("Withdraw Cash")
Transfer("Transfer Cash")
Deposit("Deposit Cash")
SettleBills("Settle Bills")
Repair("Repair ATM")
end
User --> Withdraw
User --> Transfer
User --> Deposit
User --> SettleBills
Technician --> Repair Di sini,actor mendeklarasikan orang-orang yang berinteraksi dengan sistem, dan setiap use case yang diberi nama merepresentasikan sebuah fungsi. KatasystemBoundary mengelompokkan fungsi-fungsi tersebut di bawah Sistem ATM. Panah menunjukkan fungsi mana yang dapat diakses oleh setiap aktor, sedangkandirection LR meminta tata letak dari kiri ke kanan.
Mengapa menggunakan Mermaid untuk diagram use case?
Diagram berbasis teks dapat menjadi praktis ketika Anda menginginkan model yang mudah direvisi bersamaan dengan persyaratan, dokumentasi, atau kode. Alih-alih memindahkan bentuk secara manual, Anda dapat mengubah label, menambahkan aktor, atau memperbarui hubungan dalam sumbernya. Hal ini membuat Mermaid berguna untuk diskusi desain awal serta untuk menjaga diagram tetap mutakhir seiring evolusi sistem.
Diagram kasus penggunaan dapat membantu manajer produk, analis bisnis, pengembang, arsitek, dan pemangku kepentingan membangun gambaran bersama tentang ruang lingkup sistem. Diagram ini dapat memudahkan diskusi mengenai pertanyaan seperti:
- Siapa yang berinteraksi dengan sistem?
- Fungsi apa yang disediakan oleh sistem?
- Fungsi mana yang tersedia untuk setiap aktor?
- Di mana ruang lingkup sistem dimulai dan berakhir?
VPasCode: editor diagram-sebagai-kode di browser Anda
VPasCode adalah platform diagram-sebagai-kode online untuk pengembang, arsitek, dan tim teknis. Platform ini mengubah bahasa diagram berbasis teks yang didukung dan data terstruktur menjadi diagram visual, semuanya dalam satu editor dan pratinjau langsung. VPasCode dirancang agar mudah berpindah antara sumber diagram dan hasil yang dirender.
Untuk memulai, tempel atau tulis kode diagram Anda di editor. VPasCode secara otomatis mendeteksi format yang didukung, sehingga Anda tidak perlu memilih bahasa secara manual. Saat Anda mengedit, pratinjau diperbarui secara real-time, membantu Anda mengidentifikasi perubahan dan menyempurnakan diagram Anda.
Selain Mermaid, VPasCode mendukung PlantUML dan format diagram serta visualisasi lainnya, termasuk D2, Graphviz, Markmap, dan ECharts. Platform ini juga bekerja dengan format data terstruktur dan bahasa pemrograman. Hal ini menjadikannya berguna sebagai satu ruang kerja tunggal bagi tim yang mendokumentasikan sistem dalam lebih dari satu notasi.
Lebih dari sekadar pratinjau langsung
VPasCode menyertakan alat praktis untuk bekerja dengan diagram setelah dirender:
- Bagikan diagram:Buat URL yang dapat dibagikan, hasilkan kode QR, atau bagikan melalui saluran media sosial yang didukung.
- Ekspor gambar:Unduh diagram sebagai SVG atau PNG untuk dokumentasi, presentasi, dan materi lainnya.
- Perbaiki sintaks dengan AI:Dengan akses ke fitur premium yang berlaku, gunakan “Perbaiki oleh AI” untuk memperbaiki kesalahan sintaks dan meninjau perbedaan kode serta penjelasan perubahan.
- Terjemahkan label diagram:Fitur AI premium dapat menerjemahkan teks diagram ke bahasa lain langsung di dalam editor.
- Kirim diagram ke OpenDocs:Dengan akses premium yang berlaku, kirim diagram ke Visual Paradigm OpenDocs untuk digunakan dalam dokumentasi teknis.
Pengeditan inti, perenderan langsung, ekspor gambar, dan berbagi dapat digunakan secara gratis. Fitur AI dan integrasi OpenDocs tersedia melalui paket Visual Paradigm yang memenuhi syarat. Untuk informasi lebih lanjut tentang platform ini, kunjungi Ikhtisar fitur VPasCode.
Coba diagram kasus penggunaan Mermaid di VPasCode
Apakah Anda memetakan layanan ATM, mendeskripsikan proses checkout online, atau mendokumentasikan aktor dan kemampuan produk perangkat lunak, VPasCode memberikan tempat yang nyaman untuk menulis dan melihat pratinjau diagram Anda. Gunakan sebagai editor diagram kasus penggunaan gratisuntuk sintaks Mermaid yang didukung, atau sebagai editor diagram Mermaiduntuk alur kerja diagram-sebagai-kode yang lebih luas.
Buka VPasCode dan buat diagram kasus penggunaan Mermaid. Untuk mempelajari lebih lanjut tentang format dan kemampuan yang didukung, lihat Ikhtisar VPasCode.











