ImageToMermaid LogoImageToMermaidTry Image → Mermaid

Mermaid to PNG

Paste Mermaid code, preview it live, and download it as a PNG or SVG. Choose the resolution and whether the background is white or transparent. It all runs in your browser — free, no signup, and nothing is uploaded.

Mermaid Code
Preview

Working from a diagram screenshot?

Convert image to Mermaid — free, no signup required

How to convert Mermaid to PNG

  1. Paste your Mermaid code into the editor above, or use Open file to load a .mmd, .mermaid or .md file — you can also drag one anywhere onto this page. The preview redraws as you type, so syntax errors show up immediately rather than at download time.
  2. Pick a scale. 1× matches the size Mermaid lays the diagram out at; 2× is the right default for anything you'll paste into a document; 3× is for print or a large display.
  3. Choose a background. White is safest for sharing. Switch to transparent if you're placing the diagram onto a coloured slide.
  4. Click PNG to download. Everything happens in your browser — the diagram is never uploaded, so it works offline and nothing is stored.

PNG or SVG: which should you use?

PNG is a raster format. It stores a fixed grid of pixels, so it pastes cleanly into anywhere that accepts an ordinary image — Slack, Google Docs, Notion, Jira, PowerPoint — but it blurs if anyone enlarges it beyond the size you exported. That's why the scale control matters: exporting at 2× gives the image room to be displayed larger without going soft.

SVG is a vector format. It stays sharp at any size, the file is usually far smaller, and the text inside it stays real text — selectable, searchable, and editable in Figma or Illustrator. The catch is that some tools still won't accept an SVG upload. A reasonable rule: SVG when you control the destination, PNG when you don't.

Fixing common export problems

The diagram vanishes when pasted into a dark-themed document

That's a transparent background combined with Mermaid's near-black default text. Export with the white background option — it's the default here for exactly this reason.

The PNG looks blurry

It was exported at too low a resolution for where it's being displayed. Raise the scale to 2× or 3×. The pixel dimensions are shown above the preview before you download, so you can check rather than guess.

A large diagram is cut off

Very large diagrams can exceed the browser's maximum canvas size at high scales. Drop to 1×, or download SVG, which has no such limit because it isn't rasterised at all.

Fonts differ from the preview

Rasterising resolves fonts against the ones installed locally instead of embedding them. Mermaid's defaults are common system fonts so this rarely shows, but a custom-themed diagram should be exported as SVG to preserve its typography exactly.

Frequently asked questions

How do I convert Mermaid code to a PNG image?

Paste your Mermaid code into the editor above, or open a .mmd file. The diagram renders as you type. Choose a scale and background, then click PNG to download it. There's no signup and no upload step.

Should I export PNG or SVG?

Export PNG when the diagram is going somewhere that expects an ordinary image — Slack, Google Docs, Jira, PowerPoint, a README. Export SVG when the diagram needs to stay sharp at any size, such as print, a large display, or further editing in Figma or Illustrator. SVG also keeps the text selectable and searchable, which PNG cannot.

What resolution is the exported PNG?

The diagram's own size multiplied by the scale you pick, so a 1× export matches the dimensions Mermaid lays the diagram out at and 2× doubles them. The exact pixel size is shown next to the download buttons before you click. It does not depend on your window size, so the same diagram exports identically on any screen.

Can I export a PNG with a transparent background?

Yes — switch the background to Transparent before downloading. White is the default because transparent PNGs look broken when pasted into a dark-themed document: the diagram's dark text disappears against the dark background. Transparent is the right choice when you're placing the diagram onto a coloured slide.

Can I convert a .mmd file to PNG?

Yes. Click Open file, or drag the file anywhere onto this page. .mmd, .mermaid, .txt and .md files are all accepted. If you load a Markdown file, the first ```mermaid block in it is extracted automatically, so you can drop a README straight in without editing it first.

Is my diagram uploaded to a server?

No. Mermaid renders in your browser and the image is produced by your browser's canvas, so the code and the resulting file never leave your machine. Files you open are read locally too. This page works offline once loaded.

Why do the fonts look different in the exported PNG?

A PNG is produced by rasterising the SVG, and that process resolves fonts against the ones installed on your computer rather than embedding them. Mermaid's default stack (Trebuchet MS, Verdana, Arial) is made of common system fonts, so this is usually invisible. If you've themed a diagram with a custom font and need it preserved exactly, export SVG instead.

Is it free?

Yes, and there's no account required. Rendering and exporting happen entirely in your browser, so this page costs us nothing to run and isn't metered. Our paid credits apply only to AI-powered image-to-Mermaid conversion.

Going the other way

This page turns Mermaid code into an image. If you have a diagram and need the Mermaid code, start from its source file — that converts exactly, with no guesswork: