Schematex
umlclass·OMG UML 2.5.1 §9–§11·software, education·complexity 1/3·since v0.6.4

Shape class hierarchy with an interface

The canonical UML 2.5.1 class diagram — an interface, an abstract base class, and two concrete leaves — showing generalization, realization, and a generalization-driven layered layout where parents float to the top.

For the OOAD instructor or junior developer

Open in Playground →
umlclass·§
↘ preview
100%
Shape hierarchy UML class diagram: 1 interface, 1 abstract, 2 class; 1 realization, 2 generalization; 1 merged inheritance tree. Shape hierarchy «interface» Shape + area(): double + perimeter(): double AbstractShape # name: String + area(): double + perimeter(): double + describe(): String Circle + radius: double + area(): double + perimeter(): double Square + side: double + area(): double + perimeter(): double
UTF-8 · LF · 30 lines · 494 chars✓ parsed·12.7 ms·7.6 KB SVG

What this shows

The smallest diagram that exercises the three notations every UML primer covers in the first hour: an interface (rendered with the «interface» keyword), an abstract class (rendered in italics, with an abstract area() operation also in italics), and two concrete leaves.

Layering is generalization-driven. Inheritance edges (<|--) and realization edges (<|..) define the rank hierarchy, so the interface floats to the very top, the abstract base sits below it, and the two concrete classes anchor the bottom — without any author-side layout hints. This is the visual default a UML textbook expects, and it's why a class diagram should not ride a generic flowchart layout.

Adornments carry the semantics. Realization is dashed + hollow triangle; generalization is solid + hollow triangle. The two distinctions render identically in theme: monochrome because the meaning is in the shape, not the colour — exactly the point of UML 2.5.1.

UML class diagram syntax