Images, Diagrams and Video
.image, .caption, .background and .video
9 October 2026
An image
With no size, an image fills the space left on the slide:
A plasma fractal made with ImageMagick .
2
Image sizes
A fraction of the slide, or a height and width in pixels or fractions, with _ for no limit:
3
Graphviz
A .dot file is rendered to the SVG file next to it with dot:
The worker pool from code.slide.
4
Mermaid
.mmd and .mermaid files are rendered with the Mermaid CLI, mmdc:
What happens when you click Run.
5
A state diagram
With -hot, the browser reloads a presentation when its files change,
and shows parse errors over the old slides:
6
PlantUML
.puml, .plantuml and .pu files are rendered with plantuml:
How present serves a slide.
7
Diagrams of code
Diagrams of code use the font of code on the slides, in Graphviz and Mermaid:
8
A background
.background sets the image behind the whole slide.
9
Video
Made with ffmpeg -f lavfi -i testsrc2.
10
Source of slide 1S closes
examples/media.slide
1 # Images, Diagrams and Video
2 .image, .caption, .background and .video
3 9 Oct 2026
4
5 Ada Example
6 ada@example.com
Source of slide 2S closes
examples/media.slide
8 ## An image
9
10 With no size, an image fills the space left on the slide:
11
12 .image images/plasma.jpg
13 .caption A _plasma_ fractal made with [ImageMagick](https://imagemagick.org/).
File used
Source of slide 3S closes
examples/media.slide
15 ## Image sizes
16
17 A fraction of the slide, or a height and width in pixels or fractions, with `_` for no limit:
18
19 .image images/shapes.svg 0.25
20 .image images/shapes.svg 120 _
21 .image images/shapes.svg _ 0.2
File used
Source of slide 4S closes
examples/media.slide
23 ## Graphviz
24
25 A `.dot` file is rendered to the SVG file next to it with `dot`:
26
27 .image diagrams/pipeline.dot
28 .caption The worker pool from code.slide.
29
30 : present renders diagrams again whenever their source changes.
31 : Run present serve -norender to show the existing SVG files instead.
File used
diagrams/pipeline.dot 1 digraph pipeline {
2 rankdir=LR;
3 bgcolor=transparent;
4 fontname="Roboto,sans-serif";
5 node [shape=box, style="rounded,filled", fillcolor="#e0f4fa", fontname="Roboto,sans-serif"];
6 edge [fontname="Roboto,sans-serif", fontsize=10];
7
8 main [label="main"];
9 jobs [label="jobs", shape=cds, fillcolor="#fdf3c4"];
10 w0 [label="worker 0"];
11 w1 [label="worker 1"];
12 w2 [label="worker 2"];
13 results [label="results", shape=cds, fillcolor="#fdf3c4"];
14
15 main -> jobs [label="send"];
16 jobs -> {w0 w1 w2};
17 {w0 w1 w2} -> results;
18 results -> main [label="receive"];
19 }
Source of slide 5S closes
examples/media.slide
33 ## Mermaid
34
35 `.mmd` and `.mermaid` files are rendered with the Mermaid CLI, `mmdc`:
36
37 .image diagrams/run.mmd 0.7
38 .caption What happens when you click Run.
File used
diagrams/run.mmd 1 ---
2 config:
3 fontFamily: Roboto, sans-serif
4 ---
5 sequenceDiagram
6 participant B as Browser
7 participant P as present
8 participant G as go build
9 B->>P: Run (WebSocket)
10 P->>G: build the snippet
11 G-->>P: binary
12 P->>P: start the program
13 P-->>B: stdout and stderr, as they come
14 P-->>B: exit status
Source of slide 6S closes
examples/media.slide
40 ## A state diagram
41
42 With `-hot`, the browser reloads a presentation when its files change,
43 and shows parse errors over the old slides:
44
45 .image diagrams/hot.mermaid
File used
diagrams/hot.mermaid 1 ---
2 config:
3 fontFamily: Roboto, sans-serif
4 ---
5 stateDiagram-v2
6 direction LR
7 [*] --> Showing
8 Showing --> Parsing: a file changes
9 Parsing --> Showing: it parses
10 Parsing --> Error: it does not
11 Error --> Parsing: a file changes
Source of slide 7S closes
examples/media.slide
47 ## PlantUML
48
49 `.puml`, `.plantuml` and `.pu` files are rendered with `plantuml`:
50
51 .image diagrams/serve.puml 0.7
52 .caption How present serves a slide.
File used
diagrams/serve.puml 1 @startuml
2 skinparam defaultFontName Roboto,sans-serif
3 skinparam backgroundColor transparent
4
5 participant Browser
6 participant present
7 participant "<font:JetBrains Mono,monospace>plantuml</font>" as tool
8
9 Browser -> present: GET talk.slide
10 present -> tool: render changed diagrams
11 tool --> present: SVG
12 present --> Browser: slides
13 @enduml
Source of slide 8S closes
examples/media.slide
54 ## Diagrams of code
55
56 Diagrams of code use the font of code on the slides, in Graphviz and Mermaid:
57
58 .image diagrams/work.dot 0.3
59 .image diagrams/work-flow.mmd 0.3
Files used
diagrams/work.dot 1 digraph code {
2 fontname="JetBrains Mono,monospace"
3 node [fontname="JetBrains Mono,monospace", shape=box, style=filled, fillcolor=white]
4 edge [fontname="JetBrains Mono,monospace"]
5 bgcolor=transparent
6
7 main [label="func main()"]
8 work [label="go work(jobs)"]
9 main -> work
10 }
diagrams/work-flow.mmd 1 ---
2 config:
3 fontFamily: JetBrains Mono, monospace
4 ---
5 flowchart LR
6 main["func main()"] --> work["go work(jobs)"]
Source of slide 9S closes
examples/media.slide
61 ## A background
62
63 .background images/background.svg
64
65 `.background` sets the image behind the whole slide.
File used
Source of slide 10S closes
examples/media.slide
67 ## Video
68
69 .video video/testsrc.webm video/webm 270 480
70 .caption Made with `ffmpeg -f lavfi -i testsrc2`.
File used
No sourceS closes
present adds this slide itself; it has no source.
Use the left and right arrow keys or click the left and right
edges of the page to navigate between slides.
