Presentation decks
Use 4x when diagrams need to remain crisp on large screens or inside branded slide layouts.
High-resolution export · 2x and 4x
Mermaid High Resolution Export
Avoid blurry Mermaid screenshots. Render the diagram in your browser, choose a readable preset, then export at 2x or 4x so labels, arrows, and connectors stay sharp in slides, docs, and retina screenshots.
No signup · No watermark · 1x / 2x / 4x output · Final pixel size shown before download
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.
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 READMETransparent DocsWarm Editorial✦ ProWhiteboard Sketch✦ ProAurora Noir✦ ProBlueprint✦ ProChampagne✦ ProEmerald Suite✦ ProEditorial✦ Pro
Scale
1x2x4x
Or exact width, e.g. 1200px wide
Output: White · comfortable padding
Size: calculated after render
Filename: mermaid-flowchart-white-4x.png
How to choose 1x, 2x, and 4x export
Resolution is a workflow decision. 1x is fine for quick previews, 2x is a strong default for documentation, and 4x is best for presentations, retina displays, and large screenshots — on a big diagram, 4x output reaches roughly 4K width. When you need an exact size, set a specific pixel width before exporting instead of relying on scale, so the image fits a fixed slot in slides, docs, or print.
Retina documentation
Use 2x or 4x when documentation platforms resize images but readers still need small labels to remain sharp.
Blog and social images
Export larger source images before cropping or compressing them for tutorials, social cards, and product explainers.
High-resolution export checklist
1x for quick checks
Use 1x when you only need a fast draft export or want to keep file size very small.
2x for normal docs
Use 2x for README files, internal docs, and screenshots that will be viewed inline.
4x for slides
Use 4x for presentations and retina contexts. Check the displayed pixel size before downloading.
FAQ
Questions about this Mermaid export workflow
What does 4x Mermaid export mean?+
4x means the raster image is generated at four times the base scale, producing more pixels so labels and connectors remain sharper after resizing.
Why are Mermaid screenshots blurry?+
Screenshots usually capture the current screen size, then platforms resize or compress them. Exporting at 2x or 4x creates a sharper source image.
Should I always use 4x?+
No. 4x is best for slides and large outputs, but it creates bigger files. Use 2x for normal docs and WebP when web performance matters.
Can high-resolution exports be transparent?+
Yes. Use a transparent preset and export PNG at 2x or 4x for sharp transparent diagrams.
Can I export a 4K Mermaid diagram?+
Yes. Export at 4x on a large diagram and the output reaches roughly 4K width. The final pixel size is shown before you download, so you can confirm it meets a 4K or print target.
Can I set an exact export width or dimensions?+
Yes. Instead of only 1x, 2x, or 4x, you can enter an exact pixel width so the exported image matches a fixed size for slides, documents, or print layouts.
How do I export for retina or high-DPI screens?+
Export at 2x or 4x. Retina and high-DPI displays pack more pixels per point, so a 2x or 4x image stays sharp where a 1x export would look soft.