Mermaid Class Diagram: Syntax, Examples & Templates

A class diagram shows the structure of object-oriented code — classes, their members, and how they relate through inheritance and association.

Open class diagram in the editor

A class diagram shows the static structure of object-oriented code: which classes exist, what data and behavior they carry, and how they relate through inheritance and association. It is most useful before code exists, in design reviews, and after it exists, in onboarding documentation.

Basic syntax

classDiagram opens the file. A class is declared either as a block — class Payment { ... } with members indented inside — or one member at a time with the Payment : +String currency form. Members use a compact notation: +float amount is a public attribute named amount of type float, and +process() is a public method. The + prefix is a visibility marker (- for private, # for protected); it is optional but makes diagrams match code conventions. Relationships are declared on their own lines, such as Payment <|-- CardPayment for inheritance.

Classes, members and relationships

The hollow-triangle arrow <|-- means “inherits from” and is the relationship you will use most. Read it left to right as “the left class is a specialization of the right one” — in the payment example, both card and PayPal payments are kinds of Payment, which is why the shared amount and currency live on the parent. Put members on the parent when every subclass needs them, and keep subclass blocks for what makes each one different. Mixing attributes and methods inside one class block is fine; the renderer recognizes methods by their parentheses.

Common gotchas

Method parentheses are required for a member to render as a method — +process without them renders as an attribute, which is a subtle and confusing mistake. Inheritance arrows point from child to parent; drawing them backwards produces a valid-looking diagram that documents the wrong thing. Class names should stay single CamelCase words: names with spaces or special characters need quoting, and generic types need the tilde form instead of angle brackets. Finally, resist modeling every getter and setter — a class diagram is a summary, not a mirror of the code, and ten members per class is usually past the point of usefulness.

Tips for mobile editing

Prefer the block form for classes with several members, and the one-line Class : member form when you are adding a single field to an existing diagram — it is one short line to type on a phone keyboard. Keep class names to single words so relationship lines stay short and tappable. When a hierarchy grows beyond four or five classes, split it by domain rather than by layer. The cheatsheet lists every arrow type with its meaning.

Class diagrams describe code structure; ER diagrams describe data structure at the storage level, and sequence diagrams describe runtime behavior. Together the three cover most software documentation needs.

Class Diagram templates

Every template opens in the editor with the code pre-filled — edit it on your phone or desktop.

class Strategy Pattern Class Diagram Show the strategy pattern with a payment gateway abstraction, two concrete implementations, and the service that depends on the interface.

class Domain Model Class Diagram Document a small order domain with customers, orders, line items, and products, including attributes, methods, and associations.

class API SDK Class Diagram Design an SDK class layout with a shared API client, a base resource class, and endpoint-specific subclasses that inherit from it.

class Inheritance Hierarchy Class Diagram Visualize a shape class hierarchy with a base class, subclasses, and an override chain that demonstrates inheritance at three levels.