{"id":2112,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/pt\/docs\/uncategorized\/mermaid-js-class-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-class-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/pt\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/","title":{"rendered":"Guia de Sintaxe de Diagrama de Classes do Mermaid.js"},"content":{"rendered":"

O que \u00e9 um Diagrama de Classes?<\/h2>\n

Um Diagrama de Classes<\/strong> \u00e9 um diagrama UML<\/strong> que visualiza a arquitetura est\u00e1tica de um sistema de software orientado a objetos. Como um tipo de diagrama UML indispens\u00e1vel, ele mapeia as classes individuais, interfaces e modelos de dados dentro do seu aplicativo, documentando explicitamente seus campos internos (atributos), fun\u00e7\u00f5es operacionais (m\u00e9todos) e as rela\u00e7\u00f5es estruturais que as unem. Este plano \u00e9 vital para engenheiros de software que precisam traduzir designs de dom\u00ednio de alto n\u00edvel em estruturas de objetos limpas e sustent\u00e1veis.tipo de diagrama UML<\/strong>ele mapeia as classes individuais, interfaces e modelos de dados dentro do seu aplicativo, documentando explicitamente seus campos internos (atributos), fun\u00e7\u00f5es operacionais (m\u00e9todos) e as rela\u00e7\u00f5es estruturais que as unem. Este plano \u00e9 vital para engenheiros de software que precisam traduzir designs de dom\u00ednio de alto n\u00edvel em estruturas de objetos limpas e sustent\u00e1veis.<\/p>\n

Com Mermaid.js<\/strong>voc\u00ea pode esbo\u00e7ar seus modelos de dados e servi\u00e7os do sistema usando defini\u00e7\u00f5es intuitivas baseadas em texto. O motor de layout calcula automaticamente os tamanhos das caixas, estrutura compartimentos padr\u00e3o de dados UML e alinha setas relacionais em toda a sua tela sem qualquer sobrecarga de formata\u00e7\u00e3o manual.<\/p>\n

Guia de Sintaxe B\u00e1sica: Elementos e Constru\u00e7\u00f5es<\/h2>\n

Para criar um diagrama de classes UML preciso e compat\u00edvel com padr\u00f5es no Mermaid, voc\u00ea deve dominar as declara\u00e7\u00f5es de membros, modificadores de acesso e setas de relacionamento estrutural.<\/p>\n

1. Declarando Classes e Compartimentos de Classe<\/h3>\n

Voc\u00ea pode definir uma classe usando dois formatos v\u00e1lidos. Para uma classe simples, use a palavra-chave class<\/code>seguida pelo nome da classe. Se voc\u00ea quiser incluir campos e m\u00e9todos imediatamente, use chaves finais para criar um bloco de corpo claro:<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar 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 
classDiagram\r\n    class UserProfile {\r\n        +String username\r\n        +String email\r\n        +updateEmail(newEmail) void\r\n    }<\/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 no VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Adicionando Visibilidade \/ Modificadores de Acesso<\/h3>\n
Para documentar as regras padr\u00e3o de encapsulamento UML, coloque um s\u00edmbolo espec\u00edfico diretamente antes do nome do atributo ou m\u00e9todo para definir seu n\u00edvel de visibilidade:<\/p>\n