# Timeline Infographic Diagram Experiment

Task: DIAGRAM-TIMELINE-EXPERIMENT

## Source Inventory

- Three downloaded timeline/process infographic PDFs from Vecteezy. The converted pages mostly include site chrome, but the visible previews show horizontal timeline patterns, circular milestones, icon markers, and alternating annotation blocks.

## Element Contract

- Audience: business presentation reviewer scanning a staged process.
- Reading flow: left to right along a single horizontal spine.
- Nodes: six milestones with numbered circular markers.
- Annotations: alternating above and below the spine to reduce crowding.
- Visual constraints: milestone labels must not sit on the line, icons must be centered, and connector stems must be vertical.

## Prompt Used

Create a clean six-step process timeline infographic as SVG.

Use a horizontal spine across the center with six evenly spaced circular markers.
Alternate annotation cards above and below the line. Each marker has a number,
short title, icon placeholder, and two-line description. Use a mixed palette
instead of one hue: orange, teal, blue, navy, green, and violet. Keep all text
inside cards. Re-evaluate marker spacing, card text fit, and stem clearance
after rendering.

## Evaluation Findings

- Timeline references often include website chrome in downloaded PDFs; the prompt must identify the actual diagram region before copying page structure.
- Alternating cards reduce vertical whitespace but require strict stem alignment.
- Numbered circles and icons should be separated; otherwise the marker becomes visually noisy.
- For future rules, add a source-region extraction step before diagram generation when the PDF is a web download rather than a direct asset.