Cathryn Lavery
53bd8dde0f
Thirteen editorial diagram types (architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, nested, tree, layers, venn, pyramid) as self-contained HTML files with inline SVG. Progressive disclosure: lean SKILL.md points to per-type references. Neutral stone+rust default skin, first-run gate that prompts users to customize the style guide from their own website, URL-based onboarding, annotation-callout primitive, sketchy filter variant, live gallery at assets/index.html.
1.0 KiB
1.0 KiB
Timeline
Best for: release history, project milestones, incident timelines, roadmaps, changelog visualizations.
Layout conventions
- Horizontal hairline baseline across the middle (
stroke-width=1). - Tick marks at time boundaries (quarters, months, sprints) with date labels below in Geist Mono.
- Events: small filled circles (
r=4) on the baseline. Labels alternate above and below to prevent collision, connected to the circle with a 1px hairline drop. - Major milestones: coral circle (
r=6) + bold Geist label. - Time scale must be honest: if intervals are non-equal, space the circles non-equally. Don't fake linear spacing for aesthetics. Break the axis visibly if a region is too dense.
Anti-patterns
- Equal-spacing events that aren't equally spaced in time.
- Missing axis labels ("what unit is this?").
- Crowded labels without vertical offset — illegible.
Examples
assets/example-timeline.html— minimal lightassets/example-timeline-dark.html— minimal darkassets/example-timeline-full.html— full editorial