Crie diagramas de classes UML com sintaxe Mermaid. Classes, interfaces, herança, composição e modificadores de visibilidade. Visualização ao vivo.
Carregando editor...
A visualização do diagrama aparecerá aqui...
Diagramas de classes mostram a estrutura de um sistema mapeando classes, seus atributos e métodos, e as relações entre elas. São o diagrama UML padrão para documentar designs orientados a objetos, bibliotecas cliente de API e modelos de domínio. Mermaid os renderiza a partir de uma definição textual que se lê como uma versão simplificada do código em si.
classDiagram
class UserService {
-UserRepository repo
-Logger logger
+getUser(id) User
+createUser(data) User
+deleteUser(id) void
-válidate(data) bool
}
Cada linha dentro do bloco de classe define um membro. O formato é visibilidade nome tipo para campos e visibilidade nome(parâmetros) tipoRetorno para métodos.
| Símbolo | Significado | Termo UML |
|---|---|---|
+ |
Público | Acessível de qualquer lugar |
- |
Privado | Apenas interno à classe |
# |
Protegido | Classe e subclasses |
~ |
Pacote | Mesmo pacote/módulo |
Relacionamentos são desenhados entre classes usando sintaxe de seta:
classDiagram
Animal <|-- Dog : extends
Animal <|-- Cat : extends
Dog *-- Leg : has
Owner o-- Pet : owns
Kennel --> Dog : houses
Animal ..> Food : depends on
| Sintaxe | Tipo | Significado |
|---|---|---|
| `A < | – B` | Herança |
| `A < | .. B` | Realização |
A *-- B |
Composição | B é parte de A, ciclo de vida vinculado |
A o-- B |
Agregação | B pertence a A, pode existir sozinho |
A --> B |
Associação | A referencia B |
A ..> B |
Dependência | A usa B temporariamente |
Adicione rótulos de multiplicidade aos relacionamentos:
Customer "1" --> "*" Order : places
Order "1" *-- "1..*" LineItem : contains
Valores comuns de cardinalidade: "1", "0..1", "*", "1..*", "0..*".
Marque classes como abstratas, interface, enumeração ou qualquer estereótipo personalizado:
classDiagram
class Shape {
<<abstract>>
+área() double
+perimeter() double
}
class Drawable {
<<interface>>
+draw(canvas) void
}
class Color {
<<enumeration>>
RED
GREEN
BLUE
}
Anotações renderizam em guillemets acima do nome da classe.
Use tiles em vez de colchetes angulares:
classDiagram
class Repository~T~ {
+findById(id) T
+findAll() List~T~
+save(entity T) T
+delete(id) void
}
class UserRepository {
+findByEmail(email) User
}
Repository~T~ <|-- UserRepository
Repository~T~ renderiza como Repository<T>.
classDiagram
class Repository~T~ {
<<interface>>
+findById(id) T
+save(entity) T
+delete(id) void
}
class UserRepository {
<<interface>>
+findByEmail(email) User
}
class PostgresUserRepository {
-DataSource ds
+findById(id) User
+findByEmail(email) User
+save(entity) User
+delete(id) void
}
Repository~T~ <|.. UserRepository
UserRepository <|.. PostgresUserRepository
classDiagram
class EventEmitter {
-Map~String, List~Handler~~ listeners
+on(event, handler) void
+emit(event, data) void
+off(event, handler) void
}
class Handler {
<<interface>>
+handle(data) void
}
class LogHandler {
+handle(data) void
}
class MetricsHandler {
+handle(data) void
}
EventEmitter o-- Handler
Handler <|.. LogHandler
Handler <|.. MetricsHandler
Para documentar como essas classes interagem em tempo de execução, use o Diagrama de Sequência Mermaid. Para as tabelas de banco de dados por trás do seu modelo de domínio, tente o Diagrama ER Mermaid.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.