Zoom, download & security

Table of contents

• Zoom and pan
  • zoomLevel is two-way
• Downloading a diagram
• Security levels
  • When you legitimately need loose

---

Zoom and pan

On load the diagram is fit to the component according to fitMode, then multiplied by zoom.initial. From there the user can:

Action	How
Zoom in / out	Toolbar buttons, stepping by zoom.step.
Zoom with the wheel	Ctrl/Cmd + wheel, when zoom.wheel is on. The modifier is required so the page still scrolls normally.
Pan	Click and drag the diagram.
Reset	The fit button returns to the original fit.

zoomLevel is two-way

zoomLevel is unusual: the component writes back to it.

• Zoom with the buttons or the wheel and the property updates to the new multiplier, rounded to three decimals.
• Write a number to it from a script or binding and the diagram zooms to match, clamped to zoom.min…zoom.max.

That makes it easy to keep the diagram in sync with the rest of a screen — for instance a button that jumps to a known zoom:

# Zoom the chart to 2x from a button's onActionPerformed
self.getSibling("mermaidChart").props.zoomLevel = 2

Or a label that reports the current zoom, bound directly to zoomLevel.

Avoid binding loops. Because the component writes to zoomLevel, don’t drive it with a binding that is itself recalculated from the zoom. Use a plain custom property, or a one-way binding into it — not a bidirectional chain, which will fight itself.

---

Downloading a diagram

When download.enabled and download.showControls are on, a Download ▾ button appears in the toolbar. Opening it shows the available formats; clicking one saves the file.

The file is generated in the browser from the rendered SVG — nothing is sent to the gateway — and is named mermaid-diagram-<timestamp>.svg.

SVG is the only format. The menu currently offers SVG only. SVG is vector, so it scales cleanly and opens in a browser, Visio, Illustrator, or Inkscape. If you need a raster image to paste into a report you’ll have to convert it yourself — there is no PNG or PDF export.

---

Security levels

securityLevel controls how much a diagram definition is trusted. It matters because a Mermaid definition is code, not just data. If your definitions come from a database, an operator input field, or any other source you don’t fully control, a permissive level lets that source inject markup or scripts into the page.

Level	Behaviour
strict	HTML tags in labels are escaped and click handlers are disabled. The default, and the right choice unless you have a specific reason otherwise.
antiscript	HTML is allowed but <script> tags are stripped.
loose	HTML and click handlers are allowed. Only for definitions you author yourself.
sandbox	Renders inside a sandboxed iframe. Most restrictive for scripts, but can interfere with sizing and interaction.

If a definition is ever built from data you don’t control, keep securityLevel at strict. Loosening it to enable clickable nodes on an operator-facing screen is a real trade-off, not a formality — weigh it deliberately.

When you legitimately need loose

Clickable nodes (Mermaid’s click directive) require loose. If you need them, make sure the definition is authored by you and contains no interpolated values from untrusted sources — build the clickable structure statically and inject only escaped labels.