Export Mermaid Diagrams in High Resolution

Unsaved
Ready
Loading Monaco Editor...
Preview
Styling
Flowchart

Export Mermaid Diagrams in High Resolution

Export crisp, sharp Mermaid diagrams at up to 8x scale (768 DPI). No more blurry exports — get print-quality PNG, infinite-resolution SVG, or publication-ready PDF output for presentations, documentation, and print.

Resolution Guide — What Scale Do You Need?

Scale controls the pixel density of your exported diagram. Higher scale means sharper text, crisper lines, and more detail when zooming in or printing.

1x(96 DPI)
Free

~1200px wide — Quick previews, Slack thumbnails

2x(192 DPI)
Free

~2400px wide — Retina displays, web, docs

4x(384 DPI)
Pro

~4800px wide — Print, 4K displays, presentations

8x(768 DPI)
Pro

~9600px wide — Professional print, large posters

DPI for Common Use Cases

DPI (dots per inch) determines how sharp your diagram looks on screen or in print. Here's what you need for each context:

Use CaseRecommended DPIScaleFormat
Slack / Discord preview961xPNG
Blog or website1922xPNG or SVG
Google Docs / Word1922xPNG
Retina / HiDPI display1922xPNG or SVG
PowerPoint / Keynote192–3842x–4xPNG or SVG
4K display / projector3844xPNG
Print document (A4/Letter)300–3843x–4xPDF or PNG
Large poster / banner600–7686x–8xPDF or SVG
Figma / design toolsAny (vector)—SVG

Why Are My Mermaid Exports Blurry?

Most Mermaid tools export at 1x scale (96 DPI) by default. This was fine in 2010, but modern displays pack 2-4x more pixels per inch. A 96 DPI image on a retina MacBook is being upscaled by the browser — every line and character gets interpolated, making text fuzzy and edges soft.

The fix is simple: export at a higher scale. At 2x (192 DPI), the image has four times as many pixels, so it renders sharply on high-DPI screens. At 4x, it's suitable for 4K displays and print.

Quick fix for blurry exports:

  1. Open the export dialog (click Export in the header)
  2. Select the PNG tab
  3. Increase the scale to 2x (or higher)
  4. Click Export PNG — your diagram is now crisp

Which Format for High-Resolution Output?

Each export format handles resolution differently. Choose based on where you'll use the diagram:

PNG

Up to 8x (768 DPI)

Universal compatibility — works in every document, slide, and messaging app.

Fixed resolution. Choose scale before exporting.

SVG

Infinite (vector)

Always sharp at any zoom. Smallest file size. Editable in Figma.

Not supported in Word, PowerPoint, or Slack.

PDF

Vector-based

Print-ready. Sharp at any size. Professional format.

Can't be embedded inline in docs. Best for standalone files.

How to Export in High Resolution

  1. 1

    Create or paste your diagram

    Write Mermaid code in the editor above, or paste code from ChatGPT, documentation, or any other source. The diagram renders in real-time as you type.

  2. 2

    Open the export dialog

    Click the Export button in the header toolbar. You'll see tabs for PNG, SVG, PDF, and Markdown.

  3. 3

    Choose format and increase scale

    Select PNG for raster images. Set the scale to 2x for web, 4x for print, or higher. SVG and PDF are vector formats — they're always sharp regardless of size.

  4. 4

    Download your high-resolution diagram

    Click Export to download. The file is ready for presentations, technical documentation, client deliverables, or print.

Free vs Pro Export Quality

The free tier covers most web use cases. Pro unlocks professional-grade output for print and high-DPI contexts.

FeatureFreePro
Max PNG scale2x (192 DPI)8x (768 DPI)
SVG exportIncludedIncluded
PDF exportIncludedIncluded
Transparent backgroundIncludedIncluded
WatermarkIncludedRemoved
4K+ resolution—Up to 9600px wide
Print quality (300+ DPI)—Up to 768 DPI
View Pro Plans

High-Resolution Export for Every Diagram Type

All 21 Mermaid diagram types support high-resolution export. Complex diagrams with many nodes benefit the most from higher scale settings — small text stays readable even when the diagram is dense.

  • Flowcharts
  • Sequence Diagrams
  • Class Diagrams
  • ER Diagrams
  • Gantt Charts
  • State Diagrams
  • Pie Charts
  • Mind Maps
  • User Journey Maps
  • Git Graphs
  • C4 Diagrams
  • Timeline Diagrams
  • Sankey Diagrams
  • XY Charts
  • Block Diagrams
  • Architecture Diagrams
  • Quadrant Charts
  • Requirement Diagrams
  • Kanban Boards
  • Packet Diagrams
  • ZenUML Diagrams

Frequently Asked Questions

Export Guides

Export to PNG

Download diagrams as high-resolution PNG images for documents and presentations.

Export to SVG

Infinite-resolution vector export for web, design tools, and scaling.

Export to PDF

Print-ready PDF export for professional documentation and archiving.

Paste Mermaid Code

Paste mermaid code from ChatGPT or any source and render instantly.

Export Flowcharts

Export Mermaid flowcharts to PNG, SVG, or PDF with custom themes.

Export ER Diagrams

Export entity-relationship diagrams in high resolution for documentation.