This free tool lets you build UML class diagrams directly in your browser — add classes, edit their attributes and methods inline, drag them into position, and connect them with the four standard UML relationship types. When you're done, export the diagram as Mermaid class diagram syntax, which renders natively in GitHub, GitLab, and most modern documentation tools.
Click "+ Add Class" to create a new class box. Click directly on the class name, attributes, or methods sections to edit them inline — attributes and methods each go on their own line, using standard UML visibility notation (+ public, - private, # protected) followed by a name and type, for example "- salary: Int" or "+ calculatePay(): Decimal".
Select two classes by clicking the first and Shift+clicking the second (the selected boxes highlight in yellow), choose a relationship type from the dropdown, and click "Draw Relationship." The four standard UML relationship types are supported: Association (a plain line, the most general "knows about" relationship), Inheritance (a hollow triangle arrowhead, pointing from subclass to superclass), Composition (a filled diamond, representing "owns and controls the lifecycle of"), and Aggregation (a hollow diamond, representing "has a" without owning the lifecycle).
Click "Export Mermaid" to generate Mermaid.js classDiagram syntax representing your full diagram — every class with its attributes and methods, and every relationship with the correct arrow notation. Mermaid syntax renders natively as a diagram in GitHub/GitLab markdown, Notion, and most modern documentation platforms, so you can paste the exported text directly into a README or design doc.
Use Association for a general "uses" or "knows about" relationship with no ownership implication. Use Inheritance ("is-a") when one class extends another and inherits its behavior — a Dog is-a Animal. Use Composition ("owns, part-of, cannot exist independently") when the contained object's lifecycle is fully controlled by the container — an Order owns its OrderLine items, which are deleted if the Order is deleted. Use Aggregation ("has-a, can exist independently") when one class holds a reference to another that could exist on its own — a Department has Employees, but an Employee still exists if the Department is dissolved.
Both represent a "has-a" relationship, but the difference is ownership of the contained object's lifecycle. In composition (filled diamond), the contained object cannot exist independently of its container — deleting the container deletes its parts (an Order and its OrderLine items). In aggregation (hollow diamond), the contained object can exist independently — a Department has Employees, but the Employees still exist if the Department is dissolved.
Not directly in this version — the diagram exists only in your browser session. Use the "Export Mermaid" button to copy the diagram as text, which you can paste into a text file, a GitHub README, or a design document to save it permanently and re-import conceptually by pasting it back into any Mermaid-compatible tool.
No, this tool is specifically a class diagram builder, the most commonly used UML diagram type for representing object-oriented system structure. Sequence diagrams, use case diagrams, and other UML diagram types are not currently supported.
The visual canvas and the Mermaid export represent the same underlying diagram, but Mermaid.js lays out class diagrams automatically using its own algorithm rather than preserving your exact box positions — this is standard behavior for Mermaid and most other diagram-as-code tools, which prioritize automatic, readable layout over manual positioning.