Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix

Seven figurative layouts share one bullet grammar. The header word picks the layout, title: names the diagram, and each - bullet is one item: a label, an optional detail after the first colon, and the usual [color] / [icon: …] attributes.

timeline
title: Product history

- 2021: Company founded in Berlin
- 2022: Seed round closed
- 2023: Public launch
- 2024: 100k users milestone

The item line#

• - label: detail — the label heads the item (a period, a stage, a set, a quadrant); everything after the first colon is its supporting line.
• - label alone works everywhere; details are optional.
• A label that needs a colon goes in quotes: - "12:30": lunch break.
• [color] sets the item's accent; omit it and the palette cycles.

Timeline#

Milestones in order on an arrowed spine, labels alternating above and below. The label is the period, the detail is what happened.

timeline
title: Migration plan

- Q1: Audit the monolith [blue]
- Q2: Extract the auth service [teal]
- Q3: Move traffic behind the gateway [green]
- Q4: Retire the legacy stack [orange]

section <name> bands group consecutive periods under a shared accent, the same grammar journey uses. A period can also carry more than one event: drop the inline detail and indent each event as its own - bullet underneath — they stack at that milestone instead of a single line.

timeline
title: History of Social Media

section Early days
- 2002: LinkedIn founded
- 2004:
  - Facebook founded
  - Google launches Gmail
- 2005: YouTube launched

Journey#

A user journey: steps in the order someone hits them, each scored 0–5 by how good it feels. The steps stay in one row so the labels scan straight across, and the score is plotted as a curve beneath them — the dip is where the experience goes wrong, and the step's colour says the same thing so red reads as the pain point. section bands group consecutive steps.

The detail is the step's actor list, comma separated. Each actor gets a colour and a dot on every step they appear in, with a key above the diagram — so a step that takes two people reads as two dots.

journey
title: Signing up

section Discover
- Land on the site: Me [score: 4]
- Read the pricing: Me [score: 3]

section Sign up
- Create an account: Me, Cat [score: 2]
- Verify the email: Me [score: 1]
- First diagram: Me, Cat [score: 5]

• [score: n] is the satisfaction, 0 (worst) to 5 (best). Omit it and the step plots at a neutral 3.
• - Step: 4 also works — a bare number after the colon reads as the score.
• - Step: Alice, Bob [score: 2] names two actors on one step.
• section <name> opens a band that runs until the next section. Steps before the first one stay unbanded.
• An explicit [color] overrides the score ramp when you want a step to stand out for some other reason.

Cycle#

Steps on a closed loop, each arrow feeding the next and the last feeding the first. Details sit outside the ring.

cycle
title: Build loop

- Plan: scope the week [blue]
- Build: ship the slice [green]
- Measure: watch the numbers [orange]
- Learn: fold back insights [violet]

Funnel and pyramid#

Stacked stages, top to bottom — a funnel narrows, a pyramid widens. Details line up in a right-hand column.

funnel
title: Sales funnel

- Visitors: 120k monthly [blue]
- Signups: 8% convert [teal]
- Activated: complete onboarding [green]
- Paying: upgrade to pro [orange]

pyramid
title: Operating model

- Vision: why we exist [violet]
- Strategy: where we play [blue]
- Execution: what we ship [green]

Venn#

Two or three overlapping sets. An overlap line labels an intersection: name the sets on either side of +, then the label after the colon.

venn
title: Skills overlap

- Developers: build things [blue]
- Designers: shape things [pink]
overlap developers + designers: prototypers

venn
title: Product trio

- Engineering [blue]
- Design [pink]
- Product [orange]
overlap engineering + design: feasibility
overlap design + product: usability
overlap engineering + product: viability

Matrix#

A labelled 2×2 — SWOT, effort/impact, urgency/importance. Exactly four items in reading order (top-left, top-right, bottom-left, bottom-right). x: and y: add axis end labels, written low | high; the y pair reads bottom to top.

matrix
title: Effort vs impact
x: Low effort | High effort
y: Low impact | High impact

- Quick wins: ship these first [green]
- Big bets: plan carefully [blue]
- Fill-ins: pick up when idle [yellow]
- Money pits: avoid these [red]

A SWOT needs no axes — the quadrant titles carry the meaning.

matrix
title: SWOT

- Strengths: loyal user base, fast releases [green]
- Weaknesses: single region, small team [red]
- Opportunities: enterprise tier, integrations [blue]
- Threats: platform pricing changes [orange]