Mermaid to WebP converter
Paste Mermaid code and download a WebP: a smaller file than PNG with the same sharp edges and optional transparency. Free and runs in your browser.
flowchart LR
A[Write Mermaid] --> B[Preview it]
B --> C{Looks right?}
C -->|No| A
C -->|Yes| D([Export the image])How to do it
- Step 1
Paste your code
Paste your Mermaid code into the box above.
- Step 2
Choose a look
Pick a theme and a background, including Transparent.
- Step 3
Size and quality
Set the size and quality.
- Step 4
Download the WebP
Click Download WebP.
Smaller images for the web
If your diagrams live on a website, file size is load time. A WebP of a typical flowchart is a fraction of the PNG's size, which adds up on pages with several diagrams. If the site can serve SVG, that is smaller still and stays sharp at any zoom.
Serving WebP with a fallback
Use the picture element to offer WebP with a PNG fallback: a source with type image/webp, then an img pointing at the PNG. Browsers pick the first format they support.
What this does not do
- Some desktop apps and older tools still do not open WebP. Use PNG for those.
- Encoding depends on your browser; older Safari versions fall back to PNG.
Frequently asked questions
Why export WebP?
WebP files are usually much smaller than the same diagram as PNG, which helps page speed on documentation sites and blogs. Every current browser displays WebP.
Does WebP support transparency?
Yes. Choose Transparent as the background and the WebP keeps an alpha channel, like a PNG.
Will the quality be as good as PNG?
At 100% quality the WebP is near-lossless and very close to the PNG. At 90% it is noticeably smaller and still sharp for most diagrams.
Does it work in every browser?
WebP encoding is done by your browser. Chrome, Edge, Firefox and Safari 16 or later all encode WebP. On an older Safari the download falls back to PNG, and the tool says so.