elefcode

Mermaid diagram

Class Diagram — free online editor

Mermaid class diagrams model UML classes — their members, methods, and the relationships between them.

▶ Open in editor

What is a Mermaid class diagram?

Class diagrams document the structure of object-oriented code. Each class becomes a box listing fields (with visibility +, -, #) and methods. Relationship arrows show inheritance (`<|--`), composition (`*--`), aggregation (`o--`), and dependency (`<--`). Cardinality labels are also supported.

When to use it

  • ▸Document an object-oriented domain model
  • ▸Plan class hierarchy before coding
  • ▸Communicate architecture in a design review
  • ▸Generate UML from a quick code sketch

Syntax in one paragraph

Inside a class body: `+publicField : Type`, `-privateField`, `#protectedField`, `+method() Return`. Relationships: `A <|-- B` (B inherits A), `A *-- B` (composition), `A o-- B` (aggregation).

Example: Vehicle hierarchy with composition

classDiagram
    class Vehicle {
        +String make
        +String model
        +int year
        +start() void
        +stop() void
    }
    class Car {
        +int numDoors
        +drive() void
    }
    class ElectricCar {
        +int batteryKWh
        +charge() void
    }
    class Engine {
        +int cylinders
        +getHorsepower() int
    }
    Vehicle <|-- Car
    Car     <|-- ElectricCar
    Vehicle  *-- Engine
▶ Try this example in the editor

More Mermaid diagrams

Flowchart

A Mermaid flowchart visualizes a process as connected nodes and arrows — perfect for documenting algorithms, decision trees, and user journeys.

Sequence Diagram

Mermaid sequence diagrams show how participants exchange messages over time — ideal for API flows, auth handshakes, and protocol design.

ER Diagram

Mermaid ER diagrams model database schemas — tables, columns, and the relationships between them using crow's-foot cardinality.

State Diagram

Mermaid state diagrams visualize finite-state machines — perfect for UI states, workflow engines, and protocol design.

Gantt Chart

Mermaid Gantt charts plan projects across time — tasks, durations, dependencies, and milestones.

Pie Chart

Mermaid pie charts visualize a single dataset as proportional slices — the easiest Mermaid diagram to start with.

Git Graph

Mermaid Git graphs visualize branching workflows — commits, branches, merges, and tags — in a clean SVG diagram.

Mindmap

Mermaid mindmaps capture ideas around a central topic — branches grow outward by indentation alone, no UI dragging required.

Timeline

Mermaid timelines show events over time grouped into sections — great for histories, roadmaps, and onboarding stories.

Kanban Board

Mermaid 11 added native Kanban boards — list-based, version-controllable, and renderable straight from text.

Full Mermaid editor →

All 11+ diagram templates, live preview, themes