Timeline Layout Grammar & Editorial Diagram Guide

Explain milestones along a shared chronological axis.

When to use this diagram

Explain milestones along a shared chronological axis. 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

Keep time direction consistent and distinguish dated points from duration spans. Separate parallel tracks when events belong to different owners.

What to put in your source

List dates, event titles, and relevant owners. State whether dates are confirmed or planned and avoid implying equal duration from equal spacing. 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.