Mermaid to Image – Export Diagrams as PNG or SVG

How to convert a Mermaid diagram to an image

Paste Mermaid code, or load a UTF-8 Markdown or MMD file. Preview updates automatically after you pause typing.

If the document has several diagrams, choose one above the preview. Open Options to set the theme, background, padding and output format.

Download PNG for a raster image or SVG for a scalable diagram. PNG scale changes the exported resolution, not the diagram layout.

Mermaid to image FAQ

Does this convert an entire Markdown document to an image?

No. It extracts Mermaid code blocks from Markdown and exports one diagram at a time. Surrounding headings, paragraphs and ordinary code blocks are not included. Use Markdown Editor to preview the complete document.

Should I choose PNG or SVG?

PNG preserves the rendered appearance and works well in documents and presentations. SVG stays sharp when enlarged, but fonts may differ on another device. Both support transparent backgrounds; PNG offers 1× to 4× export scale.

Which diagrams can I render?

Common Mermaid diagrams include flowcharts, sequence, class, state and entity-relationship diagrams, Gantt charts and pie charts. Labels use available device fonts. Interactive callbacks, embedded HTML and external images are not supported.

Is processing local, and are there size limits?

Rendering and export happen in your browser. Input is limited to 200,000 characters, imported files to 200 KB, and documents to 20 diagrams. Each diagram allows 20,000 characters and up to 250 connections. PNG exports are limited to 8,192 pixels per side and 16 megapixels.