100% in your browser · your files never leave your device

UML Class Diagram Maker — Fields, Methods & Relations

Describe classes with fields and methods and draw inheritance, realization, composition, and aggregation. Mermaid-style source or table editor. No upload.

Loading tool…

More tools

All free, all private — everything runs in your browser.

Makers

Mermaid Editor

Write Mermaid-style diagram code with a live preview, friendly syntax errors, zoom and pan, and PNG/SVG export. 100% in your browser.

Makers

Flowchart Maker

Build flowcharts interactively: add nodes, drag them, connect arrows, edit labels, then export PNG or SVG. Free, private, nothing uploaded.

Makers

Sequence Diagram

Type actors and messages in a small documented DSL and get a rendered sequence diagram with lifelines and arrows. Export PNG/SVG, 100% private.

Makers

ER Diagram

Paste CREATE TABLE statements (or use the table editor) and get an entity-relationship diagram with foreign-key crow's-foot connectors. PNG/SVG export.

Makers

Gantt Chart

Turn a simple task list (name, start, end, dependencies) into a Gantt chart with correct local date math. Export PNG/SVG. Free and private.

Makers

Mind Map

Type an indented outline and watch it become a mind map. Add branches by indenting, export PNG or SVG. Works offline, nothing uploaded.

How to use UML Class Diagram

  1. 1Describe each class in a block: class Animal { … } with one field or method per line (+ marks public).
  2. 2Add relations between classes: Animal <|-- Dog (inheritance), ..|> realization, *-- composition, o-- aggregation, -- association.
  3. 3Prefer forms? Use the table editor — it generates the classDiagram source for you; switch views to hand-tune it.
  4. 4Export PNG or SVG. The same source always regenerates the identical SVG.

UML Class Diagram FAQ

Which UML relations are supported?
Inheritance (`<|--`), realization (`..|>`), composition (`*--`), aggregation (`o--`), and plain association (`--`), each drawn with the correct UML arrowhead or diamond.
Do I have to write code?
No — the built-in table editor generates the classDiagram source for you: add classes, fields, and methods in form fields and switch to the source view to see (or hand-tune) the generated text.
Can it render existing Mermaid classDiagram files?
It renders the core subset those files use in practice (class blocks with members plus the five relation kinds). Unsupported lines produce a friendly, line-numbered error instead of a broken render.