🧩 Mermaid

Diagrama de classes

Modele o seu domínio e a estrutura dos seus objetos

Abrir este exemplo no editor Gerar um com IA

O que é um Diagrama de classes?

Um diagrama de classes descreve os tipos de um sistema — atributos, métodos e relações: herança, composição, associação. É o clássico UML para a modelação de domínios e o desenho de código.

Os diagramas de classes dão o seu melhor nas revisões de desenho e no onboarding, quando quem chega precisa da forma do domínio antes do código. Mostram o que existe, o que cada tipo possui e de que depende — o acoplamento que uma árvore de pastas esconde. Nada dizem sobre a execução: nem ordem de chamadas, nem ciclo de vida, nem volumes. E um diagrama certo hoje fica errado depois da próxima refactorização, a menos que alguém o mantenha. Os tipos partilhados são redesenhados em cada diagrama que precisa deles.

Exemplo em tempo real

Código Mermaid

classDiagram
    class Order {
      +String id
      +Date createdAt
      +total() Money
    }
    class Customer {
      +String name
      +String email
    }
    class OrderLine {
      +int quantity
    }
    Customer "1" --> "*" Order
    Order "1" *-- "*" OrderLine

Exemplo em tempo real

Quando usar

Modelar um domínio antes de escrever código (DDD, desenho orientado a objetos)

Documentar bases de código existentes para o onboarding

Desenhar mapeamentos de objetos de base de dados e modelos de recursos de API

Erros frequentes

As setas de herança apontam para o pai

Animal <|-- Dog significa que Dog estende Animal: o triângulo vazado fica do lado da classe base. Escrever Dog <|-- Animal é válido e inverte a hierarquia em silêncio, algo que a revisão quase nunca apanha. Leia primeiro a ponta do triângulo: nomeia sempre o pai.

Os sinais de menor e maior engolem os genéricos

Um membro escrito +List<Item> lines aparece como +List lines, porque o navegador trata <Item> como uma etiqueta HTML. O Mermaid usa o til: +List~Item~ lines, e class Cart~Item~ para uma classe genérica.

Sem parênteses, os métodos viram atributos

O +save é desenhado no compartimento dos atributos e o +save() no dos métodos. São só os parênteses que decidem isso, não o tipo de retorno. O diagrama continua a renderizar, por isso o erro sobrevive à revisão — ponha os parênteses mesmo quando o método não recebe argumentos.

Sintaxe básica

.mmd

classDiagram
    class Animal {
      +String name
      +makeSound() void
    }
    Animal <|-- Dog : inheritance

class Invoice { -String id +total(Money vat) Money }
Prefixe os membros com + público, - privado, # protegido ou ~ pacote. Um tipo escrito depois dos parênteses é o tipo de retorno; sem parênteses, a linha é um atributo.
Customer "1" o-- "0..*" Invoice : owns
As cardinalidades vão entre aspas de cada lado e o rótulo a seguir aos dois pontos nomeia a relação. Leia-a no sentido em que a linha está escrita.
class Gateway { <<interface>> }
Um estereótipo entre duplos sinais de menor e maior marca uma interface, uma classe abstrata, uma enumeração ou um serviço. É renderizado numa linha própria, acima do nome da classe.
namespace Billing { class Invoice }
Um namespace agrupa classes numa caixa com rótulo, o que mantém legível um diagrama grande e reflete as fronteiras de pacote ou de módulo já usadas no código.

Perguntas sobre este diagrama

Que relações suporta o Mermaid?

Herança (<|--), composição (*--), agregação (o--), associação (-->), dependência (..>) e realização (..|>), cada uma com cardinalidades e rótulos opcionais.

Posso gerar um diagrama de classes a partir de código?

Cole as suas classes ou descreva o seu domínio: a IA extrai entidades, atributos e relações num diagrama de classes limpo.

Os diagramas de classes são renderizados no Notion ou no Confluence?

O Notion renderiza Mermaid dentro de um bloco de código. O Confluence não tem suporte nativo, por isso use uma macro do Marketplace ou cole um SVG exportado, que se mantém nítido em qualquer zoom e pode ser substituído no lugar quando o modelo muda.

Posso controlar onde o Mermaid coloca as classes?

Diretamente, não. A disposição é automática; as únicas alavancas são direction LR ou TB, agrupar classes em namespaces e reordenar as declarações de relações. Para uma disposição fixa, exporte o SVG e ajuste-o num editor vetorial.

Posso ligar uma classe ao seu ficheiro de código?

Sim. click Invoice href "https://github.com/org/repo/blob/main/Invoice.ts" "Open source" transforma a caixa numa ligação e acrescenta uma dica. A âncora vive dentro do SVG, por isso sobrevive a uma exportação em SVG e perde-se assim que exporta um PNG.

O Mermaid mostra membros abstratos ou estáticos?

Sim. Um asterisco final marca um membro como abstrato e um cifrão final marca-o como estático — +area()* float, +unit()$ Shape. São renderizados como o UML espera: itálico para abstrato, sublinhado para estático. Uma classe inteira leva um estereótipo <<abstract>> no corpo.

Diagrama de classes ou outro tipo de diagrama?

Diagrama de classes ou diagrama entidade-relação?

As mesmas caixas, públicos diferentes. Um diagrama entidade-relação descreve tabelas, colunas e chaves tal como existem na base de dados; um diagrama de classes descreve tipos, comportamento e herança tal como existem no código. Se as caixas têm métodos, é um diagrama de classes.

Diagrama de classes ou diagrama de estados?

Modelam o mesmo objeto de dois ângulos. O diagrama de classes diz o que uma encomenda é — os seus campos, as suas relações, os seus métodos. O diagrama de estados diz o que ela atravessa: rascunho, paga, expedida, e os eventos pelo meio. Domínios ricos precisam dos dois.

Explorar outros tipos de diagramas

🔀 Fluxograma 💬 Diagrama de sequência 🗄️ Diagrama entidade-relação 🔄 Diagrama de estados 📅 Gráfico de Gantt 🥧 Gráfico circular 🧠 Mapa mental 🌿 Grafo Git 🕰️ Linha do tempo 🚶 Jornada do utilizador 🎯 Gráfico de quadrantes

Crie já o seu Diagrama de classes

Descreva-o em linguagem natural — a IA escreve o código Mermaid por si.

Abrir o Mermaid Studio