Image export · every Mermaid format

Free Mermaid to Image Converter

Paste Mermaid code, preview it, then download it as an image. This is the place to start when you just need a diagram image and are not sure which format to use — export PNG, SVG, JPG, WebP, or PDF from one editor, all rendered locally in your browser.

No signup · No watermark · Local browser rendering · PNG / SVG / JPG / WebP / PDF · 1x / 2x / 4x output

Paste or edit Mermaid code

Replace the sample below, or load another example.

Load example

Paste Mermaid code here. Preview and export load locally in your browser.

flowchart LR
  A(Write) --> B(Preview)
  B --> C(Export)
  B --> D(Docs Asset)

Live previewSample preview · Clean Docs

Render & export

Export controls activate after your diagram renders locally.

Flowchart

Mode

Default renderNative MermaidOptimized exportStyled download

Export style

Clean DocsGitHub READMEWarm EditorialWhiteboard SketchTransparent DocsGitHub DarkSlide DarkDeep Ocean

Scale

1x2x4x

Or exact width, e.g. 1200px wide

Output: White · comfortable padding

Size: calculated after render

Filename: mermaid-flowchart-white-2x.png

Which image format should you export?

For most destinations, PNG is the safe default — it looks identical everywhere and needs no special support. Choose SVG when you want a crisp vector that scales for the web, Figma, or print. Choose PDF when the diagram goes into a document or needs to print at any size. JPG only helps with legacy upload forms that reject PNG, and WebP gives the smallest file for modern web pages. When in doubt, export PNG at 2x and move on.

Docs, README, and issues

Export PNG for the broadest compatibility, or SVG if the platform renders vectors and you want it to stay sharp.

Slides and presentations

Export a transparent PNG at 4x so the diagram sits cleanly on any slide without a white box and stays sharp on projectors.

Websites and blogs

Export WebP for the smallest file, or SVG when you want the diagram to scale with the layout.

Pick a format in three questions

Does the destination render vectors?

If yes and you want infinite scaling, use SVG. If unsure, use PNG — it always works.

Is it going into a document?

Export PDF for Word, print, or anything that needs a page-sized, scalable diagram.

Do you need transparency?

Use a transparent PNG or WebP so the diagram has no background box behind it.

Export as PNG Export as SVG Export as PDF Export as JPG Export as WebP Transparent background High-resolution export

FAQ

Questions about this Mermaid export workflow

How do I convert a Mermaid diagram to an image?+

Paste your Mermaid code into the editor above, preview the result, choose an export style and scale, then download it as PNG, SVG, JPG, WebP, or PDF. Rendering happens locally in your browser.

What is the best format to export a Mermaid diagram?+

PNG is the safest default because it looks the same everywhere. Use SVG for scalable vector output, PDF for documents and printing, WebP for small web files, and JPG only for forms that reject PNG.

Can I export a Mermaid diagram as an image without a watermark?+

Yes. Every format is free for single-diagram use and never adds a watermark. No signup is required and your diagram code is not uploaded.

Can I export a high-resolution or transparent image?+

Yes. Choose 2x or 4x scale for sharp output, and pick a transparent export style if you need the image to have no background. See the high-resolution and transparent background guides for details.