Loading…
Loading…
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
- 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.- "12:30": lunch break.[color] sets the item's accent; omit it and the palette cycles.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]
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.[color] overrides the score ramp when you want a step to stand
out for some other reason.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]
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]
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
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]