Skip to content
English
All tools

Categories

Developer ToolsEncoding & DecodingJSON & DataHash & ChecksumText ToolsDate & TimeNetwork ToolsFile ToolsMarkdown & Diagrams

Class Diagram Generator

Write classDiagram code with classes, members and relations and see the UML diagram immediately.

Processed locally in your browser

Options
0 chars · 0 lines
The result will appear here.

What is Class Diagram Generator?

A UML class diagram documents the structure of an object-oriented model: classes with their attributes and methods, and the relations between them such as inheritance, composition, aggregation and association with multiplicity.

This tool renders Mermaid classDiagram code with the sample already showing an inheritance tree and a labelled association. The direction option (top-bottom, left-right, bottom-top, right-left) safely inserts or replaces the "direction" statement of your code, and the theme option changes the colors. Syntax errors are reported with the line and the token that was expected.

How does it work?

  1. Edit the classDiagram code: define each class with a { } block and one member per line.
  2. Add relations such as "Animal <|-- Dog" or "Owner \"1\" --> \"*\" Animal : owns".
  3. Pick the layout direction and a theme.
  4. Export the diagram as SVG or PNG for design documents and slides.

Common use cases

  • Documenting the domain model of a service in a design document.
  • Explaining an inheritance hierarchy or design pattern to teammates.
  • Sketching classes before writing code, then keeping the Mermaid source in the repository.
  • Preparing UML figures for coursework or a technical article.

Examples

Try this input in the tool above:

classDiagram
    direction TB
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +fetch() void
    }
    class Cat {
        +climb() void
    }
    class Owner {
        +String name
        +adopt(Animal pet) void
    }
    Animal <|-- Dog
    Animal <|-- Cat
    Owner "1" --> "*" Animal : owns

Privacy

Class Diagram Generator runs entirely in your browser. The text or files you provide are processed on your device and are not uploaded, logged or stored on our servers.

Limitations

This tool needs Mermaid classDiagram code; there is no plain-outline shortcut for classes. Mermaid implements a practical UML subset and does not check that your model is semantically correct.

Frequently asked questions

Which relation arrows are available?

<|-- inheritance, *-- composition, o-- aggregation, --> association, -- link, ..> dependency, ..|> realization and .. dashed link. Add labels after a colon and multiplicities in quotes.

How do I mark visibility?

Prefix members with + for public, - for private, # for protected and ~ for package. Add () to make a member a method, for example +makeSound() void.

What does the direction option change?

It sets the "direction" line inside classDiagram (TB, BT, LR or RL). If your code has none, the line is added right after the classDiagram keyword.

Related tools

More tools in Markdown & Diagrams →