UML class diagram Layout Grammar & Editorial Diagram Guide

Review class responsibilities, inheritance, and composition.

When to use this diagram

Review class responsibilities, inheritance, and composition. Choose this grammar when that relationship is the main question your reader needs to answer. Establish the scope and the audience before adding detail; if ownership, timing, or quantity is the real question, compare the neighboring diagram families in the directory.

How to organize the layout

Separate class names, attributes, and operations. Give inheritance and composition their own UML line and endpoint semantics.

What to put in your source

Provide class names, relevant members, and relationship kinds. State multiplicities and distinguish owning composition from loose association. Keep the source specific and review the generated result against those facts before sharing it.

The 6 Editorial Diagram Design Principles & Geometry Laws

4px Grid: Align node coordinates, widths, heights, and corner radii to multiples of four. A shared grid makes tiers line up, gives labels predictable clearance, and lets small manual adjustments remain consistent.
Orthogonal r=8 Elbows: Route off-axis architecture and flow connectors through horizontal and vertical segments with 8px rounded turns. Keep arrows away from labels. Charts such as Sankey and polar plots retain the curves their data encoding requires.
Single Accent Focal Rule: Choose a primary decision, integration point, or bottleneck as the visual focus. Reserve coral for that story and keep supporting components quiet. Labels and shapes must still communicate meaning when color is removed.
5 Semantic Color Tokens: Use --paper for the canvas, --ink for primary text, --muted for annotations, --soft for quiet boundaries, and --accent for emphasis. Change the palette without changing what each visual role means.
Instrument Serif + Geist Typography: Set editorial headings in Instrument Serif, component names in Geist, and technical annotations in Geist Mono. Distinct text roles separate the diagram’s story from implementation details without adding decoration.
WCAG AA Brand Extraction: Enter a public brand URL to extract the five-color palette. The extractor checks ink against paper at a minimum 4.5:1 contrast ratio and corrects that pair when needed. Review the full diagram separately for accessibility.