{"id":2893,"date":"2026-10-16T10:43:10","date_gmt":"2026-10-16T02:43:10","guid":{"rendered":"https:\/\/updates.visual-paradigm.com\/id\/releases\/free-mermaid-use-case-diagram-editor\/"},"modified":"2026-10-16T10:43:10","modified_gmt":"2026-10-16T02:43:10","slug":"free-mermaid-use-case-diagram-editor","status":"publish","type":"releases","link":"https:\/\/updates.visual-paradigm.com\/id\/releases\/free-mermaid-use-case-diagram-editor\/","title":{"rendered":"Editor Diagram Use Case Gratis: Dukungan Mermaid di VPasCode"},"content":{"rendered":"

\"Diagram<\/p>\n

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

Sudah menggunakan Mermaid untuk dokumentasi teknis? Sekarang Anda dapat menggunakan VPasCode sebagaieditor diagram Mermaid<\/strong>untuk diagram use case, bersama dengan jenis diagram lain yang didukung. Jika Anda mencarieditor Diagram Use Case gratis<\/strong>untuk mengubah sintaks Mermaid menjadi diagram visual, coba dieditor VPasCode<\/a>.<\/p>\n

Apa yang baru: Diagram use case Mermaid<\/h2>\n

VPasCode sudah mendukung diagram use case yang ditulis dalam PlantUML. Dengan pembaruan ini, Anda juga dapat menuliskannya dalamusecase-beta<\/code> 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.<\/p>\n

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

\"Infografis<\/p>\n

Contoh: Diagram use case sistem ATM<\/h2>\n

Contoh di bawah ini menampilkan dua aktor dan fungsi ATM yang dapat mereka akses. Batas sistem mengelompokkan use case yang termasuk dalam Sistem ATM.<\/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 
usecase-beta\r\ndirection LR\r\nactor User(\"User\")\r\nactor Technician(\"Technician\")\r\nsystemBoundary \"ATM System\"\r\n  Withdraw(\"Withdraw Cash\")\r\n  Transfer(\"Transfer Cash\")\r\n  Deposit(\"Deposit Cash\")\r\n  SettleBills(\"Settle Bills\")\r\n  Repair(\"Repair ATM\")\r\nend\r\nUser --> Withdraw\r\nUser --> Transfer\r\nUser --> Deposit\r\nUser --> SettleBills\r\nTechnician --> Repair<\/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            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Mermaid di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Di sini,actor<\/code> mendeklarasikan orang-orang yang berinteraksi dengan sistem, dan setiap use case yang diberi nama merepresentasikan sebuah fungsi. KatasystemBoundary<\/code> mengelompokkan fungsi-fungsi tersebut di bawah Sistem ATM. Panah menunjukkan fungsi mana yang dapat diakses oleh setiap aktor, sedangkandirection LR<\/code> meminta tata letak dari kiri ke kanan.<\/p>\n
Mengapa menggunakan Mermaid untuk diagram use case?<\/h2>\n
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.<\/p>\n
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:<\/p>\n