Mermaid Class Diagram Syntax Guide: Complete Reference with Examples

Mermaid is a text-based diagramming language supported by GitHub, GitLab, Notion, Obsidian, and dozens of other tools. Its class diagram syntax lets you write UML in plain text and render it anywhere those tools are used — or in a standalone browser tool like Badger.

This is a complete reference for Mermaid class diagram syntax, organized from the basics through relationships, visibility, cardinality, and notes. Every section includes a copy-paste example.

Starting a Mermaid Class Diagram

Every Mermaid class diagram starts with the keyword classDiagram on its own line:

classDiagram
  class User

This renders a single empty class box labeled "User". Everything else goes below classDiagram, indented with two spaces or a tab.

In GitHub READMEs and other Markdown environments you wrap the block in a fenced code block with mermaid as the language tag. In the Badger Class Diagram tool, you paste just the diagram content without the code fence — the tool handles rendering automatically.

Defining Classes with Attributes and Methods

Define a class with curly braces to add members:

classDiagram
  class BankAccount {
    +String owner
    +float balance
    +deposit(amount) void
    +withdraw(amount) bool
  }

The format for members:

• Attributes: Type name (e.g., String owner)
• Methods: name(params) ReturnType (e.g., deposit(amount) void)

You can also add members outside the curly braces using colon notation — useful for adding members to a class defined elsewhere:

BankAccount : +String iban
BankAccount : +getBalance() float

Visibility Modifiers: Public, Private, Protected, Package

Add a visibility symbol before each member name:

Symbol	Visibility
+	Public
-	Private
#	Protected
~	Package / Internal

Example with mixed visibility:

classDiagram
  class Employee {
    +String name
    -float salary
    #int department
    ~String internalCode
    +getName() String
    -calculateBonus() float
  }

Sell Custom Apparel — We Handle Printing & Free Shipping

Relationship Syntax for All Six Types

Relationships go between class names, one per line. The notation determines the type:

classDiagram
  Animal <|-- Dog
  House *-- Room
  Team o-- Player
  Customer --> Order
  Service ..> Logger
  Printable ..|> Document

Quick syntax reference:

Syntax	Relationship
<|--	Inheritance (A extends B)
*--	Composition (B dies with A)
o--	Aggregation (B lives on)
-->	Association (A uses B)
..>	Dependency (temporary use)
..|>	Realization (A implements B)

You can add a label to any relationship by appending a colon and the label text:

Customer --> Order : places

Cardinality Labels (Multiplicity)

Add quoted numbers to both ends of a relationship line to specify cardinality:

classDiagram
  Customer "1" --> "0..*" Order : places
  Order "1" *-- "1..*" OrderItem : contains

Common cardinality notations:

• "1" — exactly one
• "0..1" — zero or one
• "1..*" — one or more
• "*" or "0..*" — zero or more
• "n" — a specific fixed number

Cardinality is optional but makes diagrams much more precise — always add it when the quantity constraints matter for design.

Namespaces, Notes, Abstract Classes, and Interfaces

Mark a class as abstract by adding <<abstract>> below the class name:

classDiagram
  class Shape {
    <<abstract>>
    +draw() void
  }

Mark an interface with <<interface>>:

classDiagram
  class Serializable {
    <<interface>>
    +serialize() String
  }

Add a note to a class with the note keyword:

note for User "This class handles authentication"

Group classes into namespaces to organize large diagrams:

classDiagram
  namespace Auth {
    class User
    class Session
  }

Frequently Asked Questions

Does Mermaid class diagram syntax work in GitHub READMEs?

Yes. GitHub natively renders Mermaid diagrams in Markdown files. Wrap your classDiagram block in a code fence with mermaid as the language identifier and it renders automatically.

How do I mark a class as abstract in Mermaid?

Add <> on a line inside the class definition: class Shape { <> +draw() void }. Use <> for interfaces.

Can I add labels to relationship lines in Mermaid?

Yes. Add a colon and label text after the relationship notation: Customer --> Order : places. The label appears on the connecting line in the rendered diagram.

Where can I use Mermaid class diagram syntax besides the online tool?

Mermaid is supported natively in GitHub READMEs, GitLab, Notion, Obsidian, Confluence (via plugin), VS Code (via extension), and many documentation platforms. Learning the syntax here means you can use it everywhere.