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 web use
• SVG: Vector format, scales perfectly at any size

How to Export

Save as PNG

1. Open your Mermaid file in the editor
2. Right-click in the editor and select Save as PNG…
3. Or use the keyboard shortcut Ctrl+Alt+Shift+P
4. Choose export options in the dialog
5. Select where to save the file

Save as SVG

1. Open your Mermaid file in the editor
2. Right-click in the editor and select Save as SVG…
3. Or use the keyboard shortcut Ctrl+Alt+Shift+S
4. Select where to save the file

Copy as SVG

To copy the SVG directly to your clipboard:

1. Right-click in the editor and select Copy as SVG
2. Or use Ctrl+Alt+Shift+C
3. Paste the SVG into your target application

PNG Export Options

When exporting to PNG, you can configure the output size:

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

You can also choose to open the file in the IDE after saving.

Theme Matching

Exported images use the same theme as your IDE:

• If you are using a dark IDE theme, exports use dark diagram colors
• If you are using a light IDE theme, exports use light diagram colors

To export with a different theme, temporarily switch your IDE theme before exporting.

Tips

• SVG for documentation: Use SVG when the diagram will be viewed at different sizes or when you need crisp text at any zoom level
• PNG for presentations: Use PNG when inserting into PowerPoint, Keynote, or similar tools
• High-resolution PNG: Set a larger width (e.g., 1600px or 2000px) for sharper images in presentations