Mermaid to image · High resolution · No upload

Mermaid to PNG — diagram to image

Turn Mermaid code into a sharp PNG you can paste into Slack, Jira, Google Docs or a slide in one click.

How to convert a Mermaid diagram to an image online

  1. Paste the Mermaid code — straight from ChatGPT or Claude is fine, the ```mermaid fence is removed for you — or upload a .mmd or .md file.
  2. Check the preview. Errors are explained in plain English and can be fixed in one click.
  3. Pick a resolution and click Download PNG, or Copy PNG to paste the image directly into a document or chat.

Choosing the resolution

  • 1x — the diagram at its natural size. Good for quick previews and small inline images.
  • 2x — the default. Sharp on Retina and high-DPI screens and the best choice for Google Docs, Notion, Confluence and GitHub issues.
  • 3x — for slides shown on projectors, printed handouts and large diagrams with small labels.

The PNG is drawn from the vector diagram at the size you choose rather than scaled up afterwards, so text stays crisp and is never cut off at the edges. Very large diagrams are capped at a safe canvas size so the browser does not run out of memory.

When PNG is the better format

PNG works everywhere: chat apps such as Slack and Teams, issue trackers such as Jira and Linear, email, Google Slides and most wikis accept it without fuss. If you need to edit the diagram later or keep it sharp at any size, export an SVG instead. For slides with a coloured background, tick Transparent so the diagram sits directly on the slide.

Everything stays on your device

The image is rendered and encoded in your browser. Your diagram code is not uploaded, logged or stored on a server. To turn every diagram in a Markdown file into images in one go, use extract Mermaid from Markdown, which downloads them as a ZIP. Broken code? Start with the Mermaid syntax fixer.

FAQ

What resolution should I use for slides?

Use 2x for most slides and 3x for projectors, print or diagrams with lots of small text. 1x is fine for small inline previews.

Why is the PNG blurry when I paste it somewhere?

The target app is probably scaling it up. Export at 2x or 3x, or use SVG if the app supports it.

Copy PNG does not work in my browser — why?

Copying images needs the Clipboard API, which current Chrome, Edge, Safari and Firefox support. Some browsers block it on insecure pages or in private modes; use Download PNG instead.

Can the PNG have a transparent background?

Yes. Tick Transparent before exporting. Without it, the background matches the theme: white for default, neutral and forest, dark grey for dark.