Interactions

The built-in renderer provides source copying, browser fullscreen, an expand overlay, and zoom/pan controls. A successfully resolved Custom Renderer replaces all of them, so this page applies only to the built-in renderer.

Choose visible toolbar controls

The toolbar appears above each built-in diagram. Its title and controls are enabled by default:

export default defineNuxtConfig({
  contentMermaid: {
    toolbar: {
      title: 'Architecture',
      fontSize: '14px',
      fullscreenToolbarScale: 1.25,
      buttons: {
        copy: true,
        fullscreen: true,
        expand: true,
      },
    },
  },
})

copy copies Mermaid source. After an attempt, its button temporarily uses Copied or Copy failed as its title and accessible label; the renderer first uses the Clipboard API and then attempts the browser's legacy copy fallback. fullscreen is displayed only when the browser supports the Fullscreen API. expand opens the in-page overlay.

Set a button to false to hide it. Hiding the expand button does not disable opening an overlay by clicking a diagram; control that separately with expand.invokeOpenOn.diagramClick.

Configure opening and closing

expand is enabled by default. Its close controls are independently configurable:

export default defineNuxtConfig({
  contentMermaid: {
    expand: {
      margin: 24,
      invokeOpenOn: {
        diagramClick: true,
      },
      invokeCloseOn: {
        esc: true,
        wheel: true,
        swipe: true,
        overlayClick: true,
        closeButtonClick: true,
      },
    },
  },
})

margin keeps pixels around the expanded SVG. Set expand: false to disable the feature entirely. See Configuration for the boolean-preset and object-patch distinction.

See Expand configuration for the complete option paths, defaults, and effects.

The browser fullscreen control exits through the browser's normal fullscreen behavior. It does not use the expand-overlay close policy.

Zoom and pan a large diagram

Fullscreen and the expanded overlay show zoom-out, zoom-in, percentage, and reset controls. The same mappings work in either view:

In the expand overlay, an unmodified wheel over the diagram does not zoom; it displays a one-time hint to use Ctrl or ⌘ plus scrolling. A wheel over the overlay background follows the configured close behavior. A pinch is treated as a diagram manipulation, not a swipe-to-close gesture.

Keep controls understandable and accessible

The built-in controls use native buttons and accessible labels, including Copy, Enter/Exit fullscreen, Expand/Collapse diagram, Zoom In/Out, Reset Zoom, and Minimize diagram. Keyboard users can operate controls and use the zoom shortcuts while a diagram is expanded or fullscreen.

When you disable a close path, provide another reachable close path. In particular, if you turn off esc, overlayClick, and closeButtonClick, users may have no obvious way to exit the expanded view. When you replace the built-in renderer, recreate equivalent labels, keyboard access, focus behavior, and touch affordances in your own component.