{"id":2905,"date":"2026-10-16T10:43:10","date_gmt":"2026-10-16T02:43:10","guid":{"rendered":"https:\/\/updates.visual-paradigm.com\/es\/releases\/free-mermaid-use-case-diagram-editor\/"},"modified":"2026-10-16T10:43:10","modified_gmt":"2026-10-16T02:43:10","slug":"free-mermaid-use-case-diagram-editor","status":"publish","type":"releases","link":"https:\/\/updates.visual-paradigm.com\/es\/releases\/free-mermaid-use-case-diagram-editor\/","title":{"rendered":"Editor de diagramas de casos de uso gratuito: Soporte de Mermaid en VPasCode"},"content":{"rendered":"

\"Los<\/p>\n

Diagramas de casos de uso<\/a> ayuda a los equipos a explicar c\u00f3mo las personas y los sistemas externos interact\u00faan con las funciones que proporciona un sistema. Ahora puedes crearlos en Mermaid y previsualizarlos en VPasCode. Esta nueva capacidad ampl\u00eda el soporte de diagramas como c\u00f3digo de VPasCode y te ofrece otra forma de describir el comportamiento del sistema utilizando texto en lugar de dibujar cada elemento manualmente.<\/p>\n

\u00bfYa usas Mermaid para documentaci\u00f3n t\u00e9cnica? Ahora puedes usar VPasCode como un editor de diagramas de Mermaid<\/strong> para diagramas de casos de uso, junto con los otros tipos de diagramas admitidos. Si buscas un editor gratuito de diagramas de casos de uso<\/strong> para convertir la sintaxis de Mermaid en un diagrama visual, pru\u00e9balo en el editor de VPasCode<\/a>.<\/p>\n

Novedades: Diagramas de casos de uso con Mermaid<\/h2>\n

VPasCode ya admit\u00eda diagramas de casos de uso escritos en PlantUML. Con esta actualizaci\u00f3n, tambi\u00e9n puedes escribirlos en la sintaxis usecase-beta<\/code> de Mermaid, disponible en Mermaid 12.0.0 y versiones posteriores. La sintaxis representa actores, casos de uso, l\u00edmites del sistema y las relaciones entre actores y casos de uso.<\/p>\n

Esta incorporaci\u00f3n facilita mantener los modelos de casos de uso en el mismo flujo de trabajo basado en texto que tus otros diagramas de Mermaid. Edita el c\u00f3digo fuente, genera una vista previa y revisa el diagrama seg\u00fan cambien tus requisitos.<\/p>\n

\"Infograf\u00eda<\/p>\n

Ejemplo: Diagrama de casos de uso del sistema de cajero autom\u00e1tico<\/h2>\n

El ejemplo de abajo muestra dos actores y las funciones del cajero autom\u00e1tico a las que pueden acceder. El l\u00edmite del sistema agrupa los casos de uso que pertenecen al Sistema de Cajero Autom\u00e1tico.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
usecase-beta\r\ndirection LR\r\nactor User(\"Usuario\")\r\nactor Technician(\"T\u00e9cnico\")\r\nsystemBoundary \"Sistema de Cajero Autom\u00e1tico\"\r\n  Withdraw(\"Retirar Efectivo\")\r\n  Transfer(\"Transferir Efectivo\")\r\n  Deposit(\"Depositar Efectivo\")\r\n  SettleBills(\"Pagar Facturas\")\r\n  Repair(\"Reparar Cajero Autom\u00e1tico\")\r\nend\r\nUser --> Withdraw\r\nUser --> Transfer\r\nUser --> Deposit\r\nUser --> SettleBills\r\nTechnician --> Repair<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Aqu\u00ed, actor<\/code> declara las personas que interact\u00faan con el sistema, y cada caso de uso con nombre representa una funci\u00f3n. El l\u00edmite del sistema<\/code> agrupa esas funciones bajo el Sistema de Cajero Autom\u00e1tico. Las flechas muestran qu\u00e9 funciones puede acceder cada actor, mientras que direcci\u00f3n LR<\/code> solicita un dise\u00f1o de izquierda a derecha.<\/p>\n
\u00bfPor qu\u00e9 usar Mermaid para diagramas de casos de uso?<\/h2>\n
Un diagrama basado en texto puede ser pr\u00e1ctico cuando deseas un modelo que sea f\u00e1cil de revisar junto con los requisitos, la documentaci\u00f3n o el c\u00f3digo. En lugar de reposicionar formas manualmente, puedes cambiar una etiqueta, agregar un actor o actualizar una relaci\u00f3n en el c\u00f3digo fuente. Esto hace que Mermaid sea \u00fatil tanto para discusiones tempranas de dise\u00f1o como para mantener los diagramas actualizados a medida que evoluciona el sistema.<\/p>\n
Los diagramas de casos de uso pueden ayudar a los gerentes de producto, analistas de negocio, desarrolladores, arquitectos y partes interesadas a construir una visi\u00f3n compartida del alcance del sistema. Pueden facilitar la discusi\u00f3n de preguntas como:<\/p>\n