Free UML Diagram Maker Online — Class Diagrams, Smart Arrows
Draw UML class diagrams with attributes, methods, stereotypes, multiplicity, and 6 relationship types. Smart border-clamped arrows, undo/redo, zoom/pan.
Select: drag classes · Relation: click source→target · Double-click text to edit · Click relation line→Delete · Scroll: zoom · Ctrl+Z: undo
How it works
Add classes
Click + Class to add a UML class box. Use + Attr and + Method to add rows to the selected class.
Edit and style
Double-click any class name, attribute, or method to edit it inline. Set stereotype (interface, abstract, enum) from the toolbar.
Draw relationships
Select a relation type, then click the source class then the target. Double-click near an arrow to add a label.
Export
Click Download PNG. Use Ctrl+Z to undo. All data stays in your browser.
Common use cases
Software design
Model a system's classes, attributes, methods, and relationships before or during implementation.
Code documentation
Reverse-document existing classes into a UML diagram to help new team members understand the codebase.
Architecture reviews
Present class hierarchies and dependency structures visually during design reviews.
Learning OOP
Practice object-oriented design concepts by visually building class hierarchies and relationships.
Frequently asked questions
What relationship types are supported?
Association, Inheritance (hollow triangle), Composition (filled diamond), Aggregation (hollow diamond), Dependency (dashed arrow), and Realization (dashed + hollow triangle for interface implementation).
How do I add or remove attributes and methods?
Select a class, then click + Attr or + Method in the toolbar. To remove a row, double-click it to edit, clear the text, and press Enter — the row is removed.
How do I delete a relationship?
Click near the relationship line to select it (it highlights orange), then press Delete.
What are stereotypes?
Stereotypes like <<interface>>, <<abstract>>, and <<enum>> appear above the class name. Select a class and choose from the Stereotype dropdown.
What is multiplicity?
Multiplicity labels (1, *, 0..1, 1..*) appear at relationship endpoints to indicate cardinality. Set them when drawing a relation via the two small inputs that appear.
Can I undo?
Yes — Ctrl+Z / Ctrl+Shift+Z for undo/redo. Up to 50 steps.