{"id":12322,"date":"2026-09-16T17:29:24","date_gmt":"2026-09-16T09:29:24","guid":{"rendered":"https:\/\/www.cybermedian.com\/id\/plantuml-use-case-diagram-guide\/"},"modified":"2026-09-22T18:15:28","modified_gmt":"2026-09-22T10:15:28","slug":"plantuml-use-case-diagram-guide","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/id\/plantuml-use-case-diagram-guide\/","title":{"rendered":"Panduan Diagram Use Case PlantUML"},"content":{"rendered":"

Pendahuluan<\/span><\/h2>\n

Gunakan<\/span> kasus<\/span> diagram<\/span> menyediakan<\/span> sebuah<\/span> jelas<\/span> cara<\/span> untuk<\/span> mendeskripsikan<\/span> bagaimana<\/span> pengguna,<\/span> eksternal<\/span> sistem,<\/span> dan<\/span> lain<\/span> aktor<\/span> berinteraksi<\/span> dengan<\/span> sebuah<\/span> perangkat lunak<\/span> sistem.<\/span> Mereka<\/span> membantu<\/span> tim<\/span> mendefinisikan<\/span> sistem<\/span> ruang lingkup,<\/span> mengidentifikasi<\/span> fungsional<\/span> persyaratan,<\/span> dan<\/span> komunikasikan<\/span> yang diharapkan<\/span> perilaku<\/span> sebelum<\/span> implementasi<\/span> dimulai.<\/span><\/p>\n

PlantUML<\/span> membuat<\/span> penggunaan<\/span> kasus<\/span> pemodelan<\/span> praktis<\/span> melalui<\/span> sebuah<\/span> berbasis teks<\/span> sintaks<\/span> yang<\/span> dapat<\/span> disimpan,<\/span> disimpan,<\/span> ditinjau,<\/span> diversi,<\/span> dan<\/span> dibuat ulang<\/span> bersama<\/span> proyek<\/span> dokumentasi<\/span> atau<\/span> sumber<\/span> kode.<\/span> Dengan<\/span> beberapa<\/span> beberapa<\/span> perintah,<\/span> Anda<\/span> dapat<\/span> mendefinisikan<\/span> aktor,<\/span> gunakan<\/span> kasus,<\/span> sistem<\/span> batas,<\/span> asosiasi,<\/span> <<include>><\/code> relasi,<\/span> <<extend>><\/code> relasi,<\/span> generalisasi,<\/span> catatan,<\/span> dan<\/span> tata letak<\/span> preferensi.<\/span><\/p>\n

Panduan ini<\/span> panduan ini<\/span> menjelaskan<\/span> kunci<\/span> utama<\/span> PlantUML<\/span> gunakan<\/span> kasus<\/span> notasi<\/span> ditampilkan<\/span> di<\/span> lembar<\/span> referensi<\/span> dan<\/span> menunjukkan<\/span> bagaimana<\/span> untuk<\/span> menerapkannya<\/span> itu<\/span> <\/span> dalam<\/span> realistis<\/span> contoh.<\/span> Ini<\/span> juga<\/span> memperkenalkan<\/span> sebuah<\/span> lebih luas<\/span> perangkat<\/span> alur kerja<\/span> menggunakan<\/span> Visual<\/span> Paradigm<\/span> UML,<\/span> dibantu AI<\/span> pemodelan,<\/span> dan<\/span> VPasCode.<\/span> Bersama,<\/span> alat-alat ini<\/span> alat<\/span> mendukung<\/span> suatu<\/span> lengkap<\/span> proses:<\/span> mengubah<\/span> persyaratan<\/span> menjadi<\/span> sebuah<\/span> awal<\/span> model,<\/span> memvalidasi<\/span> UML<\/span> hubungan,<\/span> memperhalus<\/span> model<\/span> diagram,<\/span> dan<\/span> mempertahankan<\/span> model<\/span> akhir<\/span> model<\/span> sebagai<\/span> dapat dibaca<\/span> diagram<\/span> sumber.<\/span><\/p>\n

\"DiagramDiagram kasus penggunaan UML menggambarkan bagaimana pengguna eksternal atau sistem berinteraksi dengan suatu sistem. Diagram ini berfokus pada apa yang dilakukan sistem<\/strong>, bukan bagaimana sistem tersebut diimplementasikan.<\/p>\n

PlantUML memungkinkan Anda membuat diagram kasus penggunaan menggunakan notasi berbasis teks yang sederhana.<\/p>\n

1. Struktur dasar PlantUML<\/h2>\n

Setiap diagram PlantUML dimulai dengan @startuml<\/code> dan diakhiri dengan @enduml<\/code>.<\/p>\n

\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n PlantUML<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit PlantUML in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
@startuml\r\n\r\n' Isi diagram ada di sini\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Komentar dimulai dengan tanda kutip tunggal:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
' Ini adalah komentar\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Anda juga dapat menggunakan komentar multi baris:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
\/'\r\nIni adalah\r\nkomentar multi-baris\r\n'\/\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
2. Mendefinisikan aktor<\/h2>\n
Sebuah aktor mewakili seseorang, peran, organisasi, perangkat, atau sistem eksternal yang berinteraksi dengan sistem Anda.<\/p>\n
Aktor dasar<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
aktor User\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Ini membuat sebuah aktor berupa figur tongkat bernama Pengguna<\/code>.<\/p>\n
Aktor dengan nama samaran<\/h3>\n
Nama samaran berguna ketika nama yang ditampilkan mengandung spasi atau ketika Anda menginginkan pengidentifikasi yang lebih pendek untuk relasi.<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
actor \"Payment Gateway\" as payment\r\nactor \"System Administrator\" as admin\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Anda kemudian dapat merujuk ke nama samaran:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
pembayaran --> ProsesPembayaran\r\nadmin --> KelolaPengguna\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Aktor menggunakan gaya visual yang berbeda<\/h3>\n
PlantUML mendukung beberapa gaya aktor. Gaya default biasanya sudah cukup, tetapi Anda dapat menggunakan aktor bergaya ikon:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
skinparam actorStyle awesome\r\n\r\nactor Pelanggan\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Anda juga dapat menggunakan aktor bergaya persegi panjang polos:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
skinparam actorStyle hollow\r\n\r\nactor Customer\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Tampilan yang tepat bergantung pada mesin perender PlantUML dan parameter kulit.<\/p>\n
3. Mendefinisikan kasus penggunaan<\/h2>\n
Kasus penggunaan mewakili layanan, tujuan, atau fungsi yang disediakan oleh sistem.<\/p>\n
Kasus penggunaan dasar<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
usecase \"Log In\"\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
PlantUML merender ini sebagai elips berlabel Masuk<\/code>.<\/p>\n
Use case dengan alias<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
usecase \"Proses Pembayaran Kartu Kredit\" sebagai ProcessPayment\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Label yang terlihat adalah Proses Pembayaran Kartu Kredit<\/code>, sementara ProcessPayment<\/code> digunakan dalam relasi.<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
actor Customer\r\nCustomer --> ProcessPayment\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Nama use-case multi-baris<\/h3>\n
Anda dapat menyisipkan jeda baris menggunakan n<\/code>:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
usecase \"ProsesnPembayaran Kartu Kredit\" sebagai ProcessPayment\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Ini berguna ketika diagram berisi label yang panjang.<\/p>\n
4. Batas sistem<\/h2>\n
Batas sistem mengelompokkan kasus penggunaan yang termasuk dalam sistem tertentu.<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
rectangle \"Sistem Belanja Online\" {\r\n    usecase \"Jelajahi Produk\" sebagai Browse\r\n    usecase \"Checkout\" sebagai Checkout\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Persegi panjang mewakili sistem, dan kasus penggunaan di dalamnya mewakili fungsionalitas yang disediakan oleh sistem tersebut.<\/p>\n
Anda juga dapat menggunakan alias bernama untuk batas:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
rectangle \"Sistem Belanja Online\" sebagai OnlineStore {\r\n    usecase \"Jelajahi Produk\" sebagai Browse\r\n    usecase \"Checkout\" sebagai Checkout\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Batas sistem berguna saat membedakan perilaku sistem dari aktor eksternal dan layanan.<\/p>\n
5. Menghubungkan aktor dan kasus penggunaan<\/h2>\n
Asosiasi menunjukkan bahwa seorang aktor berpartisipasi dalam atau berinteraksi dengan sebuah kasus penggunaan.<\/p>\n
Asosiasi tanpa arah<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
Customer -- Browse\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Ini membuat garis solid tanpa kepala panah.<\/p>\n
Arah asosiasi<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
Customer --> Browse\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Ini membuat garis solid dengan kepala panah yang mengarah ke kasus penggunaan.<\/p>\n
Kedua bentuk ini umum digunakan. Arah panah harus dipilih secara konsisten sesuai dengan komunikasi atau tanggung jawab yang ingin Anda tekankan.<\/p>\n
Asosiasi dengan label<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
Pelanggan --> Checkout : dimulai\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Label tersebut menggambarkan interaksi.<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
Pelanggan --> LihatPesanan : melihat riwayat pesanan\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Untuk tata letak yang lebih mudah dibaca, Anda dapat menggunakan panah yang lebih panjang:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
Pelanggan ---> Checkout : memulai\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
6. The <<include>><\/code>  relasi<\/h2>\n
Sebuah termasuk<\/code>\u00a0relasi merepresentasikan perilaku yang\u00a0selalu diperlukan<\/strong>\u00a0oleh kasus penggunaan lain.<\/p>\n
Sebagai contoh, pemesanan pesanan mungkin selalu memerlukan validasi pembayaran:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
PlaceOrder ..> ValidatePayment : <<include>>\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Arahnya penting:<\/p>\n
Kasus penggunaan dasar ..> Kasus penggunaan yang disertakan : <<include>>\r\n<\/code><\/pre>\n
Panah mengarah dari kasus penggunaan yang memerlukan perilaku ke kasus penggunaan yang menyediakan perilaku yang dapat digunakan kembali.<\/p>\n
Contoh<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
usecase \"Checkout\" sebagai Checkout\r\nusecase \"Validasi Detail Pelanggan\" sebagai ValidateCustomer\r\nusecase \"Hitung Total Pesanan\" sebagai CalculateTotal\r\nusecase \"Lakukan Pembayaran\" sebagai MakePayment\r\n\r\nCheckout ..> ValidateCustomer : <<include>>\r\nCheckout ..> CalculateTotal : <<include>>\r\nCheckout ..> MakePayment : <<include>>\r\n<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit PlantUML di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Ini berarti:<\/p>\n
    \n
  1. \n
    Checkout selalu memvalidasi detail pelanggan.<\/p>\n<\/li>\n
  2. \n
    Checkout selalu menghitung total pesanan.<\/p>\n<\/li>\n
  3. \n
    Checkout selalu melakukan pembayaran.<\/p>\n<\/li>\n<\/ol>\n
    Gunakan <<include>><\/code> ketika perilaku yang disertakan bersifat wajib atau dapat digunakan kembali.<\/p>\n
    7. The <<extend>><\/code>\u00a0hubungan<\/h2>\n
    Sebuah perluasan<\/code>\u00a0hubungan merepresentasikan perilaku opsional, kondisional, atau pengecualian yang ditambahkan ke kasus penggunaan dasar.<\/p>\n
    Sebagai contoh, pemberian diskon mungkin hanya terjadi ketika pelanggan memiliki kupon yang valid:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    ApplyDiscount ..> Checkout : <<extend>>\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Arahnya adalah:<\/p>\n
    Kasus penggunaan ekstensi opsional ..> Kasus penggunaan dasar : <<extend>>\r\n<\/code><\/pre>\n
    Panah menunjuk dari perilaku opsionalke kasus penggunaan dasar<\/strong>.<\/p>\n
    Contoh yang benar<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    usecase \"Checkout\" sebagai Checkout\r\nusecase \"Apply Discount Coupon\" sebagai ApplyDiscount\r\n\r\nApplyDiscount ..> Checkout : <<extend>>\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Ini berarti bahwaTerapkan Kupon Diskon<\/code>secara opsional memperluasPembayaran<\/code> proses.<\/p>\n
    Perbandingan antara include dan extend<\/h3>\n\n\n\n\n\n\n
    Hubungan<\/th>\nTujuan<\/th>\nArah panah<\/th>\n<\/tr>\n<\/thead>\n
    <<include>><\/code><\/td>\nPerilaku wajib yang dapat digunakan kembali<\/td>\nUse case dasar \u2192 use case yang di-include<\/td>\n<\/tr>\n
    <<extend>><\/code><\/td>\nPerilaku opsional atau bersyarat<\/td>\nUse case yang meng-extend \u2192 use case dasar<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Contoh:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    Checkout ..> ValidatePayment : <<include>>\r\nApplyDiscount ..> Checkout : <<extend>>\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Hindari membalikkan hubungan-hubungan ini karena arah mengubah maknanya.<\/p>\n
    8. Generalisasi kasus penggunaan<\/h2>\n
    Generalisasi menunjukkan bahwa satu kasus penggunaan adalah bentuk khusus dari kasus penggunaan lainnya.<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    usecase \"Cari Produk\" sebagai SearchProducts\r\nusecase \"Jelajahi Produk\" sebagai BrowseProducts\r\n\r\nSearchProducts -|> BrowseProducts\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Segitiga kosong mengarah ke kasus penggunaan yang lebih umum.<\/p>\n
    Ini berarti bahwa Cari Produk<\/code> adalah variasi khusus dari Jelajahi Produk<\/code>.<\/p>\n
    Generalisasi lebih jarang daripada include<\/code> dan extend<\/code>, sehingga gunakan hanya ketika terdapat hubungan induk-anak yang sah antara kasus penggunaan.<\/p>\n
    9. Generalisasi aktor<\/h2>\n
    Aktor juga dapat memiliki hubungan generalisasi.<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    actor Customer\r\nactor \"Pelanggan Premium\" sebagai PremiumCustomer\r\n\r\nPremiumCustomer -|> Customer\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Ini menunjukkan bahwa pelanggan premium adalah jenis pelanggan yang terspesialisasi dan mewarisi interaksi dari aktor umum.<\/p>\n
    Sebagai contoh:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    PremiumCustomer --> TerapkanDiskon\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    10. Catatan dan anotasi<\/h2>\n
    Catatan menambahkan penjelasan atau batasan pada sebuah diagram.<\/p>\n
    Catatan yang melekat pada sebuah kasus penggunaan<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    note kanan dari Checkout\r\n  Pelanggan harus menyediakan\r\n  informasi penagihan yang valid.\r\nend note\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Posisi lainnya meliputi:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    note kiri dari Checkout\r\n  Proses yang berhadapan dengan pelanggan\r\nend note\r\n\r\nnote atas dari Checkout\r\n  Alur kerja bisnis utama\r\nend note\r\n\r\nnote bawah dari Checkout\r\n  Termasuk pemrosesan pembayaran\r\nend note\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Sintaks catatan singkat<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    catatan di sebelah kanan Login : Autentikasi pengguna diperlukan\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Catatan mandiri dengan alias<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    catatan \"Pembayaran harus diotorisasinsebelum pesanan dikonfirmasi\" sebagai PaymentNote\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Hubungkan catatan ke elemen dengan garis putus-putus:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    PaymentNote .. MakePayment\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Catatan untuk kendala<\/h3>\n
    Catatan berguna untuk mendokumentasikan kondisi:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    catatan di kanan ApplyDiscount\r\n  Perilaku opsional:\r\n  digunakan hanya ketika\r\n  kupon yang valid\r\n  disediakan.\r\nakhiran catatan\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    11. Arah tata letak<\/h2>\n
    Secara default, PlantUML memilih tata letak secara otomatis. Anda dapat memengaruhi arahnya.<\/p>\n
    Tata letak kiri ke kanan<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    arah kiri ke kanan\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Ini sering berguna untuk diagram kasus penggunaan karena aktor muncul di sebelah kiri dan sistem eksternal di sebelah kanan.<\/p>\n
    Tata letak dari atas ke bawah<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    arah dari atas ke bawah\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Ini dapat berguna untuk diagram yang ringkas atau alur kerja yang terorganisir secara vertikal.<\/p>\n
    Tautan tata letak yang tidak terlihat<\/h3>\n
    Tautan yang tidak terlihat dapat mempengaruhi penempatan tanpa menampilkan hubungan yang terlihat:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    Pelanggan -[hidden]-> Checkout\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Ini berguna untuk meningkatkan tata letak diagram.<\/p>\n
    12. Menggaya diagram<\/h2>\n
    Hapus bayangan<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    skinparam shadowing false\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Gunakan paket dan batas berbentuk persegi panjang<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    skinparam packageStyle rectangle\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Atur warna<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    skinparam usecase {\r\n    BackgroundColor #FDFDFD\r\n    BorderColor #333333\r\n}\r\n\r\nskinparam actor {\r\n    BorderColor #333333\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Atur warna panah<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    skinparam ArrowColor #555555\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Atur ukuran font default<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    skinparam defaultFontSize 14\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Bagian styling lengkap mungkin terlihat seperti ini:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    skinparam shadowing false\r\nskinparam packageStyle rectangle\r\nskinparam actorStyle awesome\r\nskinparam defaultFontSize 14\r\n\r\nskinparam usecase {\n    BackgroundColor #F9FBFF\n    BorderColor #234\n}\n\nskinparam ArrowColor #555555\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    13. Paket dan pengelompokan<\/h2>\n
    Paket dapat mengelompokkan kasus penggunaan yang terkait.<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    package \"Fitur Pelanggan\" {\r\n    usecase \"Daftar Akun\" as Register\r\n    usecase \"Masuk\" as Login\r\n    usecase \"Jelajahi Produk\" as Browse\r\n}\r\n\r\npackage \"Fitur Administrasi\" {\r\n    usecase \"Kelola Produk\" as ManageProducts\r\n    usecase \"Hasilkan Laporan Penjualan\" as SalesReport\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Package bermanfaat ketika diagram berisi banyak use case.<\/p>\n
    Anda juga dapat menggunakan persegi panjang sebagai grup:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    rectangle \"Manajemen Pesanan\" {\r\n    usecase \"Tempel Pesanan\" as PlaceOrder\r\n    usecase \"Lacak Pesanan\" as TrackOrder\r\n    usecase \"Batalkan Pesanan\" as CancelOrder\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    14. Sistem eksternal<\/h2>\n
    Aplikasi atau layanan eksternal dapat direpresentasikan sebagai aktor.<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    actor \"Payment Gateway\" as PaymentGateway\r\nactor \"Email Service\" as EmailService\r\nactor \"External CRM\" as CRM\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Hubungkan mereka ke kasus penggunaan sistem:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    PaymentGateway --> MakePayment\r\nEmailService --> SendConfirmation\r\nCRM --> SynchronizeCustomer\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Hal ini dengan jelas memisahkan fungsionalitas sistem dari layanan di luar batas sistem.<\/p>\n
    15. Contoh lengkap<\/h2>\n
    Contoh berikut menggabungkan notasi utama dari lembar referensi.<\/p>\n
    \"Contoh<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n            
    \r\n                                
    \r\n                    PlantUML<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
    \r\n                    
    @startuml\r\ntitle Sistem Belanja Online - Diagram Use Case\r\n\r\narah dari kiri ke kanan\r\n\r\nskinparam shadowing false\r\nskinparam packageStyle rectangle\r\nskinparam actorStyle awesome\r\n\r\nskinparam usecase {\r\n    BackgroundColor #F9FBFF\r\n    BorderColor #333333\r\n}\r\n\r\nskinparam ArrowColor #555555\r\n\r\n' Aktor\r\nactor Customer as customer\r\nactor \"Pelanggan Premium\" as premium\r\nactor Administrator as admin\r\nactor \"Gerbang Pembayaran\" as payment\r\nactor \"Layanan Email\" as email\r\n\r\n' Generalisasi aktor\r\npremium -|> customer\r\n\r\n' Batas sistem\r\nrectangle \"Sistem Belanja Online\" {\r\n\r\n    ' Use case pelanggan\r\n    usecase \"Daftar Akun\" as Register\r\n    usecase \"Masuk\" as Login\r\n    usecase \"Jelajahi Produk\" as Browse\r\n    usecase \"Cari Produk\" as Search\r\n    usecase \"Lihat Detail Produk\" as ViewProduct\r\n    usecase \"Tambah Produk ke Keranjang\" as AddToCart\r\n    usecase \"Lihat Keranjang Belanja\" as ViewCart\r\n    usecase \"Checkout\" as Checkout\r\n    usecase \"Tempatkan Pesanan\" as PlaceOrder\r\n    usecase \"Lacak Pesanan\" as TrackOrder\r\n    usecase \"Batalkan Pesanan\" as CancelOrder\r\n\r\n    ' Perilaku bersama yang disertakan\r\n    usecase \"Validasi Detail Pelanggan\" as ValidateCustomer\r\n    usecase \"Hitung Total Pesanan\" as CalculateTotal\r\n    usecase \"Lakukan Pembayaran\" as MakePayment\r\n    usecase \"Kirim Konfirmasi Pesanan\" as SendConfirmation\r\n\r\n    ' Perilaku opsional\r\n    usecase \"Terapkan Kupon Diskon\" as ApplyDiscount\r\n    usecase \"Minta Pengembalian Dana\" as RequestRefund\r\n\r\n    ' Use case administrasi\r\n    usecase \"Kelola Produk\" as ManageProducts\r\n    usecase \"Hasilkan Laporan Penjualan\" as SalesReport\r\n}\r\n\r\n' Asosiasi aktor\r\ncustomer --> Register\r\ncustomer --> Login\r\ncustomer --> Browse\r\ncustomer --> Search\r\ncustomer --> ViewProduct\r\ncustomer --> AddToCart\r\ncustomer --> ViewCart\r\ncustomer --> Checkout\r\ncustomer --> TrackOrder\r\ncustomer --> CancelOrder\r\n\r\npremium --> ApplyDiscount\r\npremium --> RequestRefund\r\n\r\nadmin --> ManageProducts\r\nadmin --> SalesReport\r\n\r\npayment --> MakePayment\r\nemail --> SendConfirmation\r\n\r\n' Hubungan include\r\nCheckout ..> ValidateCustomer : <<include>>\r\nCheckout ..> CalculateTotal : <<include>>\r\nCheckout ..> PlaceOrder : <<include>>\r\n\r\nPlaceOrder ..> MakePayment : <<include>>\r\nPlaceOrder ..> SendConfirmation : <<include>>\r\n\r\n' Hubungan extend\r\nApplyDiscount ..> Checkout : <<extend>>\r\nRequestRefund ..> CancelOrder : <<extend>>\r\n\r\n' Generalisasi use case\r\nSearch -|> Browse\r\n\r\n' Catatan\r\nnote right of Checkout\r\n    Proses pembelian utama pelanggan\r\nend note\r\n\r\nnote right of ApplyDiscount\r\n    Perilaku opsional:\r\n    hanya digunakan ketika\r\n    kupon yang valid tersedia\r\nend note\r\n\r\nnote bottom of MakePayment\r\n    Pembayaran ditangani oleh\r\n    gerbang pembayaran eksternal\r\nend note\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                
    \r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEdit PlantUML di VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    \"Diagram<\/p>\n
    16. Membaca contoh lengkap<\/h2>\n
    Diagram ini menyampaikan hal berikut:<\/p>\n