A UML diagram maker that walks through your design
- Free
- No sign-up
- Works offline
Draw class, use case, and state machine diagrams in your browser — then press Present and let each one narrate itself, step by step.
Present reveals your UML class diagram one step at a time, on its own.
Diagramium is a free, browser-based UML diagram maker with separate editors for class, use case, and state machine diagrams — and every diagram you draw can narrate itself. Add a note to each element, press Present, and watch the model reveal one piece at a time with optional AI voice narration. No account is needed to draw, present, or export PNG and SVG images.
Your diagrams stay local: the browser saves them on your own machine, no feature uploads diagram content, and the editor runs offline after its first load. The live example on this page is a published gallery diagram playing on loop — exactly what Present looks like.
What goes into a UML class diagram
A UML class diagram shows a system's structure as classes: each class is a box with three compartments — name, attributes, methods. The relationships between the boxes carry the meaning: a plain line is an association, a hollow triangle points at the parent class to show inheritance, a hollow diamond marks aggregation, a filled diamond marks composition, and a dashed arrow marks a dependency.
Two smaller conventions do a lot of work. Visibility markers prefix each member — + public, - private, # protected — and multiplicity labels such as 1, 0..1, and 1..* state how many instances sit on each end of a relationship. Diagramium's class editor works in exactly these parts: classes, attributes, methods, and the relationships between them. For a worked tutorial, follow the guide to creating a UML class diagram.
A worked example: Customer, Order, LineItem
To see what a class diagram is for, model something familiar: a customer placing orders. Three classes carry the whole story. Customer has the attributes name and email and one method, placeOrder(). Order has orderDate and status, with a total() method. LineItem has quantity and unitPrice, with subtotal().
The relationships are where the model starts to say something. Draw an association from Customer to Order with multiplicities 1 and 0..* — read aloud, "a Customer places many Orders, and every Order belongs to exactly one Customer." Between Order and LineItem, use composition — the filled diamond on the Order end, 1 to 1..* — because a LineItem has no meaning outside its Order and dies with it.
Presented step by step, this model becomes an explanation instead of a picture. Reveal Customer first and say who it represents; bring in Order and speak the association as a sentence; land on the composition and let the "why this matters" note argue for the filled diamond. Your audience follows the reasoning in the order you built it, not all at once.
From requirements to a finished class diagram
Good class diagrams start in the requirements, not on the canvas. These are the decisions that separate a model from a doodle:
- Open the UML class editor in your browser. Nothing to install, no sign-up.
- Underline the nouns in your requirements. The recurring ones — customer, order, invoice — are your candidate classes; add a box for each.
- Sort each detail into attribute or association. A plain value like an email address is an attribute; anything with its own attributes or life cycle — an Address you validate, a Payment you track — deserves a class of its own and an association.
- Add only the methods the design turns on. A total() that encodes a business rule earns its line; routine getters are noise.
- Reach for inheritance last, and only when subclasses truly substitute for the parent. If two classes merely share a few fields, an association is usually the honest model.
- Set a multiplicity on every association — those small labels are the constraints reviewers actually argue about.
- Give each step a speaker note: the reason the element exists, in the words you would say aloud.
- Press Present to rehearse the walkthrough, then export a PNG or SVG for your document. A free account adds the animated formats — GIF, video, animated SVG.
Class, use case, state machine, sequence: which one when
UML gives you several views of one system, and Diagramium keeps them in separate editors so none is forced into another's notation. A class diagram answers "what is the system made of." A use case diagram answers "who uses it, and for what" — actors outside the boundary, goals inside — in a use case editor of its own. A state machine diagram answers "how does one object behave over time," and has a dedicated editor too; the guide to creating a state machine diagram walks through one.
Sequence diagrams are the fourth view, and the natural partner to a class diagram: structure on one side, interaction on the other. Your class diagram says an Order holds LineItems; a sequence diagram shows the messages flying between instances at runtime — placeOrder() arriving, total() being computed — with lifelines, activation bars, and alt/loop/opt fragments. In Diagramium you can type a sequence diagram as plain text ("Alice->Bob: Hello") and watch it draw, or build it visually like every other tool.
Your model never leaves your machine
A class diagram of production software is a map of the system itself — often an unreleased one — so where the diagram lives matters. Diagramium is local-first: documents are saved by your browser on your own computer, and the only copies that exist elsewhere are the files you deliberately download and share. No feature transmits diagram content, and after the first visit the editor runs without a network connection.
There are no ads and no third-party analytics; the only telemetry is an anonymous per-diagram counter, which says nothing about you or your document. And when you want a starting point rather than a blank canvas, the Explore gallery holds hundreds of editable diagrams, including narrated explainers.
Frequently asked questions
Is the UML diagram maker free? Do I need an account?
Yes — Diagramium is free and has no paid tier. You can draw UML diagrams, present them, and export PNG or SVG images without signing in at all. A free account adds the animated export formats and syncs your favorites and likes in the diagram gallery.
Which file formats can I export a UML diagram to?
PNG and SVG stills are available to everyone, with no sign-in. With a free account you can also render a diagram's step-by-step walkthrough as an animated GIF, a video, or an animated SVG. Separately, Present mode can record a live take of a presentation as video while it plays.
Where are my UML diagrams stored — and can I work offline?
Diagrams are stored locally by your browser, on your own computer. No feature uploads diagram content anywhere; the only copies that leave your machine are the files you export. Once the app has loaded, drawing and presenting both work without an internet connection.
Can I draw sequence diagrams as well as class diagrams?
Yes. Diagramium includes a dedicated sequence diagram editor among its 27 diagram tools, covering lifelines, activation bars, and alt/loop/opt fragments. You can type a sequence as text — "Alice->Bob: Hello" — and the diagram draws itself from it, or build it visually with drag and drop.
What is the difference between a class diagram and a use case diagram?
A class diagram describes a system's internal structure: its classes, their attributes and methods, and the relationships between them. A use case diagram describes the system from the outside: the actors who use it and the goals it serves them. Diagramium has a separate editor for each, so neither is forced into the other's notation.
What happens when I press Present on a UML diagram?
The diagram builds itself one element at a time, in the order you chose. Each step can carry AI voice narration with word-by-word subtitle highlighting, a spotlight on the current shape, a speaker note, and a "why this matters" insight. It turns a class diagram into a design-review walkthrough rather than a static picture.
More diagram makers
A flowchart maker that walks its own path · The sequence diagram maker that draws what you type · A mind map maker that turns brainstorms into walkthroughs · An architecture diagram maker that walks the request path · An ER diagram maker that presents your schema step by step · A data flow diagram maker that presents the path data takes · The animated diagram maker where diagrams explain themselves · An AI Diagram Maker for the Assistant You Already Use · A free timeline maker for roadmaps, launches, and history · The Gantt Chart Maker That Explains Your Schedule · Software release plan maker: from code freeze to hotfix lane · RASCI matrix maker: one lane per role, every hand-off explicit · A free org chart maker that presents itself level by level · A free Venn diagram maker where the overlap is the point · A free process map maker for the way work actually runs · A free state machine diagram maker that walks every transition · A free concept map maker where every link says what it means · A free customer journey map maker that shows where it hurts · A free decision tree maker where every path reaches an answer · A free fishbone diagram maker for finding the actual cause · A free network diagram maker that keeps your topology private · A free use case diagram maker that shows who can do what · A free threat model maker that stays on your machine · A free C4 model maker, one level at a time · A free BPMN diagram maker for processes two teams must agree on · A free kanban board maker for explaining how work flows · A free sitemap diagram maker for planning a site's structure