{"id":12349,"date":"2026-10-13T15:47:48","date_gmt":"2026-10-13T07:47:48","guid":{"rendered":"https:\/\/www.cybermedian.com\/pt\/diagram-as-code-uml-sequence-diagrams-with-plantuml-and-vpascode\/"},"modified":"2026-10-14T13:08:38","modified_gmt":"2026-10-14T05:08:38","slug":"diagram-as-code-uml-sequence-diagrams-with-plantuml-and-vpascode","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/pt\/diagram-as-code-uml-sequence-diagrams-with-plantuml-and-vpascode\/","title":{"rendered":"Diagramas como C\u00f3digo: Diagramas de Sequ\u00eancia UML com PlantUML e VPasCode"},"content":{"rendered":"

Um UML<\/a> diagrama de sequ\u00eancia<\/a>mostra como os participantes interagem ao longo do tempo. \u00c9 \u00fatil para documentar um caso de uso<\/a>, fluxo de API, processo de neg\u00f3cios ou cen\u00e1rio de sistema. O tempo geralmente avan\u00e7a de cima para baixo; a posi\u00e7\u00e3o horizontal mostra quem participa, n\u00e3o uma medida precisa do tempo decorrido.<\/p>\n

PlantUML<\/a>permite descrever o diagrama como texto. VPasCode Edito do Visual Paradigm<\/a>r combina um editor de c\u00f3digo com uma visualiza\u00e7\u00e3o ao vivo e assist\u00eancia de IA para gerar, modificar e corrigir c\u00f3digo de diagrama. Um bom fluxo de trabalho \u00e9 usar a IA para obter um rascunho inicial e, em seguida, inspecionar e refinar o PlantUML voc\u00ea mesmo.<\/p>\n

\"Diagrama<\/p>\n

1. A estrutura b\u00e1sica<\/h2>\n

Um diagrama de sequ\u00eancia PlantUML<\/a>come\u00e7a com @startuml<\/code> e termina com @enduml<\/code>. Os participantes geralmente s\u00e3o listados antes das mensagens para que voc\u00ea possa controlar seus nomes e ordem.<\/p>\n

\"Interface<\/p>\n

\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML no VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\n
\nPlantUML<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML no 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\nator Cliente\r\nparticipante Navegador\r\nparticipante \"API de Pedidos\" como API\r\ndatabase \"Banco de Dados de Pedidos\" como DB\r\n\r\nCliente -> Navegador: Fazer pedido\r\nNavegador -> API: POST \/pedidos\r\nAPI -> DB: Salvar pedido\r\nDB --> API: ID do Pedido\r\nAPI --> Navegador: 201 Criado\r\nNavegador -> Cliente: Exibir confirma\u00e7\u00e3o\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 no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar PlantUML no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
O r\u00f3tulo exibido do participante pode ser aspas, com como<\/code> fornecendo um alias mais curto para uso em mensagens. Palavras-chave comuns de participante incluem ator<\/code>, participante<\/code>, fronteira<\/code>, controle<\/code>, entidade<\/code>, banco de dados<\/code>, e cole\u00e7\u00f5es<\/code>. Use a palavra-chave que melhor comunique o papel do participante; ela n\u00e3o imp\u00f5e uma arquitetura espec\u00edfica.<\/p>\n
2. Leitura de mensagens e tempo<\/h2>\n
Cada mensagem \u00e9 escrita como um remetente, uma seta, um destinat\u00e1rio e um r\u00f3tulo. A ordem das linhas de mensagem determina sua ordem vertical no diagrama.<\/p>\n
\"Diagrama<\/p>\n