Editor de Diagramas Mermaid

Q: É possível representar herança entre classes?

Sim, com a seta <|--, que segue a notação UML de um triângulo vazado apontando da subclasse para a superclasse.

Q: O que os números entre aspas nas relações significam?

Representam a multiplicidade da relação, como em bancos de dados relacionais: "1" indica exatamente um, "*" indica muitos, e outras notações como "0..1" ou "1..*" também são aceitas.

Continuar na ferramenta

Abrir ferramenta completa

Mais páginas desta ferramenta

diagrama de classes online

Diagrama de classes online com Mermaid

A sintaxe classDiagram do Mermaid segue a notação clássica de UML: classes com atributos e métodos em compartimentos separados, símbolos de visibilidade e relações com multiplicidade. Este preset já carrega um exemplo de Usuário e Pedido.

A sintaxe do diagrama de classes

Cada classe é declarada com class Nome { ... }, e dentro das chaves ficam os atributos e métodos, um por linha. O símbolo antes do nome define a visibilidade no padrão UML: + para público, - para privado e # para protegido, como em +String nome (atributo público do tipo String) ou +autenticar() bool (método público que retorna bool).
As relações entre classes ficam fora dos blocos, como Usuario "1" --> "*" Pedido : realiza, que representa uma associação onde um Usuario está ligado a vários (multiplicidade "*") Pedido, com o rótulo "realiza" descrevendo a relação. Outras setas do padrão UML também são suportadas, como --|> para herança e --* para composição.
Além de herança (<|--) e associação simples (-->), o Mermaid distingue composição de agregação: *-- representa composição, quando a parte não existe sem o todo (como Pedido *-- ItemPedido), e o-- representa agregação, quando a parte pode existir de forma independente (como Pedido o-- Cliente). Uma dependência mais fraca, em que uma classe apenas usa outra temporariamente, usa a seta pontilhada ..>, e um vínculo simples sem seta usa apenas dois traços (--).

Variações do exemplo

Adicionar herança

Entrada: class PedidoUrgente Pedido <|-- PedidoUrgente
Saída esperada: seta de herança apontando para a classe base

A seta <|-- representa herança no padrão UML, com o triângulo apontando para a superclasse.

Marcar uma classe como interface

Entrada: <<interface>> Autenticavel
Saída esperada: estereótipo exibido acima do nome da classe

A anotação <<interface>> antes do nome da classe adiciona um estereótipo UML visível no topo do bloco.

Diferenciar composição de agregação

Entrada: Pedido *-- ItemPedido
Saída esperada: seta com losango preenchido (composição)

O losango preenchido do lado do todo (Pedido) indica que ItemPedido deixa de existir se Pedido for removido; a agregação (o--) usa o mesmo losango, mas vazado, para uma relação mais solta.

FAQ da ferramenta completa

O que é Mermaid?

Mermaid é uma biblioteca JavaScript de código aberto que transforma texto simples, escrito em uma sintaxe própria parecida com Markdown, em diagramas renderizados como SVG. Em vez de desenhar caixas e setas manualmente em uma ferramenta gráfica, você descreve a estrutura do diagrama em algumas linhas de texto e a biblioteca calcula o layout e desenha o resultado.

Algum dado meu sai do navegador ao usar esta ferramenta?

Quais tipos de diagrama esta ferramenta suporta?

Como eu corrijo um erro de sintaxe no meu diagrama?

Dá para exportar ou incorporar o diagrama em outro lugar?

Esta ferramenta usa a sintaxe 'oficial' do Mermaid?

Existe algum limite de tamanho ou desempenho para os diagramas?

O editor funciona bem no celular?

Perguntas frequentes

Os símbolos +, - e # são obrigatórios antes de cada atributo?

Não são obrigatórios, mas são a forma padrão de indicar visibilidade no estilo UML; sem eles, o Mermaid ainda desenha o atributo ou método, só sem o símbolo de visibilidade ao lado.

É possível representar herança entre classes?

Sim, com a seta <|--, que segue a notação UML de um triângulo vazado apontando da subclasse para a superclasse.

O que os números entre aspas nas relações significam?

Representam a multiplicidade da relação, como em bancos de dados relacionais: "1" indica exatamente um, "*" indica muitos, e outras notações como "0..1" ou "1..*" também são aceitas.

Próximos passos

A sintaxe do diagrama de classes

Cada classe é declarada com class Nome { ... }, e dentro das chaves ficam os atributos e métodos, um por linha. O símbolo antes do nome define a visibilidade no padrão UML: + para público, - para privado e # para protegido, como em +String nome (atributo público do tipo String) ou +autenticar() bool (método público que retorna bool).

As relações entre classes ficam fora dos blocos, como Usuario "1" --> "*" Pedido : realiza, que representa uma associação onde um Usuario está ligado a vários (multiplicidade "*") Pedido, com o rótulo "realiza" descrevendo a relação. Outras setas do padrão UML também são suportadas, como --|> para herança e --* para composição.

Além de herança (<|--) e associação simples (-->), o Mermaid distingue composição de agregação: *-- representa composição, quando a parte não existe sem o todo (como Pedido *-- ItemPedido), e o-- representa agregação, quando a parte pode existir de forma independente (como Pedido o-- Cliente). Uma dependência mais fraca, em que uma classe apenas usa outra temporariamente, usa a seta pontilhada ..>, e um vínculo simples sem seta usa apenas dois traços (--).

Variações do exemplo

Adicionar herança

Entrada: class PedidoUrgente Pedido <|-- PedidoUrgente
Saída esperada: seta de herança apontando para a classe base

A seta <|-- representa herança no padrão UML, com o triângulo apontando para a superclasse.

Marcar uma classe como interface

Entrada: <<interface>> Autenticavel
Saída esperada: estereótipo exibido acima do nome da classe

A anotação <<interface>> antes do nome da classe adiciona um estereótipo UML visível no topo do bloco.

Diferenciar composição de agregação

Entrada: Pedido *-- ItemPedido
Saída esperada: seta com losango preenchido (composição)

O losango preenchido do lado do todo (Pedido) indica que ItemPedido deixa de existir se Pedido for removido; a agregação (o--) usa o mesmo losango, mas vazado, para uma relação mais solta.

FAQ da ferramenta completa

O que é Mermaid?

Algum dado meu sai do navegador ao usar esta ferramenta?

Quais tipos de diagrama esta ferramenta suporta?

Como eu corrijo um erro de sintaxe no meu diagrama?

Dá para exportar ou incorporar o diagrama em outro lugar?

Esta ferramenta usa a sintaxe 'oficial' do Mermaid?

Existe algum limite de tamanho ou desempenho para os diagramas?

O editor funciona bem no celular?

Perguntas frequentes

Os símbolos +, - e # são obrigatórios antes de cada atributo?

Não são obrigatórios, mas são a forma padrão de indicar visibilidade no estilo UML; sem eles, o Mermaid ainda desenha o atributo ou método, só sem o símbolo de visibilidade ao lado.

É possível representar herança entre classes?

Sim, com a seta <|--, que segue a notação UML de um triângulo vazado apontando da subclasse para a superclasse.

O que os números entre aspas nas relações significam?

Representam a multiplicidade da relação, como em bancos de dados relacionais: "1" indica exatamente um, "*" indica muitos, e outras notações como "0..1" ou "1..*" também são aceitas.