Zoom and pan

Large diagrams are unreadable at column width, so diagrams are zoomable by default. Try the diagram below: hover it and hold Ctrl while scrolling, drag it once zoomed, or use the toolbar in its top-right corner.

A deliberately large deployment topology (waiting to render)

A deliberately large deployment topology

A much larger one

Two hundred nodes across ten clusters, laid out by Graphviz rather than PlantUML — the same viewer, the same controls. At column width it is a grey smear, which is the point: the minimap tells you where you are once you have zoomed past it, searching for payments-store finds a node you would otherwise hunt for by hand, and maximizing it opens the whole graph fitted to the screen — with a Fit control to bring it back after you have zoomed off somewhere.

Two hundred services (waiting to render)

Two hundred services

Maximizing

The ⛶ button expands the diagram to fill the browser window over a solid background, fitted to the space available. Escape or the same button restores it, along with whatever zoom level you had before.

This is an in-page overlay rather than the browser's Fullscreen API. requestFullscreen() takes the entire browser window fullscreen in Firefox instead of presenting the diagram, and its backdrop sits outside the element so the page shows through behind a diagram with a transparent background. An overlay has neither problem and works the same everywhere — including iOS Safari, which has no element fullscreen at all.

How it behaves

Input	What happens
Plain scroll wheel	Scrolls the page. Never intercepted.
Ctrl + wheel, or trackpad pinch	Zooms about the pointer
Drag	Pans, once zoomed in
One finger on a touchscreen	Scrolls the page
Two-finger pinch on a touchscreen	The browser's own page zoom

Plain scrolling is never hijacked, and on a phone a full-width diagram can never become a scroll trap. Cmd + wheel is deliberately left alone too — on macOS that is the browser's page zoom.

Keyboard

The diagram viewport is focusable. Tab to it and try:

Key	Action
+ / =	Zoom in
- / _	Zoom out
0	Reset to 100%
Arrow keys	Pan
Shift + arrows	Pan by most of the viewport

Keys held with Ctrl, Cmd or Alt go to the browser, and Tab always moves on — the diagram is never a keyboard trap.

Opting out

A fence can opt out with zoom=false, which is what the diagram below does. It renders exactly as diagrams did before the feature existed: no toolbar, no focusable viewport, no extra tab stops.

```plantuml title="Small sequence" zoom=false
@startuml
Alice -> Bob : Hello
@enduml
```

Small sequence, zoom disabled (waiting to render)

Small sequence, zoom disabled

Or disable it site-wide:

docusaurus.config.ts

plugins: [['@matfsw/docusaurus-plantuml-plugin', {zoom: false}]],

Notes on the implementation

The transform is applied to a wrapper element, never to the SVG. That keeps the figure's layout height constant while you zoom — nothing below the diagram moves — and means the sanitized SVG is never mutated or re-serialized.

Zoom controls sit outside the role="img" container, because that role makes its subtree opaque to assistive technology and a button placed inside would be invisible to screen-reader users.