{"id":2898,"date":"2026-10-16T10:43:10","date_gmt":"2026-10-16T02:43:10","guid":{"rendered":"https:\/\/updates.visual-paradigm.com\/pt\/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\/pt\/releases\/free-mermaid-use-case-diagram-editor\/","title":{"rendered":"Editor Gratuito de Diagramas de Casos de Uso: Suporte ao Mermaid no VPasCode"},"content":{"rendered":"

\"Diagramas<\/p>\n

Diagramas de casos de uso<\/a>ajuda as equipes a explicar como pessoas e sistemas externos interagem com as fun\u00e7\u00f5es que um sistema oferece. Agora voc\u00ea pode cri\u00e1-los no Mermaid e visualiz\u00e1-los no VPasCode. Essa nova capacidade expande o suporte do VPasCode a diagramas como c\u00f3digo e oferece outra maneira de descrever o comportamento do sistema usando texto, em vez de desenhar cada elemento manualmente.<\/p>\n

J\u00e1 usa o Mermaid para documenta\u00e7\u00e3o t\u00e9cnica? Agora voc\u00ea pode usar o VPasCode como um editor de diagramas Mermaid<\/strong>para diagramas de casos de uso, junto com os outros tipos de diagramas suportados. Se voc\u00ea est\u00e1 procurando por um editor gratuito de diagramas de casos de uso<\/strong>para transformar a sintaxe do Mermaid em um diagrama visual, experimente no editor VPasCode<\/a>.<\/p>\n

O que h\u00e1 de novo: Diagramas de casos de uso no Mermaid<\/h2>\n

O VPasCode j\u00e1 suportava diagramas de casos de uso escritos em PlantUML. Com esta atualiza\u00e7\u00e3o, voc\u00ea tamb\u00e9m pode escrev\u00ea-los na sintaxe usecase-beta<\/code>do Mermaid, dispon\u00edvel no Mermaid 12.0.0 e vers\u00f5es posteriores. A sintaxe representa atores, casos de uso, limites do sistema e as rela\u00e7\u00f5es entre atores e casos de uso.<\/p>\n

Essa adi\u00e7\u00e3o facilita a manuten\u00e7\u00e3o dos modelos de casos de uso no mesmo fluxo de trabalho baseado em texto que seus outros diagramas Mermaid. Edite a fonte, gere uma pr\u00e9via e revise o diagrama conforme seus requisitos mudam.<\/p>\n

\"Infogr\u00e1fico<\/p>\n

Exemplo: Diagrama de casos de uso do sistema de caixa eletr\u00f4nico (ATM)<\/h2>\n

O exemplo abaixo mostra dois atores e as fun\u00e7\u00f5es do caixa eletr\u00f4nico (ATM) que eles podem acessar. O limite do sistema agrupa os casos de uso que pertencem ao Sistema ATM.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdite Mermaid no 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\ndirection LR\nactor User(\"Usu\u00e1rio\")\nactor Technician(\"T\u00e9cnico\")\nsystemBoundary \"Sistema ATM\"\n  Withdraw(\"Sacar Dinheiro\")\n  Transfer(\"Transferir Dinheiro\")\n  Deposit(\"Depositar Dinheiro\")\n  SettleBills(\"Pagar Contas\")\n  Repair(\"Reparar ATM\")\nend\nUser --> Withdraw\nUser --> Transfer\nUser --> Deposit\nUser --> SettleBills\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>
\nEdite Mermaid no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Aqui, actor<\/code>declara as pessoas que interagem com o sistema, e cada caso de uso nomeado representa uma fun\u00e7\u00e3o. O systemBoundary<\/code>agrupa essas fun\u00e7\u00f5es sob o Sistema ATM. As setas mostram quais fun\u00e7\u00f5es cada ator pode acessar, enquanto direction LR<\/code>solicita um layout da esquerda para a direita.<\/p>\n
Por que usar o Mermaid para diagramas de casos de uso?<\/h2>\n
Um diagrama baseado em texto pode ser pr\u00e1tico quando voc\u00ea deseja um modelo que seja f\u00e1cil de revisar junto com requisitos, documenta\u00e7\u00e3o ou c\u00f3digo. Em vez de reposicionar formas manualmente, voc\u00ea pode alterar um r\u00f3tulo, adicionar um ator ou atualizar uma rela\u00e7\u00e3o na fonte. Isso torna o Mermaid \u00fatil tanto para discuss\u00f5es iniciais de design quanto para manter os diagramas atualizados conforme o sistema evolui.<\/p>\n
Diagramas de casos de uso podem ajudar gerentes de produto, analistas de neg\u00f3cios, desenvolvedores, arquitetos e partes interessadas a construir uma vis\u00e3o compartilhada do escopo do sistema. Eles podem facilitar a discuss\u00e3o de quest\u00f5es como:<\/p>\n