Slides and progressive reveal

A diagram for a talk needs readable sizing and a controlled introduction. Layup supplies both through grouped viewport settings and authored presentation steps. The same features apply to graphs, decisions, states, and sequences.

Fit a slide

diagram main "A request through the system" type=graph layout=auto flow-direction=right width=480 {
  slide size=wide
  node client "Client" style=process palette=blue
  node api "API" style=process palette=green
  node store "Storage" style=process palette=purple
  ::client -> ::api "Request"
  ::api -> ::store "Query"
}

Attribute	Behavior
slide size=wide or slide size="16:9"	1920 × 1080 viewport
slide size=standard or slide size="4:3"	1440 × 1080 viewport
slide size={width: 1200, height: 1800}	Explicit width and height
padding=N	Interior padding, default 48
min-font-size=N	Minimum post-fit font size, default 18

The size, padding and readability properties belong to a slide statement at the diagram or view level. The finished scene scales uniformly and centers in the viewport. Layout, routes, measured text, and aspect ratio remain intact. width=N controls the original layout canvas separately. For a short pipeline, a compact source width such as 480 avoids fitting a mostly empty 900-unit default canvas. The slide keeps its 16:9 viewport; change source width to balance the content inside it. Readability warnings include every text item, including captions, roles, and chips, after fitting. --strict fails on those warnings. The threshold is in slide units before display resizing.

Reveal the explanation in steps

diagram main "Dispatch a job" type=graph layout=auto flow-direction=right {
  node api "API"
  node worker "Worker"
  edge dispatch ::api -> ::worker "dispatch"
  step overview "Meet the services" {
    show objects=[::api, ::worker]
    highlight objects=[::api]
    speaker-note "The API accepts work for the worker."
  }
  step request "Dispatch work" {
    show connections=[dispatch]
    highlight connections=[dispatch]
  }
}

show objects=[…] and show connections=[…] accumulate. Highlights apply only to the current step and require visible targets. Showing a container reveals its subtree; showing a descendant keeps ancestor frames visible.

Edges ordinarily appear when both endpoints are visible. If an edge is assigned to show connections=[…] anywhere, it waits for that explicit reveal and for both endpoints. Give important edges IDs to keep step references stable.

Static output starts with the complete diagram. Present starts the plan; Previous, Next, and Show all control it. Arrow Left/Right, Page Up/Down, Space, Home, and End navigate during presentation. Inline docs also support fullscreen. Notes are plain text; reduced-motion preferences are respected.

A combined request/retry walkthrough

Example First diagramService architectureSupport decision treeJob state machineComposite connection statesRequest sequenceCJK and Arabic sequenceRight-to-left graphSlide-sized pipelineRequest/retry presentationShared architecture viewsTheme-aware paint and stylesShared syntax, scopes and annotationsView First view (default)

Layup source Updates as you type// One sequence diagram, a complete overview, and a slide-sized walkthrough. // Render with --view overview or --view walkthrough --html. diagram main "Request and retry" type=sequence { slide size=wide participant client "Browser" palette=blue participant api "API" palette=purple participant worker "Worker" palette=green message request ::client -> ::api "POST /jobs" message enqueue ::api -> ::worker "Queue work" delivery=async message accepted ::api -> ::client "202 Accepted" type=reply loop "Poll until complete" { message poll ::client -> ::api "GET /jobs/:id" message pending ::api -> ::client "200 + pending" type=reply } message result ::api -> ::client "200 + result" type=reply view overview "Request and retry · overview" { include ::client ::api ::worker } view walkthrough "Request and retry · walkthrough" { include ::client ::api ::worker step request "Submit the request" { show objects=[::client, ::api, ::worker] show connections=[request] highlight connections=[request] speaker-note "The browser sends a request to the API." } step dispatch "Dispatch work asynchronously" { show connections=[enqueue, accepted] highlight connections=[enqueue] speaker-note "Work continues after the API returns an acknowledgement." } step retry "Poll while work is pending" { show connections=[poll, pending] highlight connections=[poll, pending] } step complete "Return the result" { show connections=[result] highlight connections=[result] } } }

Diagram Loading renderer…

Your diagram appears here. The renderer loads once and runs in your browser.

Ctrl+Enter renders now · Tab moves focus · Click a diagnostic to select its source · Expand for pan, zoom and presentation controls

Use your own fallback fonts

CJK uses your system fonts by default. Choose standalone .ttf/.otf faces for exact measurement and embedding. Files stay in this browser; share links do not include fonts.

Choose the walkthrough view, then select Present under the diagram. Its four steps introduce the request, asynchronous dispatch, polling, and result. Expand it to see the slide at a useful presentation size.

Sequence notes and fragment frames remain context during reveal. Presentation steps do not execute state machines or automatically time a trace.

Drive an iframe

Use --html --embed for a page without the toolbar. ?step=request selects an initial step. A host can send:

frame.contentWindow.postMessage({ layup: 'step', id: 'request' }, '*');
frame.contentWindow.postMessage({ layup: 'step', action: 'next' }, '*');
frame.contentWindow.postMessage({ layup: 'step', action: 'all' }, '*');

The viewer reports { layup: 'step', index, id, count, title, note }. Indices are zero-based; the complete view has index -1 and ID null. Existing focus/select/theme/fit messages remain available. Verify the origin and source of incoming messages in your host.