Diagrams

Diagrams are strongest when their geometry carries an exact relationship.

Animated relationship evidence

Trace one request without flattening the whole system.

Open complete artifact

Boundary

The architecture remains visible while one request path is emphasized.

Sequence

Ordering and handoffs are carried by geometry and motion.

Exception

The live artifact lets a reviewer choose a different path.

Begin with the relationship

• Use a sequence when order and handoff matter.
• Use a state model when transitions and conditions matter.
• Use a hierarchy when ownership or nesting matters.
• Use a flow when material or information moves through a system.
• Use an architecture view when boundaries and dependencies matter.
• Use a timeline when change over time matters.

Do not force every subject into a generic left-to-right process.

Keep the visual grammar small

Define what shapes, lines, color, and annotations mean, then reuse that grammar consistently. If a visual distinction does not encode information, remove it.

Make labels do real work

Use short, concrete labels. Keep explanatory prose outside the dense part of the diagram. A reader should be able to identify the system boundary, the important relationship, and the exceptional path without decoding a legend of decorations.

Verify the rendered result

Inspect the diagram at its intended size. Check line crossings, label collisions, small text, contrast, and the reading order at narrow widths.

Keep the sequence source-groundedUse HTML for a plan only when spatial or interactive structure adds leverage.