Every typed block

Document cover

Document cover — title, subtitle, tag, and an optional logo.

Callout

A single aside — note, tip, warning, or danger.

Structured prose

Structured prose (headings, paragraphs, lists, quotes) as data.

Glossary

Term → definition rows.

Pull quote

A standout pull-quote with optional attribution.

Layered explanation

N numbered layers, each answering one question (L1 / L2 / L3).

Figure

An image with a caption in a bordered card (optional pixel width cap).

FAQ

Q&A accordions — native details/summary, no JavaScript.

Section divider

A full-width section break — kicker, display title, optional subtitle on an accent-washed band; a clean interstitial slide in decks.

Big number

One hero metric at presentation scale — a display-size value with an optional delta + trend arrow, a one-line claim, and a context line.

Takeaways

The 2-6 things to remember — numbered rows at presentation scale, each a bold one-liner with an optional detail; a deck’s closing slide.

Table

Genuinely tabular data; cells can carry a tone.

KPI cards

KPI cards with a delta and an up / down / flat trend.

Code snippets

Code the reader will copy or diff: highlighted snippets with `highlight` line ranges, `lines` numbers, and a `cols` grid; `kind: compare` sets before / after side by side, `kind: diff` a unified diff, `kind: terminal` a shell session.

also: diff, terminal

SLOs & error budgets

Service-level objectives — SLI, target vs current, and an error-budget burn bar.

Benchmark table

Measured results side by side — subject columns (one can be outlined as the focus) × metric rows, best in each row derived and highlighted, several conditions per row supported.

API endpoint

A Swagger-style API endpoint card.

Packet layout

A wire format laid out bit by bit — fields wrap across rows of `width` bits, the way an RFC header diagram reads.

Event contract

An async event contract card — name, channel, producers → consumers, delivery guarantees, and the payload fields with the partition key marked; the twin of endpoint.

C4 architecture

C4 model — context / container / component.

UML class diagram

A class diagram — attributes, methods, UML relationships.

Component tree

A top-down component tree (root / layout / page / hook / store).

Cluster topology

Kubernetes-style namespaces holding services, with replicas.

Block diagram

Generic boxes-and-arrows architecture (grid or layered bands); `preset: infra | event | ddd | network` picks the domain styling.

also: infra, event, ddd, network

Frontend logic graph

Frontend module graph — components, hooks, interfaces, strategies; `variant: be` renders the backend flavour (controller / service / repository).

also: belogic

Capability map

A target-architecture capability map — tinted domain areas packed with small status-coded capability tiles (current / target / new / gap / deprecated).

Use case diagram

A UML use-case diagram — actors outside the system boundary, use cases inside, include / extend / generalize relations.

Package diagram

A UML package diagram — tabbed folders with their members on a grid, dashed import / use dependencies between them.

Sequence diagram

Messages between actors over time (lifelines + returns).

Flowchart

A decision flowchart with branches and error exits; `variant: dag` renders a pipeline DAG.

also: dag

State machine

A state machine — states + event transitions.

Data-flow diagram

Data-flow — processes, external entities, and datastores.

Swimlane diagram

Who does which step, in what order — one lane per owner, columns from the links, phase bands.

How-to steps

A numbered how-to / runbook stepper — title, body, command, note per step.

Cycle

A closed loop of stages arranged in a circle — build–measure–learn, PDCA, an incident loop; step descriptions become a numbered legend.

Branch graph

A branching and release model — lanes for branches, dots for commits, curves where one forks and merges back; tags mark releases.

Saga

A distributed transaction — forward steps left to right with the compensation under each, and the compensating flow drawn back from the step that fails.

Trace waterfall

A distributed-trace waterfall — one lane per service, each span a bar on a shared time axis, nested by parent; the critical path is marked.

Timing diagram

A UML timing diagram — one lane per lifeline stepping through states over a shared time axis, with events and duration constraints.

Entity-relationship diagram

Entities, columns, keys, and crow’s-foot relationships.

File tree

An indented file / folder hierarchy; `variant: issue` renders a MECE issue tree.

also: mece

Pyramid

A layered pyramid, widening top → bottom.

User journey

A user journey across stages, with an emotion curve.

Gantt chart

A schedule — task bars across date columns.

Node-link graph

A generic node-link graph with colour-cycled groups.

Quadrant chart

A 2×2 matrix (e.g. effort vs impact) with plotted items.

Data chart

A data chart — bar / line / area / scatter / donut / pie / gauge / radar / waterfall / funnel / histogram / bell / boxplot / pareto / bullet, pure SVG, series coloured by accent.

also: waterfall, funnel

Heatmap

A numeric grid with an intensity ramp — rows × columns of tiles tinted by value.

Flow volumes

A flow diagram weighted by volume — node height and ribbon thickness are the value, so the widest ribbon leaving a stage is where the volume actually goes.

Treemap

Proportional composition as nested tiles — area is the value, so thirty items stay readable where a donut gives up at six.

Venn overlap

Two or three overlapping sets, with the shared regions labelled — scope, ownership, responsibility.

Fishbone diagram

Cause & effect (Ishikawa) — one effect at the head, cause categories as bones off the spine, specific causes as items along each bone.

Slopegraph

Ranked before / after — one line per item between two labeled columns; the slopes show what rose, fell, or held.

Mind map

A radial mind map — one centre, branches fanning left and right, sub-branches hanging off each; accent per branch.

User story

One agile story — role / want / soThat + acceptance criteria + links.

Timeline

Phases in order with status dots (done / current / next / future).

Kanban board

Flexible named columns of cards (Now / Next / Later).

Pros & cons

Two columns weighed against each other — pros vs cons.

Current vs target

Current → target, before / after panels.

Meeting agenda

A meeting agenda — time, duration, owner, topic per row.

Fancy list

A fancy bullet list — accent / check / icon / number marker styles.

Story backlog

A collapsible backlog of user stories (accordions) in one section.

Design pattern

A design-pattern card — intent · forces · participants · consequences.

Card gallery

A responsive grid of cards — code snippets or notes (e.g. a bug gallery or comparison).

Changelog

Release history on a vertical rail — version pills, dates, and typed change chips.

Risk register

A risk register — severity derived from likelihood × impact, with mitigation, owner, and status.

Status table

Task table with an update column, user-defined colored status pills, and optional subtasks per row; `variant: tracker` renders the classic task-tracker list.

also: tracker

Story map

User story map — the ordered backbone of activities across the top, release slices as rows of cards under each step.

Rollout plan

A progressive-delivery plan — stages left to right with their traffic share, hold time, and the gate each must pass; the rollback move as the footer.

Process chevrons

A process chevron strip — N steps left to right with the current one highlighted and a line of detail under each.

Roadmap

A roadmap — themes as rows, periods as columns, items as status-tinted chips spanning their periods, with a "now" rule.

Capability matrix

A role × resource capability grid; cells tint by permission level.

Anatomy breakdown

The labelled parts of a delimited string (app:feature:action).

Access composition

Effective access as intersected gates (A ∩ B ∩ C = result).

Design drivers

A grid of factor cards — the forces that shaped a design.

Options considered

Approaches explored — pros / cons / verdict; the chosen one highlighted.

Spec sheet

A labelled spec sheet — label → value rows (a value can be a step-flow).

Back-of-envelope math

Back-of-envelope capacity math — assumptions, derivation rows, a highlighted bottom line.

SWOT analysis

A classic SWOT 2×2 — strengths, weaknesses, opportunities, threats as tinted quadrant cards.

OKRs

Objectives and key results — one card per objective, a status-coloured progress bar per KR.

User personas

User persona cards — avatar, role, quote, goals, frustrations, and tools.

Team cards

Compact people cards — initials avatar, name, role, and focus area.

Decision scorecard

A weighted decision matrix — criteria rows × option columns, totals footer, winner highlighted.

Wardley map

A Wardley map — components placed by visibility to the user and by evolution (genesis → commodity), joined into a value chain.

Rated comparison

A rated comparison — options across the top, criteria down the side, a Harvey ball for each judgement; the recommended column is marked.

Executive summary

An executive summary in Minto order — situation, complication, question, and the answer the deck exists to deliver.

Scenario table

Base, upside and downside against the same drivers — assumptions in columns, with the outcome each set produces on its own row.

Wireframe

Low-fi UI mockups inside device frames (desktop / browser / phone).

Color palette

Color-token swatches on a card grid — hex value, name, and usage per color.

Type scale

A live type specimen — one row per style, the sample rendered at its real size, weight, and font.

Do / don't guide

Do / don’t guideline cards — a green DO and a red DON’T column, with optional mono examples.

Component inventory

A component / feature status board — compact rows with a color-coded stable / beta / experimental / deprecated / planned chip.

Array walkthrough

Array cells for algorithm walkthroughs — tones, pointer labels below cells, and a dashed index-window highlight.

Linked list

A pointer-chain diagram (singly or doubly) — boxed nodes, next/prev arrows, node markers, and a ∅ terminator.

Binary tree

A binary tree — nodes placed by parent + side, tinted to show search paths, traversals, and heap shapes.

Hash map

Hash buckets with chained entries — collision chains read left → right as key/value pills; tones highlight probes.

Agent loop

The canonical LLM agent loop — environment → agent (model chip) → tools, with memory and a stop condition.

Agent trace

An agent execution transcript — user / assistant / tool / system turns, with thinking and tool args → result.

Prompt anatomy

Prompt anatomy — stacked role segments (system / user / assistant / tool) with highlighted {{variable}} chips and a legend.

Context-window budget

A context-window token budget — one stacked bar sized against the window, with free space and over-budget overflow.

Neural network

A layered neural network — one column per layer with unit counts, kinds (input / conv / dense / attention / output) and activations; dense wiring drawn between layers.