UML diagram generator
Document object models as text. Write Mermaid class diagrams — fields, methods, inheritance, interfaces and composition — and see them render live. Everything stays on your device.
One step per line. Indent two spaces to branch beneath the line above.
Model the design, not the pixels
A class diagram captures the shape of your code: which classes exist, what they own, and how they relate. Mermaid’s notation maps directly to OOP concepts — "<|--" for inheritance, "<|.." for implementing an interface, "*--" for composition and "o--" for aggregation — so the diagram reads like the design discussion that produced it.
Keeping it as text means it survives refactors: when you rename a class, you edit one line instead of redrawing a canvas.
Great for onboarding and RFCs
Drop a class diagram into a design RFC to show the proposed structure, or into a repo’s docs to help new contributors find their way. Visibility markers (+/-) and stereotypes like «interface» communicate intent without a wall of prose.
Frequently asked questions
How do I create a UML class diagram from text?
Start with "classDiagram", define each class with its fields and methods in braces, then add relationships like "Animal <|-- Dog". It renders live and exports to SVG or PNG.
How do I show inheritance vs interfaces?
Use "A <|-- B" when B extends class A, and "A <|.. B" when B implements interface A. Mark interfaces with the "<<interface>>" stereotype inside the class.
How do I mark public and private members?
Prefix a member with "+" for public or "-" for private, for example "+charge(amount) bool" or "-PaymentMethod method".
Does Mermaid support other UML diagrams?
Yes — besides class diagrams it renders sequence and state diagrams, which together cover most day-to-day UML needs. This page focuses on class diagrams.
Is anything uploaded?
No. The diagram is generated in your browser, so your class and method names stay on your device.