Mermaid class diagram syntax: classes, members and relationships with examples

A class diagram is a UML view of a system's types: what each class holds, what it can do, and how the classes relate. Mermaid's classDiagram draws it from a compact text form, so the diagram can live beside the code it describes.

Everything on this page is rendered by makesPDF's own Mermaid renderer — the same code that draws a ```mermaid block in a PDF.

Classes and members

class Name { … } declares a class; each line inside the body is one member. A member containing ( is drawn as a method, anything else as an attribute:

classDiagram
  class Document {
    +String title
    +Page[] pages
    +render() PDF
  }
  class Page {
    +Element[] children
    +layout()
  }

A class needs no body — class Foo on its own is valid — and naming a class in a relationship declares it implicitly.

Visibility and types

The first character of a member is its visibility marker: + public, - private, # protected, ~ package. The type and the name follow in whichever order your language's convention uses — Mermaid draws the text as written:

classDiagram
  class ApiKey {
    -String hash
    +Date createdAt
    +validate(token) bool
  }

Annotations

A <<annotation>> line inside the body labels the class as a stereotype — <<interface>>, <<abstract>>, <<service>>, or any text you choose:

classDiagram
  class Renderer {
    <<interface>>
    +render() PDF
  }
  class PdfRenderer {
    +render() PDF
  }
  Renderer <|.. PdfRenderer

<|.. is a dotted line with a hollow triangle at the Renderer end: realization, the way a class implements an interface.

Relationships

Each relation is A <marker>-- B, optionally labelled after a colon:

• A <|-- B — inheritance.
• A *-- B — composition.
• A o-- B — aggregation.
• A --> B — association.
• A ..> B — dependency (dotted).
• A <|.. B — realization (dotted inheritance).

classDiagram
  Animal <|-- Dog
  Animal <|-- Cat
  Owner o-- Animal
  Animal ..> Vet

Cardinality goes in quotes at either end of the relation — Owner "1" o-- "*" Animal — and direction LR on its own line lays the boxes out left to right instead of top down.

Not supported in makesPDF yet: a relation label (Animal --> Vet : treats) is parsed but not drawn, and of a pair of cardinality labels only the one written at the source end — the first of the two — appears. Class notes (note for Document "…") and namespace groupings are parsed but not drawn — a namespace's classes appear without a frame around them. Per-class styling (cssClass, classDef) is accepted but not applied, so every class uses the theme's fill.