Troubleshooting · Blurry diagrams
Why Your Mermaid Screenshot Looks Blurry
A screenshot of a Mermaid preview almost always turns fuzzy by the time it lands in a README, wiki, or slide deck. The diagram itself is fine — the capture method is the problem. The fix takes a minute: export the diagram from a renderer as SVG or a high-resolution PNG instead of photographing your screen.
No signup · No watermark · Local browser rendering · SVG and 1x / 2x / 4x PNG output
Why does the screenshot turn blurry?
A screenshot rasterizes the preview at whatever resolution your monitor happens to show it — often smaller than the diagram's natural size. Then the destination platform resizes it to fit the page width, recompresses it, and displays it on screens denser than yours. Every step throws away detail, and thin lines and small labels degrade first. Exporting from the renderer skips all of that: SVG stays vector forever, and a 2x or 4x PNG starts with enough pixels to survive resizing.
Replace the screenshot in four steps
- 1
Paste the original Mermaid code
Go back to the source — the Mermaid code the diagram came from — and paste it into the converter below. If you only have the screenshot and no code, this is the moment to recreate it; you will never need to do it again.
- 2
Pick a style for the destination
Clean Docs and GitHub README fit documentation on white pages. Use a dark preset for dark-mode docs, or a transparent background when the diagram sits on colored slides.
- 3
Export SVG, or PNG at 2x-4x
SVG is vector, so it never blurs at any zoom — use it wherever the platform accepts it. Otherwise export PNG at 2x for inline docs and 4x for slides and large displays. The export dialog shows the final pixel size before you download.
- 4
Swap the file in place
Replace the screenshot with the exported file and keep the Mermaid source in the repo or page alongside it. Next time the diagram changes, you re-export in seconds instead of re-screenshotting.
Export your diagram here
Paste your Mermaid code below, pick a style, and download the image. Everything renders locally in your browser — no signup, no watermark.
Export controls activate after your diagram renders locally.
Which export makes it sharp?
Vector output stays crisp at every zoom level and screen density. First choice for documentation sites, wikis, and GitHub READMEs.
Twice the pixel density of your screen. Survives the resizing that documentation platforms and issue trackers apply to uploaded images.
For presentations, large monitors, and any image readers will zoom into. Larger file, but labels stay readable at full-screen size.
FAQ
Questions about this workflow
Why does my Mermaid diagram look blurry after uploading it?+
The platform resized your image to fit its layout. A 1x screenshot has no pixels to spare, so resizing softens text and lines. Upload an SVG or a PNG exported at 2x or higher so the image still has enough detail after scaling.
Is SVG always the sharpest option?+
For sharpness, yes — vector graphics render crisply at any size. The catch is compatibility: some platforms, like Google Docs and many chat tools, reject or mishandle SVG uploads. Use PNG at 2x-4x there.
What export scale should I use for slides versus docs?+
2x for inline documentation and READMEs, 4x for presentations, posters, and anything viewed full-screen. 1x is only for quick previews where sharpness does not matter.
The diagram is sharp but looks wrong on dark backgrounds — why?+
That is a background issue, not a resolution issue. Export with a solid white background for a document look, or use a dark preset or transparent background so the diagram blends with dark pages and slides.
Can I fix an existing blurry screenshot without the Mermaid code?+
Not really — upscaling a blurry raster image cannot recover detail that was never captured. Rebuild the diagram as Mermaid code once, then every future export is sharp and takes seconds.