ITKokka

UML Class Diagram Builder

Add classes, connect relationships, and export your diagram as a PNG.

For best experience, use a tablet or desktop to interact with this diagram builder.

Saved locallyDrag & drop shapes

Shapes

Class
Abstract Class
Interface
Note

Drag a shape onto the canvas

How to Use

  1. 1

    Add a class to the canvas and name it.

  2. 2

    Fill in its attributes and methods inside the class box.

  3. 3

    Draw a relationship line to another class (association, inheritance, and so on).

  4. 4

    Arrange the boxes so the diagram reads clearly, then export it as a PNG for your assignment or notes.

What Is a UML Class Diagram?

A UML class diagram shows the classes in a system, what each class contains (attributes and methods), and how the classes relate to each other (inheritance, association, composition, and so on). It's a standard way to plan an object oriented program before writing any code, and it's tested directly in O/L and A/L ICT OOP topics as well as university software engineering courses.

FAQ

What goes in each section of a UML class box?

Top section is the class name, middle section is attributes (with type), bottom section is methods (with parameters and return type). This tool keeps those three sections separate automatically as you add fields.

How do I show inheritance in a class diagram?

Draw a line from the child class to the parent class ending in a hollow triangle arrowhead pointing at the parent. This matches the notation expected in O/L and A/L ICT and university OOP coursework.

Can I export the diagram to use in a report or presentation?

Yes, use the export button to download the diagram as a PNG image you can paste anywhere.

Is this tool free to use?

Yes, fully free, no sign up, works directly in your browser.

Related

All Free Tools