Export Diagrams

Mermaid Studio lets you export your diagrams as image files for use in documentation, presentations, or anywhere else you need them.

Export Formats

You can export diagrams in two formats:

• PNG: Raster image format, best for presentations and general use
• SVG: Vector format, scales perfectly at any size

Export to File

To export a diagram:

1. Open your Mermaid file in the editor.

2. Right-click and select Export Diagram…

3. Select your format (PNG or SVG) from the Format dropdown.

4. Configure scale and options as needed.

5. Click OK and choose where to save the file.

The diagram is exported and saved to your chosen location. If you enabled Open file after saving, it will open automatically in the IDE.

Pop-out Preview

The Export Diagram… action is also available from the context menu in the pop-out preview panel, so you can export diagrams from Markdown files that contain Mermaid code blocks.

Export Options

Scale

The Scale settings control the output image dimensions. These options apply to PNG exports only.

Mode

• Auto: Uses the diagram’s natural size at your display’s native resolution
• Width: Specify a fixed width in pixels (height adjusts proportionally)
• Height: Specify a fixed height in pixels (width adjusts proportionally)

Size: Enter the pixel dimension when using Width or Height mode.

High-density output: When enabled, scales the image to match your display’s pixel density for sharper results on HiDPI screens. This option is disabled when using Auto mode (which always uses native resolution).

Background

The Background settings control whether a background color is baked into the exported PNG. This option applies to PNG exports only.

Background color: When enabled, fills the image background with the selected color instead of leaving it transparent. Click the color swatch to choose a different color.

The default color is based on the diagram’s effective Mermaid theme: black for the dark theme, white for all others. The theme is resolved from the diagram’s frontmatter first, then your export settings.

Options

Open file after saving: Automatically opens the exported file in the IDE after saving.

Show preview: Toggle the live preview panel on the right side of the dialog.

Configure export settings…: Opens the Mermaid Runtime configuration where you can set a default theme for exports.

Live Preview

The export dialog includes a live preview panel that shows exactly how your diagram will look when exported. The preview updates automatically as you change settings.

Preview toolbar:

• Grid: Toggle a checkerboard pattern to visualize transparency
• Zoom controls: Zoom in, zoom out, and fit to window

The metadata bar shows the current dimensions, format, and file size of the rendered image.

Copy to Clipboard

To copy the diagram as SVG directly to your clipboard:

Right-click in the editor and select Copy as SVG.

A notification confirms that the diagram has been copied.

You can then paste the SVG directly into compatible applications, such as document editors or graphic design software.

Theme Selection

Exported diagrams use Mermaid’s default theme unless you specify a different one.

To export a diagram with a specific theme, set the config.theme property in your diagram’s frontmatter block. You can also set a default theme for all exports in the export settings.

---
config:
    theme: forest
---
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Fix it]

Configuring Export Settings

To set a default theme or other Mermaid configuration options for all exports:

1. Go to Settings > Tools > Mermaid Studio > Mermaid Runtime.

2. Click Edit… next to Export.

3. Edit the YAML to set your preferred options, such as the theme property.

4. Save or close the editor to apply the changes.

You can also access this configuration directly from the export dialog by clicking Configure export settings….