Using Draughtsman

Fly-through presentations

A fly-through is a camera path over a diagram: a few saved views, each with a caption, that play back as a smooth animated tour. It is how you walk a room through a big architecture picture without a slide deck.

What it is

The path is saved in the document, so it travels with it, through the DSL and through backups. Each stop (a keyframe) is a rectangle of the diagram plus an optional caption, a time to arrive, a time to hold and an easing. The camera fits the whole rectangle into whatever window plays the tour, never cropping, so a view you framed in a small editor pane plays as framed on a projector. It is presentation only: no shape refers to it and every renderer, layout and the Mermaid export ignore it.

A keyframe does not follow a shape that later moves. If you rearrange the diagram, re-capture the view ("Use current view") or regenerate the tour.

Make one

Open the Tour tab on the right.

1. Frame the diagram the way you want it shown, then choose Add keyframe to capture the current view. Or choose Generate from containers: it makes an overview, then one keyframe per top-level container captioned with its label, then everything outside a container. With a tour already there the button reads Regenerate and replaces it, undoably.
2. Select a keyframe to cut the canvas to it and edit its caption, Arrive time (how long it takes to travel there; the first keyframe's is used only on the trip back when the tour loops), Hold time, and easing (Smooth, Ease in, Ease out, Even, Cut).
3. Reorder with the arrows or Alt+arrow keys on a focused row, duplicate, delete, and tick Loop back to the first keyframe if you want it to repeat.

Every change to the path is one undo step.

Play it

Choose Present or press Cmd+Enter. A full-window overlay plays a snapshot of the document taken when you started, so nobody else's edit moves your show. The control bar has previous, play or pause, next, a scrubber with a tick per keyframe, a counter and full screen. Captions appear above it. The controls fade after 2.5 seconds while playing.

A presentation clicker sends Page Up and Page Down, so it needs no set-up. If the operating system asks for reduced motion, every segment is instant and the holds remain, so autoplay becomes a slideshow.

Share it as one file

File menu, Export fly-through (HTML) writes a single HTML file with the drawing and the player inside it: no server, no network, no library. We exported the shop platform diagram from this documentation's instance; the file is 29 KB.

Open the exported fly-through (it opens in this browser tab, has a "Back to the documentation" link, and makes no requests; use the controls at the bottom, or the keys above). Add #play to its address to start it playing, which suits a kiosk or an iframe.

Agents

An agent can write a tour. In DSL, after the edges:

flythrough loop=true
keyframe k_1 @ -20,-20 400x300 caption="Overview"
keyframe k_2 @ 0,0 200x120 caption="Web app" duration=1600 hold=3000 easing=easeOut

Or with patch_document, whose setFlythrough operation replaces the whole path (or removes it with null). An agent's AI "update" reply can never change a tour: that comparison covers nodes and edges only. See Agents and MCP.

Limits

• No video or GIF export, no speaker notes, one path per document, and no server-side render of a tour.
• The server's render_document ignores the tour.
• Frame rate: in Overpass's measurements in a visible Chrome on an Apple-silicon Mac at 120 Hz, a flight over the 2,000-node benchmark held the display's rate with no long tasks, and missed a 60 Hz frame on 4% of frames when the CPU was throttled to 2x. The first flight after a cold page load has one hitch of 100 to 400 ms. These are Overpass's numbers from its own test, not ours from this page, and they will differ on your hardware.