Mermaid Diagram Editor

Q: Can inheritance between classes be represented?

Yes, with the <|-- arrow, which follows the UML notation of a hollow triangle pointing from the subclass to the superclass.

Q: What do the quoted numbers on relationships mean?

They represent the relationship's multiplicity, similar to relational databases: "1" means exactly one, "*" means many, and other notations like "0..1" or "1..*" are also accepted.

Continue in the tool

Open full tool

More pages for this tool

class diagram online

Online class diagram with Mermaid

Mermaid classDiagram syntax follows classic UML notation: classes with attributes and methods in separate compartments, visibility symbols and relationships with multiplicity. This preset already loads a Usuario and Pedido example.

Class diagram syntax

Each class is declared with class Name { ... }, and attributes and methods go inside the braces, one per line. The symbol before the name sets UML-style visibility: + for public, - for private and # for protected, as in +String nome (public attribute of type String) or +autenticar() bool (public method returning bool).
Relationships between classes sit outside the blocks, like Usuario "1" --> "*" Pedido : realiza, which represents an association where one Usuario links to many (multiplicity "*") Pedido, with the "realiza" label describing the relationship. Other standard UML arrows are also supported, like --|> for inheritance and --* for composition.
Besides inheritance (<|--) and plain association (-->), Mermaid distinguishes composition from aggregation: *-- represents composition, where the part cannot exist without the whole (like Pedido *-- ItemPedido), and o-- represents aggregation, where the part can exist independently (like Pedido o-- Cliente). A weaker dependency, where one class only uses another temporarily, uses the dotted ..> arrow, and a plain link with no arrowhead uses just two dashes (--). Realization, the relationship between a class and the interface it implements, borrows the hollow triangle from inheritance but draws it with a dashed line: ..|>.

Example variations

Add inheritance

Input: class PedidoUrgente Pedido <|-- PedidoUrgente
Expected output: seta de herança apontando para a classe base

The <|-- arrow represents UML-style inheritance, with the triangle pointing at the superclass.

Mark a class as an interface

Input: <<interface>> Autenticavel
Expected output: estereótipo exibido acima do nome da classe

The <<interface>> annotation before the class name adds a UML stereotype shown at the top of the block.

Tell composition from aggregation apart

Input: Pedido *-- ItemPedido
Expected output: seta com losango preenchido (composição)

The filled diamond on the whole's side (Pedido) shows that ItemPedido stops existing if Pedido is removed; aggregation (o--) uses the same diamond, but hollow, for a looser relationship.

Full tool FAQ

What is Mermaid?

Mermaid is an open-source JavaScript library that turns plain text, written in its own Markdown-like syntax, into diagrams rendered as SVG. Instead of manually drawing boxes and arrows in a graphics tool, you describe the diagram's structure in a few lines of text and the library computes the layout and draws the result.

Does any of my data leave the browser when using this tool?

Which diagram types does this tool support?

How do I fix a syntax error in my diagram?

Can the diagram be exported or embedded elsewhere?

Does this tool use the 'official' Mermaid syntax?

Is there a size or performance limit for diagrams?

Does the editor work well on mobile?

Frequently asked questions

Are the +, - and # symbols required before every attribute?

They are not required, but they are the standard way to indicate visibility UML-style; without them, Mermaid still draws the attribute or method, just without the visibility symbol next to it.

Can inheritance between classes be represented?

Yes, with the <|-- arrow, which follows the UML notation of a hollow triangle pointing from the subclass to the superclass.

What do the quoted numbers on relationships mean?

They represent the relationship's multiplicity, similar to relational databases: "1" means exactly one, "*" means many, and other notations like "0..1" or "1..*" are also accepted.

Next steps

Class diagram syntax

Each class is declared with class Name { ... }, and attributes and methods go inside the braces, one per line. The symbol before the name sets UML-style visibility: + for public, - for private and # for protected, as in +String nome (public attribute of type String) or +autenticar() bool (public method returning bool).

Relationships between classes sit outside the blocks, like Usuario "1" --> "*" Pedido : realiza, which represents an association where one Usuario links to many (multiplicity "*") Pedido, with the "realiza" label describing the relationship. Other standard UML arrows are also supported, like --|> for inheritance and --* for composition.

Besides inheritance (<|--) and plain association (-->), Mermaid distinguishes composition from aggregation: *-- represents composition, where the part cannot exist without the whole (like Pedido *-- ItemPedido), and o-- represents aggregation, where the part can exist independently (like Pedido o-- Cliente). A weaker dependency, where one class only uses another temporarily, uses the dotted ..> arrow, and a plain link with no arrowhead uses just two dashes (--). Realization, the relationship between a class and the interface it implements, borrows the hollow triangle from inheritance but draws it with a dashed line: ..|>.

Example variations

Add inheritance

Input: class PedidoUrgente Pedido <|-- PedidoUrgente
Expected output: seta de herança apontando para a classe base

The <|-- arrow represents UML-style inheritance, with the triangle pointing at the superclass.

Mark a class as an interface

Input: <<interface>> Autenticavel
Expected output: estereótipo exibido acima do nome da classe

The <<interface>> annotation before the class name adds a UML stereotype shown at the top of the block.

Tell composition from aggregation apart

Input: Pedido *-- ItemPedido
Expected output: seta com losango preenchido (composição)

The filled diamond on the whole's side (Pedido) shows that ItemPedido stops existing if Pedido is removed; aggregation (o--) uses the same diamond, but hollow, for a looser relationship.

Full tool FAQ

What is Mermaid?

Does any of my data leave the browser when using this tool?

Which diagram types does this tool support?

How do I fix a syntax error in my diagram?

Can the diagram be exported or embedded elsewhere?

Does this tool use the 'official' Mermaid syntax?

Is there a size or performance limit for diagrams?

Does the editor work well on mobile?

Frequently asked questions

Are the +, - and # symbols required before every attribute?

They are not required, but they are the standard way to indicate visibility UML-style; without them, Mermaid still draws the attribute or method, just without the visibility symbol next to it.

Can inheritance between classes be represented?

Yes, with the <|-- arrow, which follows the UML notation of a hollow triangle pointing from the subclass to the superclass.

What do the quoted numbers on relationships mean?

They represent the relationship's multiplicity, similar to relational databases: "1" means exactly one, "*" means many, and other notations like "0..1" or "1..*" are also accepted.