Skip to content
M2TOOLKIT

UML diagrams

Draw UML diagrams without fighting the tool

Classes with attributes and methods, actors and use cases, activity flows — plus the proper UML arrowheads for inheritance, composition and aggregation.

  • Free, no sign-up
  • Saved on your device
  • No watermark
Example — the “Class diagram — library” template
1 … 0..*formanagesPerson- name: String- email: String+ contact(): voidMember- memberId: int- joined: Date+ borrow(book): Loan+ giveBack(loan)Librarian- staffId: int+ addBook(book)Loan- dueDate: Date- returned: bool+ isOverdue(): boolBook- isbn: String- title: String+ isAvailable(): bool

The basics

What is a UML diagram?

UML (Unified Modeling Language) is a standard way to draw software: class diagrams show the structure of the code, use case diagrams show who does what with a system, and activity diagrams show the steps of a process.

This tool covers the three you'll use most, with the notation reviewers expect — so your diagram is ready for a design doc or an assignment.

What you can add

  • Class
  • Interface
  • Actor
  • Use case
  • Action
  • Start / end
  • Diamond
  • System / package

Features

What makes it work

  • Real class boxes

    Name, attributes and methods in three compartments. Type them like text — separate sections with ---.

  • Proper UML arrows

    Hollow triangle for inheritance, filled and hollow diamonds for composition and aggregation, dashed lines for dependencies.

  • Actors and use cases

    Stick-figure actors, oval use cases and a system boundary frame, with «include» labels on any line.

  • Real templatesStart from a worked example and make it yours.
  • Smart connectorsDrag a + handle to connect; Tab adds the next step.
  • PNG, SVG & file exportFor docs and slides — or a .json to keep editing.
  • Share linksSend a link; whoever opens it gets their own copy.
  • Private by defaultSaved in your browser. Nothing is uploaded.
  • Works on touchPan, pinch and edit on a tablet or phone.

Templates

Start from a worked example

Open one, change the words and it's yours — every element stays editable.

How it works

Three steps to done

Create a UML diagram
  1. Step 1

    Pick a template or add classes, actors and use cases.

  2. Step 2

    Connect them and choose the right arrowhead for each line.

  3. Step 3

    Export a PNG or SVG for your document.

Use cases

Who it's for

  • Software design

    Sketch classes and relationships before writing code, then keep the diagram with the docs.

  • Coursework

    Class, use case and activity diagrams in standard notation for assignments.

  • Requirements

    Show stakeholders who uses the system and for what.

UML Diagram

Common questions

Which UML diagrams can I draw?

Class diagrams, use case diagrams and activity diagrams have ready-made elements and templates. You can draw others (like component or package sketches) with frames, shapes and connectors.

How do I show inheritance?

Connect the subclass to the parent, select the line, and set the end to “Inheritance ▷”. Composition and aggregation diamonds are in the same menu.

How do I edit a class?

Double-click it and type: the class name, a line with ---, the attributes, another ---, then the methods.

Is it free?

Yes — free, no sign-up, saved in your browser, with PNG, SVG and .json export.

More solutions

Open M2 Boards

Ready when you are

Free in your browser — no account, no download, no watermark.