Export Mermaid Diagrams to High-Res PNG

Unsaved
Ready
Loading Monaco Editor...
Preview
Styling
Flowchart

Export Mermaid Diagrams to High-Res PNG

Download your Mermaid diagrams as high-resolution PNG images — up to 8x scale (768 DPI) for 4K displays, print documents, and retina screens. No more blurry exports.

Benefits of PNG Export

  • Universal compatibility — works in every document, slide, and messaging app
  • Up to 8x scale (768 DPI) for 4K and print-quality output
  • Transparent or solid background options
  • Crisp text and lines on retina and HiDPI displays

Best For

Microsoft Word and Google Docs
PowerPoint and Keynote presentations
Slack, Teams, and email sharing
README files and documentation

Export Settings

Scale (DPI)

1x = 96 DPI (web preview), 2x = 192 DPI (retina/web), 4x = 384 DPI (print/4K), 8x = 768 DPI (professional print). Free tier supports up to 2x, Pro unlocks up to 8x.

Background

Transparent for overlaying on colored slides or dark interfaces, or solid color for standalone use

Padding

Add margin around the diagram for cleaner framing

Need higher resolution? See our complete guide to high-resolution exports — up to 8x scale (768 DPI) for print-quality output.

How to Export to PNG

  1. 1

    Create your diagram

    Write your Mermaid code in the editor above or use one of our templates.

  2. 2

    Click the Export button

    Find the Export button in the header to open the export dialog.

  3. 3

    Select PNG format

    Click the PNG tab to see png-specific options.

  4. 4

    Configure and download

    Adjust settings as needed and click Export PNG to download.

Frequently Asked Questions

Related Export Guides