Structure & data
Describe classes, fields, methods, and relationships in Mermaid and get a UML class diagram — live preview, local export, no sign-up.
There is no upload endpoint — your files are processed in this browser tab. Open your network tab and check. See how it stays private.
How to make a UML class diagram
- Define classes. List each class with its fields and methods.
- Add relationships. Connect classes with inheritance, association, or composition.
- Set multiplicity. Note cardinality like 1 to many where it matters.
- Export. Download SVG, PNG, or PDF.
A class diagram documents structure: the types in a system, what they hold and do, and how they relate. Sketching one in Mermaid is faster than a drawing tool because you write the classes and connectors and let the layout resolve.
The payoff is maintenance — a text diagram committed alongside the code stays accurate, where an exported image quietly rots. Visibility markers and multiplicity make it a real design artifact, not just a picture.
For database tables use the ER diagram, for behavior over time use the Sequence diagram, and to mix engines use the Playground.
Frequently asked questions
What relationships can I show?
Inheritance, association, aggregation, composition, and dependency, with multiplicity labels — the standard UML class relationships, written as simple Mermaid connectors.
Can I show fields and methods with visibility?
Yes. List members with +/- for public/private and include types and return values, so the diagram documents the actual interface.
Is this good for documenting a codebase?
Very — because it's text, the diagram sits next to the code and can be updated in the same commit, avoiding the usual stale-diagram problem.
Does my class model get uploaded?
No. It renders in your browser, so a diagram of proprietary classes never leaves your machine.
Related tools
- ER diagramSketch database entities and relationships with Mermaid ER syntax and render them live. Export SVG/PNG/PDF entirely on your device.
- Sequence diagramTurn a few lines of Mermaid into a clean sequence diagram of actors and messages. Live preview and SVG/PNG/PDF export, 100% on-device.
- State diagramModel state machines and transitions with Mermaid and render them instantly. Export vector or raster — your text never leaves the tab.
- PlaygroundA free-form canvas for any Mermaid diagram or Graphviz DOT graph. Switch engines, edit live, and export — all on-device, nothing uploaded.