{"id":11441,"date":"2026-09-16T17:29:24","date_gmt":"2026-09-16T09:29:24","guid":{"rendered":"https:\/\/www.cybermedian.com\/es\/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\/es\/plantuml-use-case-diagram-guide\/","title":{"rendered":"Gu\u00eda de Diagramas de Casos de Uso de PlantUML"},"content":{"rendered":"

Introducci\u00f3n<\/span><\/h2>\n

Uso<\/span> caso<\/span> diagramas<\/span> proporcionan<\/span> un<\/span> manera clara<\/span> <\/span> para<\/span> describir<\/span> c\u00f3mo<\/span> usuarios,<\/span> sistemas externos,<\/span> <\/span> y<\/span> otros<\/span> actores<\/span> interact\u00faan<\/span> con<\/span> un<\/span> sistema de software.<\/span> <\/span> Ayudan<\/span> <\/span> a los equipos<\/span> a definir<\/span> el alcance del sistema,<\/span> <\/span> identificar<\/span> funcional<\/span> requisitos,<\/span> y<\/span> comunicar<\/span> esperado<\/span> comportamiento<\/span> antes<\/span> implementaci\u00f3n<\/span> comience.<\/span><\/p>\n

PlantUML<\/span> hace<\/span> uso<\/span> caso<\/span> modelado<\/span> pr\u00e1ctico<\/span> mediante<\/span> un<\/span> basado en texto<\/span> sintaxis<\/span> que<\/span> puede<\/span> ser<\/span> almacenado,<\/span> revisado,<\/span> versionado,<\/span> y<\/span> regenerado<\/span> junto a<\/span> proyecto<\/span> documentaci\u00f3n<\/span> o<\/span> fuente<\/span> c\u00f3digo.<\/span> Con<\/span> un<\/span> pocos<\/span> comandos,<\/span> puedes<\/span> definir<\/span> actores,<\/span> casos de uso,<\/span> l\u00edmites del sistema,<\/span> asociaciones,<\/span> <<include>><\/span> relaciones,<\/span> <<extend>><\/span> relaciones,<\/code> y<\/span> notas,<\/code> y<\/span> preferencias de dise\u00f1o.<\/span> Esta<\/span> gu\u00eda<\/span> explica<\/span> los<\/span><\/p>\n

principales<\/span> conceptos<\/span> <\/span> <\/span> <\/span> PlantUML<\/span> uso<\/span> caso<\/span> notaci\u00f3n<\/span> mostrado<\/span> en<\/span> la<\/span> referencia<\/span> hoja<\/span> y<\/span> demuestra<\/span> c\u00f3mo<\/span> a<\/span> aplicar<\/span> lo<\/span> en<\/span> realistas<\/span> ejemplos.<\/span> Tambi\u00e9n<\/span> introduce<\/span> un<\/span> flujo<\/span> de<\/span> herramientas<\/span> m\u00e1s amplio<\/span> utilizando<\/span> Visual<\/span> Paradigm<\/span> UML,<\/span> asistido por IA<\/span> modelado,<\/span> y<\/span> VPasCode.<\/span> Juntos,<\/span> estas<\/span> herramientas<\/span> apoyan<\/span> un<\/span> proceso completo:<\/span> proceso:<\/span> convertir<\/span> requisitos<\/span> en<\/span> un<\/span> modelo inicial,<\/span> modelo inicial,<\/span> validar<\/span> relaciones UML,<\/span> relaciones UML,<\/span> refinar<\/span> el<\/span> diagrama,<\/span> y<\/span> mantener<\/span> el<\/span> modelo final<\/span> modelo final<\/span> como<\/span> diagrama legible<\/span> diagrama legible<\/span> fuente.<\/span><\/p>\n

\"DiagramaUn diagrama de casos de uso UML describe c\u00f3mo los usuarios externos o los sistemas interact\u00faan con un sistema. Se centra en lo que hace el sistema<\/strong>, en lugar de c\u00f3mo se implementa.<\/p>\n

PlantUML le permite crear diagramas de casos de uso utilizando una notaci\u00f3n simple basada en texto.<\/p>\n

1. Estructura b\u00e1sica de PlantUML<\/h2>\n

Cada diagrama de PlantUML comienza con @startuml<\/code> y termina con @enduml<\/code>.<\/p>\n

\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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' El contenido del diagrama va aqu\u00ed\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Los comentarios comienzan con un ap\u00f3strofo:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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                    
' Este es un comentario\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Tambi\u00e9n puede usar comentarios de varias l\u00edneas:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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\nEsto es un\r\ncomentario multilinea\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
2. Definici\u00f3n de actores<\/h2>\n
Un actor representa una persona, rol, organizaci\u00f3n, dispositivo o sistema externo que interact\u00faa con tu sistema.<\/p>\n
Actor b\u00e1sico<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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 Usuario\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Esto crea un actor de figura de palo llamado Usuario<\/code>.<\/p>\n
Actor con alias<\/h3>\n
Los alias son \u00fatiles cuando el nombre mostrado contiene espacios o cuando deseas un identificador m\u00e1s corto para las relaciones.<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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 \"Pasarela de pago\" como payment\r\nactor \"Administrador del sistema\" como 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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Luego puedes referirte a los alias:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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                    
payment --> ProcessPayment\r\nadmin --> ManageUsers\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Actor que utiliza un estilo visual diferente<\/h3>\n
PlantUML admite varios estilos de actor. El estilo predeterminado suele ser suficiente, pero puedes usar un actor con estilo de icono:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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 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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Tambi\u00e9n puedes usar un actor con estilo de rect\u00e1ngulo simple:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
La apariencia exacta depende del motor de renderizado de PlantUML y de los par\u00e1metros de estilo.<\/p>\n
3. Definici\u00f3n de casos de uso<\/h2>\n
Un caso de uso representa un servicio, objetivo o funci\u00f3n proporcionado por el sistema.<\/p>\n
Caso de uso b\u00e1sico<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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 \"Iniciar sesi\u00f3n\"\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
PlantUML representa esto como una elipse etiquetada Iniciar sesi\u00f3n<\/code>.<\/p>\n
Caso de uso con un alias<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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 \"Procesar pago con tarjeta de cr\u00e9dito\" como 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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
La etiqueta visible es Procesar pago con tarjeta de cr\u00e9dito<\/code>, mientras que ProcessPayment<\/code> se utiliza en relaciones.<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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 Cliente\r\nCliente --> 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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Nombres de casos de uso en varias l\u00edneas<\/h3>\n
Puede insertar un salto de l\u00ednea usando n<\/code>:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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 \"ProcesarnPago connTarjeta de Cr\u00e9dito\" como 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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Esto es \u00fatil cuando un diagrama contiene etiquetas largas.<\/p>\n
4. L\u00edmites del sistema<\/h2>\n
Un l\u00edmite del sistema agrupa los casos de uso que pertenecen a un sistema en particular.<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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 \"Sistema de Compras en L\u00ednea\" {\r\n    usecase \"Navegar por Productos\" como Browse\r\n    usecase \"Finalizar Compra\" como 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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
El rect\u00e1ngulo representa el sistema, y los casos de uso dentro de \u00e9l representan la funcionalidad proporcionada por ese sistema.<\/p>\n
Tambi\u00e9n puedes usar un alias con nombre para el l\u00edmite:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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 \"Sistema de Compras en L\u00ednea\" como OnlineStore {\r\n    usecase \"Navegar por Productos\" como Browse\r\n    usecase \"Finalizar Compra\" como 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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Un l\u00edmite del sistema es \u00fatil para distinguir el comportamiento del sistema de los actores y servicios externos.<\/p>\n
5. Conectar actores y casos de uso<\/h2>\n
Una asociaci\u00f3n muestra que un actor participa en o interact\u00faa con un caso de uso.<\/p>\n
Asociaci\u00f3n no dirigida<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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                    
Cliente -- Examinar\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Esto crea una l\u00ednea s\u00f3lida sin cabeza de flecha.<\/p>\n
Asociaci\u00f3n dirigida<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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                    
Cliente --> Examinar\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Esto crea una l\u00ednea s\u00f3lida con una cabeza de flecha que apunta hacia el caso de uso.<\/p>\n
Ambas formas se utilizan com\u00fanmente. La direcci\u00f3n de la flecha debe elegirse de manera consistente seg\u00fan la comunicaci\u00f3n o responsabilidad que desee enfatizar.<\/p>\n
Asociaci\u00f3n con una etiqueta<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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                    
Cliente --> Caja : inicia\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
La etiqueta describe la interacci\u00f3n.<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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                    
Cliente --> VerPedidos : visualiza el historial de pedidos\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Para un dise\u00f1o m\u00e1s legible, puede usar una flecha m\u00e1s larga:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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                    
Cliente ---> FinalizarCompra : inicia\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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
6. La <<include>><\/code> relaci\u00f3n<\/h2>\n
Una include<\/code> relaci\u00f3n representa un comportamiento que es siempre requerido<\/strong> por otro caso de uso.<\/p>\n
Por ejemplo, realizar un pedido puede siempre requerir la validaci\u00f3n del pago:<\/p>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
La direcci\u00f3n es importante:<\/p>\n
Caso de uso base ..> Caso de uso incluido : <<include>>\r\n<\/code><\/pre>\n
La flecha apunta desde el caso de uso que necesita el comportamiento hacia el caso de uso que proporciona el comportamiento reutilizable.<\/p>\n
Ejemplo<\/h3>\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en 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\" como Checkout\r\nusecase \"Validar Datos del Cliente\" como ValidateCustomer\r\nusecase \"Calcular Total del Pedido\" como CalculateTotal\r\nusecase \"Realizar Pago\" como 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>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Esto significa:<\/p>\n
    \n
  1. \n
    El proceso de compra siempre valida los datos del cliente.<\/p>\n<\/li>\n
  2. \n
    El proceso de compra siempre calcula el total del pedido.<\/p>\n<\/li>\n
  3. \n
    El proceso de compra siempre realiza el pago.<\/p>\n<\/li>\n<\/ol>\n
    Usar <<include>><\/code> cuando el comportamiento incluido es obligatorio o reutilizable.<\/p>\n
    7. La <<extend>><\/code> relaci\u00f3n<\/h2>\n
    Una extend<\/code> relaci\u00f3n representa un comportamiento opcional, condicional o excepcional a\u00f1adido a un caso de uso base.<\/p>\n
    Por ejemplo, aplicar un descuento puede ocurrir solo cuando el cliente tiene un cup\u00f3n v\u00e1lido:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    La direcci\u00f3n es:<\/p>\n
    Caso de uso de extensi\u00f3n opcional ..> Caso de uso base : <<extend>>\r\n<\/code><\/pre>\n
    La flecha apunta desde el comportamiento opcional hacia el caso de uso base<\/strong>.<\/p>\n
    Ejemplo correcto<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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\" as Checkout\r\nusecase \"Apply Discount Coupon\" as 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Esto significa que Aplicar cup\u00f3n de descuento<\/code> extiende opcionalmente el proceso de pago<\/code>.<\/p>\n
    Comparaci\u00f3n de incluir y extender<\/h3>\n\n\n\n\n\n\n
    Relaci\u00f3n<\/th>\nProp\u00f3sito<\/th>\nDirecci\u00f3n de la flecha<\/th>\n<\/tr>\n<\/thead>\n
    <<include>><\/code><\/td>\nComportamiento reutilizable obligatorio<\/td>\nCaso de uso base \u2192 caso de uso incluido<\/td>\n<\/tr>\n
    <<extend>><\/code><\/td>\nComportamiento opcional o condicional<\/td>\nCaso de uso extendido \u2192 caso de uso base<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Ejemplo:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Evite invertir estas relaciones porque la direcci\u00f3n cambia su significado.<\/p>\n
    8. Generalizaci\u00f3n de casos de uso<\/h2>\n
    La generalizaci\u00f3n muestra que un caso de uso es una forma especializada de otro caso de uso.<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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 \"Buscar Productos\" as SearchProducts\r\nusecase \"Navegar Productos\" as 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    El tri\u00e1ngulo hueco apunta hacia el caso de uso m\u00e1s general.<\/p>\n
    Esto significa que Buscar Productos<\/code> es una variante especializada de Navegar Productos<\/code>.<\/p>\n
    La generalizaci\u00f3n es menos com\u00fan que include<\/code> y extend<\/code>, as\u00ed que \u00fasela solo cuando exista una relaci\u00f3n genuina de padre-hijo entre los casos de uso.<\/p>\n
    9. Generalizaci\u00f3n de actores<\/h2>\n
    Los actores tambi\u00e9n pueden tener relaciones de generalizaci\u00f3n.<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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 Cliente\r\nactor \"Cliente Premium\" como PremiumCustomer\r\n\r\nPremiumCustomer -|> Cliente\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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Esto indica que un cliente premium es un tipo especializado de cliente y hereda las interacciones del actor general.<\/p>\n
    Por ejemplo:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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 --> AplicarDescuento\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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    10. Notas y anotaciones<\/h2>\n
    Las notas a\u00f1aden explicaciones o restricciones a un diagrama.<\/p>\n
    Nota adjunta a un caso de uso<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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 derecha de Checkout\r\n  El cliente debe proporcionar\r\n  informaci\u00f3n de facturaci\u00f3n v\u00e1lida.\rend 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Otras posiciones incluyen:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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 izquierda de Checkout\r\n  Proceso orientado al cliente\r\nend note\r\n\r\nnote superior de Checkout\r\n  Flujo de trabajo principal del negocio\r\nend note\r\n\r\nnote inferior de Checkout\r\n  Incluye procesamiento de pagos\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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Sintaxis de nota corta<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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                    
    nota a la derecha de Login : Se requiere autenticaci\u00f3n de usuario\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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Nota independiente con un alias<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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                    
    nota \"El pago debe ser autorizadonantes de confirmar el pedido\" como 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Conecte la nota a un elemento con una l\u00ednea discontinua:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Notas para restricciones<\/h3>\n
    Las notas son \u00fatiles para documentar condiciones:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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                    
    nota a la derecha de ApplyDiscount\r\n  Comportamiento opcional:\r\n  usado solo cuando se proporciona un\r\n  cup\u00f3n v\u00e1lido.\r\nfin nota\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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    11. Direcci\u00f3n del dise\u00f1o<\/h2>\n
    Por defecto, PlantUML elige un dise\u00f1o autom\u00e1ticamente. Puedes influir en la direcci\u00f3n.<\/p>\n
    Dise\u00f1o de izquierda a derecha<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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                    
    direcci\u00f3n de izquierda a derecha\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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Esto es a menudo \u00fatil para diagramas de casos de uso porque los actores aparecen a la izquierda y los sistemas externos a la derecha.<\/p>\n
    Dise\u00f1o de arriba a abajo<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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                    
    direcci\u00f3n de arriba a abajo\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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Esto puede ser \u00fatil para diagramas compactos o flujos de trabajo organizados verticalmente.<\/p>\n
    Enlaces de dise\u00f1o invisibles<\/h3>\n
    Un enlace invisible puede influir en la posici\u00f3n sin mostrar una relaci\u00f3n visible:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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                    
    Cliente -[oculto]-> Finalizar compra\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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Esto es \u00fatil para mejorar el dise\u00f1o del diagrama.<\/p>\n
    12. Estilizar el diagrama<\/h2>\n
    Quitar sombras<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Usar paquetes y l\u00edmites rectangulares<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Establecer colores<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Establecer colores de flechas<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Establecer tama\u00f1o de fuente predeterminado<\/h3>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Una secci\u00f3n de estilo completa podr\u00eda verse as\u00ed:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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 {\r\n    BackgroundColor #F9FBFF\r\n    BorderColor #234\r\n}\r\n\r\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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    13. Paquetes y agrupaci\u00f3n<\/h2>\n
    Los paquetes pueden agrupar casos de uso relacionados.<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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 \"Caracter\u00edsticas del Cliente\" {\r\n    usecase \"Registrar Cuenta\" as Register\r\n    usecase \"Iniciar Sesi\u00f3n\" as Login\r\n    usecase \"Navegar por Productos\" as Browse\r\n}\r\n\r\npackage \"Caracter\u00edsticas de Administraci\u00f3n\" {\r\n    usecase \"Gestionar Productos\" as ManageProducts\r\n    usecase \"Generar Informe de Ventas\" 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Los paquetes son \u00fatiles cuando un diagrama contiene muchos casos de uso.<\/p>\n
    Tambi\u00e9n puedes usar un rect\u00e1ngulo como grupo:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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 \"Gesti\u00f3n de Pedidos\" {\r\n    usecase \"Realizar Pedido\" as PlaceOrder\r\n    usecase \"Rastrear Pedido\" as TrackOrder\r\n    usecase \"Cancelar Pedido\" 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    14. Sistemas externos<\/h2>\n
    Las aplicaciones o servicios externos pueden representarse como actores.<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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 \"Pasarela de Pago\" as PaymentGateway\r\nactor \"Servicio de Correo Electr\u00f3nico\" as EmailService\r\nactor \"CRM Externo\" 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Con\u00e9ctalos a los casos de uso del sistema:<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    Esto separa claramente la funcionalidad del sistema de los servicios fuera del l\u00edmite del sistema.<\/p>\n
    15. Ejemplo completo<\/h2>\n
    El siguiente ejemplo combina la notaci\u00f3n principal de la hoja de referencia.<\/p>\n
    \"Ejemplo<\/p>\n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n
    \n
    \n
    \nPlantUML<\/span>
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en 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\nt\u00edtulo Sistema de Compras en L\u00ednea - Diagrama de Casos de Uso\r\n\r\ndirecci\u00f3n de izquierda a derecha\r\n\r\nskinparam sombreado false\r\nskinparam estiloPaquete rect\u00e1ngulo\r\nskinparam estiloActor impresionante\r\n\r\nskinparam casoUso {\r\n    ColorFondo #F9FBFF\r\n    ColorBorde #333333\r\n}\r\n\r\nskinparam ColorFlecha #555555\r\n\r\n' Actores\r\nactor Cliente as cliente\r\nactor \"Cliente Premium\" as premium\r\nactor Administrador as admin\r\nactor \"Pasarela de Pago\" as pago\r\nactor \"Servicio de Correo\" as email\r\n\r\n' Generalizaci\u00f3n de actores\r\npremium -|> cliente\r\n\r\n' L\u00edmite del sistema\r\nrect\u00e1ngulo \"Sistema de Compras en L\u00ednea\" {\r\n\r\n    ' Casos de uso del cliente\r\n    casoUso \"Registrar Cuenta\" as Registrar\r\n    casoUso \"Iniciar Sesi\u00f3n\" as IniciarSesion\r\n    casoUso \"Navegar Productos\" as Navegar\r\n    casoUso \"Buscar Productos\" as Buscar\r\n    casoUso \"Ver Detalles del Producto\" as VerProducto\r\n    casoUso \"A\u00f1adir Producto al Carrito\" as A\u00f1adirAlCarrito\r\n    casoUso \"Ver Carrito de Compras\" as VerCarrito\r\n    casoUso \"Finalizar Compra\" as FinalizarCompra\r\n    casoUso \"Realizar Pedido\" as RealizarPedido\r\n    casoUso \"Rastrear Pedido\" as RastrearPedido\r\n    casoUso \"Cancelar Pedido\" as CancelarPedido\r\n\r\n    ' Comportamiento compartido incluido\r\n    casoUso \"Validar Datos del Cliente\" as ValidarCliente\r\n    casoUso \"Calcular Total del Pedido\" as CalcularTotal\r\n    casoUso \"Realizar Pago\" as RealizarPago\r\n    casoUso \"Enviar Confirmaci\u00f3n del Pedido\" as EnviarConfirmacion\r\n\r\n    ' Comportamiento opcional\r\n    casoUso \"Aplicar Cup\u00f3n de Descuento\" as AplicarDescuento\r\n    casoUso \"Solicitar Reembolso\" as SolicitarReembolso\r\n\r\n    ' Casos de uso de administraci\u00f3n\r\n    casoUso \"Gestionar Productos\" as GestionarProductos\r\n    casoUso \"Generar Informe de Ventas\" as InformeVentas\r\n}\r\n\r\n' Asociaciones de actores\r\ncliente --> Registrar\r\ncliente --> IniciarSesion\r\ncliente --> Navegar\r\ncliente --> Buscar\r\ncliente --> VerProducto\r\ncliente --> A\u00f1adirAlCarrito\r\ncliente --> VerCarrito\r\ncliente --> FinalizarCompra\r\ncliente --> RastrearPedido\r\ncliente --> CancelarPedido\r\n\r\npremium --> AplicarDescuento\r\npremium --> SolicitarReembolso\r\n\r\nadmin --> GestionarProductos\r\nadmin --> InformeVentas\r\n\r\npago --> RealizarPago\r\nemail --> EnviarConfirmacion\r\n\r\n' Relaciones de inclusi\u00f3n\r\nFinalizarCompra ..> ValidarCliente : <<include>>\r\nFinalizarCompra ..> CalcularTotal : <<include>>\r\nFinalizarCompra ..> RealizarPedido : <<include>>\r\n\r\nRealizarPedido ..> RealizarPago : <<include>>\r\nRealizarPedido ..> EnviarConfirmacion : <<include>>\r\n\r\n' Relaciones de extensi\u00f3n\r\nAplicarDescuento ..> FinalizarCompra : <<extend>>\r\nSolicitarReembolso ..> CancelarPedido : <<extend>>\r\n\r\n' Generalizaci\u00f3n de casos de uso\r\nBuscar -|> Navegar\r\n\r\n' Notas\r\nnota derecha de FinalizarCompra\r\n    Proceso principal de compra del cliente\r\nfin nota\r\n\r\nnota derecha de AplicarDescuento\r\n    Comportamiento opcional:\r\n    utilizado solo cuando hay un cup\u00f3n\r\n    v\u00e1lido disponible\r\nfin nota\r\n\r\nnota inferior de RealizarPago\r\n    El pago es gestionado por\r\n    una pasarela de pago externa\r\nfin nota\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>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \n<\/path><\/path><\/svg>
    \nEditar PlantUML en VPasCode<\/span>
    \n<\/a>\n<\/div>\n<\/div>\n
    \"Diagrama<\/p>\n
    16. Lectura del ejemplo completo<\/h2>\n
    El diagrama comunica lo siguiente:<\/p>\n