# Editable Diagram Recipes

## Shared construction rules

1. Write the relationship in one sentence before drawing.
2. Put every exact label in HTML or SVG text; never bake important Chinese text into a generated image.
3. Use connectors only when they encode direction, dependency, handoff, feedback, or containment.
4. Keep node shapes consistent within the same semantic level.
5. Add an accessible `aria-label` that states the relationship, not the decoration.

## Flow

- Use verb-led nodes.
- Keep a single reading direction.
- Use one connector style; show branches explicitly.
- For more than six steps, group into stages or split pages.

## Timeline

- Separate time labels from event descriptions.
- Use distance only when it really represents elapsed time; otherwise use equal spacing.
- Highlight one current/turning milestone, not every milestone.

## Matrix

- Name both axes with directional meaning.
- Check that all four quadrants are mutually intelligible.
- If placement is qualitative, say so; do not imply numerical precision.

## Layered architecture

- Use nested shapes for containment and stacked bands for abstraction levels.
- Put the foundation at the bottom unless the supplied convention says otherwise.
- Use boundary lines and labels; avoid pseudo-3D blocks.

## Swimlane

- One actor/system per lane.
- Actions are verb phrases; handoffs cross lane boundaries.
- Align time/order on one axis.
- Do not duplicate the same action in several lanes.

## Cycle

- Show the return path and what triggers the next round.
- Keep clockwise direction unless the source specifies otherwise.
- If there is a terminal state, use a flow instead.

## IPO

- List tangible inputs and outputs.
- Name the actual transformation, not merely “processing”.
- Use substeps inside the process only if they are supplied and necessary.

## Notion scene

Combine document, person, screen, node, and connector primitives into one restrained line-art scene. Use the scene to reinforce the page’s relationship; do not add unrelated “cute” objects.
