Presentation Diagram Block
Embed standalone animated presentations with step navigation playback controls. Navigate through presentation steps directly within your documentation pages.
Presentation diagram blocks embed standalone animated presentations directly into your documentation pages. Each presentation plays through a sequence of steps, progressively revealing architecture concepts with smooth transitions. Steps can include audio narration that plays back automatically during playback. Readers navigate through steps using built-in playback controls.
When to Use
Block Properties
| Property | Required | Description |
|---|---|---|
| Presentation Path | Yes | Path to the .presentation.json file |
| Title | No | Optional title displayed above the presentation |
Playback Controls
The presentation block includes built-in navigation controls at the bottom of the viewer.
| Control | Description |
|---|---|
| Previous Button | Navigate to the previous step. Disabled at step 1. |
| Step Counter | Displays current position (e.g. 3 / 12) with tabular number formatting. |
| Next Button | Navigate to the next step. Disabled at the final step. |
| Mute Toggle | Mute or unmute audio narration during playback. Visible when steps contain audio. |
Standalone Presentation Files
Presentation blocks reference standalone .presentation.json files. These files contain the full presentation definition: base shapes, connections, animation steps, and configuration.
Viewer Display
Presentations render in a 16:9 aspect ratio container with a dark background. The step navigation controls appear as a floating bar at the bottom centre of the container.
| Aspect | Behaviour |
|---|---|
| Aspect Ratio | Fixed 16:9 container |
| Background | Dark theme (#1e1e1e) |
| Controls | Floating bottom-centre bar with blur backdrop |
| Responsive | Scales to fill container width |
Presentation vs Diagram Block
| Capability | Presentation Block | Diagram Block |
|---|---|---|
| File Type | .presentation.json | .diagram.json |
| Step Navigation | Built-in prev/next controls | No step controls |
| Interactive | Step playback only | Zoom, pan, node selection |
| Linked Presentations | N/A (is a presentation) | Discovers sibling presentations |
| Best For | Guided walkthroughs | Reference diagrams |