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 · GitHub README
Render & export
Export controls activate after your diagram renders locally.
Flowchart
Mode
Default renderNative MermaidOptimized exportStyled download
Export style
Clean DocsGitHub READMENotion DocWhiteboard SketchTransparent DocsGitHub DarkLinear DarkTokyo NightSlide TransparentSlide DarkExecutive DeckEditorial Card
Scale
1x2x4x
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, large screenshots, or diagrams that will be resized by another tool.
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.