mermaidto png
Runs in your browser
Syntax guide
DIAGRAMS + DOCUMENTATION

Convert Mermaid diagrams to transparent PNG

Buy me a coffee

Convert Mermaid code to PNG with a transparent background, SVG or JPEG. Choose a theme, export at full resolution or copy the diagram. Free, local, no account.

No sign-up.
Just useful tools.
THE WORKSPACE / A LITTLE ROOM TO THINK

Source

MERMAID
Rendering...7 lines / UTF-8
Your source stays yours

Rendering and downloads happen on your device. Drafts are saved only if you enable Remember my work. Download your source to keep a portable copy.

Preview

LIVE
Light
TRANSPARENT CANVAS
Connecting the dots...
100%

Make it yours.

A fresh look. The perfect format.

File format
Background
Saved as a-little-idea.png
Waiting for diagram
Paste into documents or Markdown. Image paste support depends on the destination.
Optional. Source and settings stay in this browser. Clearing removes all saved tool drafts.
A BETTER WAY TO EXPORT

Your diagram. Ready for anywhere.

Turn Mermaid.js text into images for documentation, presentations and project plans. No screenshots, no watermarks, no account.

One transparent PNG, two backgrounds

This Draft, Review, Publish workflow is an actual export: Light theme, PNG, 2x resolution, 24 px padding, with Transparent enabled.

flowchart LR
    Draft --> Review --> Publish
Transparent PNG of Draft leading to Review and Publish, shown on a light panel
Light backdrop / 1018 x 236 pixels
The same Draft, Review, Publish PNG shown on a dark panel
Dark backdrop / 1018 x 236 pixels

The panels use the same file; the labels show its actual exported dimensions. Only the surrounding canvas is transparent: node fills keep the Light theme colors. Change the diagram theme if you want different node colors.

How to convert Mermaid to PNG

  1. Paste your Mermaid code. Use the source editor above, import a .mmd file, or start with a flowchart, sequence or class-diagram example.
  2. Check the live preview. Fix any syntax feedback, then select a theme. The preview updates without sending your source anywhere.
  3. Choose PNG and your resolution. Keep Transparent enabled for slides and overlays. Adjust padding and the filename to suit your document.
  4. Download the image. The displayed pixel dimensions are the actual export size. Large diagrams keep the selected resolution rather than being silently shrunk.
Open the Mermaid converter

PNG, SVG or JPEG?

PNG

Documents, slides and transparent images

Lossless pixels keep diagram text and colors crisp. Supports transparent backgrounds and high-resolution exports at 1x through 4x.

SVG

Scalable diagrams and design tools

Vector lines and text stay sharp when resized. Export a self-contained SVG for compatible documentation tools, websites and design software.

JPEG

When your destination requires JPEG

A maximum-quality JPEG with a solid theme-colored background. For precise text and transparency, PNG or SVG is usually the better choice.

18 presets, plus your own colours.

Choose GitHub or GitHub Dark, One Light or One Dark, Monokai, Gruvbox, Solarized, Tokyo Night, Nord and Catppuccin palettes. Or select Custom and pick your own background, node, text, line and accent colours. The same controls work for PNG, JPEG, SVG, batch exports and Markdown diagram previews. These are editor-inspired Mermaid adaptations, not official editor themes. Custom Mermaid class colours still take precedence.

  • Light
  • Dark
  • Dracula
  • Tokyo Night
  • Nord
  • Catppuccin
  • GitHub
  • Solarized
  • GitHub Dark
  • GitHub Dimmed
  • One Dark
  • One Light
  • Monokai
  • Gruvbox Dark
  • Gruvbox Light
  • Solarized Dark
  • Tokyo Night Light
  • Catppuccin Latte
GOOD QUESTIONS

Mermaid export, explained.

Is this Mermaid to PNG converter free?

Yes. The editor and PNG, JPEG and SVG downloads are free, with no account and no watermark. Optional Buy Me a Coffee contributions help cover hosting costs; they never unlock or restrict features.

How do I export Mermaid with a transparent background?

Select PNG, turn on Transparent, and download. The checkerboard is only a preview: the file contains real alpha transparency, not a checkerboard pattern. SVG also supports transparency. JPEG does not, so it uses a solid background from your selected theme.

Which format gives the sharpest diagram?

Use SVG when you need vector graphics that stay sharp at any zoom. Use PNG for crisp text, exact colors and compatibility with documents or slides. Choose 2x, 3x or 4x for more pixels. JPEG is lossy, so even maximum-quality JPEG can soften fine text or colored edges.

Can I convert large Mermaid diagrams to high-resolution images?

Yes. Large PNG and JPEG exports are rendered in small tiles and encoded at the selected dimensions, without automatic downscaling. The processing budget is 256 megapixels and 1,000,000 pixels per side. JPEG has a 65,500-pixel side limit. Unsupported settings are explained before download; PNG or SVG can preserve larger diagrams.

Is my Mermaid source uploaded to a server?

No. Rendering and image conversion happen locally in your browser. There are no analytics or remote conversion APIs. The host receives normal requests for website files, not your source. Drafts are saved only if you enable Remember my work on this device. Clear saved data removes all saved tool drafts; downloading .mmd keeps a portable copy.

Which Mermaid diagram types can I export?

Flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, mindmaps, timelines, pie charts and Gantt charts are covered by our browser checks. The editor uses Mermaid with strict security and text-only SVG labels. External images, HTML labels and source configuration overrides are not supported.

Can I share a diagram with someone else?

The Share diagram button creates an unlisted link containing compressed source and theme in the URL fragment. Anyone with that link can open and edit a copy. It is not encrypted, password-protected or revocable, and may remain in browser history. Do not share confidential source this way.

Mermaid to PNG is an independent tool built with Mermaid.js, not the official Mermaid project. Need syntax help? Read the Mermaid syntax reference.