Class Diagram

Free Online UML Class Diagram Maker

Design object-oriented systems with UML class diagrams. Visualize classes, inheritance, and relationships as you type.

Try it live 

classDiagram
    class Vehicle {
        <<abstract>>
        +String make
        +String model
        +int year
        +start() void
        +stop() void
    }
    class Car {
        +int doors
        +String transmission
        +honk() void
    }
    class Truck {
        +float payload
        +int axles
        +loadCargo() void
    }
    class ElectricVehicle {
        <<interface>>
        +int batteryCapacity
        +charge() void
        +getRange() int
    }
    class ElectricCar {
        +int chargingPort
        +autopilot() void
    }

    Vehicle <|-- Car
    Vehicle <|-- Truck
    ElectricVehicle <|.. ElectricCar
    Car <|-- ElectricCar

When to use class diagram

OOP design

Model class hierarchies, interfaces, and relationships before writing code.

Code documentation

Generate visual documentation of your existing codebase architecture.

System architecture

Communicate software design patterns and component structure to your team.

Key syntax

classDiagramDeclare diagram type
class Name { }Define a class
<<abstract>>Mark class as abstract
<<interface>>Mark as interface
+method() typePublic method
-field typePrivate field
#field typeProtected field
A <|-- BB inherits from A
A <|.. BB implements A
A *-- BComposition
A o-- BAggregation

How to create a class diagram with Mermaid

1

Open FlowViz and start with classDiagram.

2

Define a class: class ClassName {.

3

Add attributes inside: +String name or -int count.

4

Add methods: +methodName() returnType.

5

Use <<abstract>> or <<interface>> stereotypes on their own line inside the class.

6

Close the class with }.

7

Define relationships: ClassName1 <|-- ClassName2 for inheritance.

8

Add labels to relationships with : "description" at the end.

Start diagramming now

No signup. No install. Just open the editor and start writing.