TryMermaid

Mermaid to PNG converter

Paste Mermaid code, see it render, and download a PNG at whatever size you need. Free, no sign-up, and it works for every Mermaid diagram type.

Open the editor with this example Start with a blank diagram

Rendering preview…

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

  1. Step 1

    Paste your code

    Open the editor and paste your Mermaid code into the code panel.

  2. Step 2

    Check the preview

    The preview renders as you type. If the code has an error, the editor points at the line so you can fix it before exporting.

  3. Step 3

    Choose a size

    Open the export menu, choose Auto for the natural size or set an exact width or height in pixels.

  4. Step 4

    Download the PNG

    Click PNG to download the file, or Copy image to put it straight on your clipboard.

Auto, width or height

Auto exports the diagram at its natural size, which is right for most uses. Width and Height let you name an exact pixel value, which is what you want when an image has to fit a slide, a documentation template or a fixed column. Only one dimension is set; the other follows the shape of the diagram so nothing is squashed.

Getting a sharp image

A PNG is a fixed grid of pixels, so it blurs when it is scaled up. Export at two or three times the display size if the image will be viewed on a high-resolution screen or printed. If you want something that stays sharp at any size, export SVG instead.

Hand-placed layouts are kept

If the diagram was arranged by hand on the visual canvas, the export uses that layout rather than re-arranging it. What you see on the canvas is what lands in the image.

What this does not do

  • PNG exports have a solid background rather than a transparent one. For transparency, export SVG.
  • Very large diagrams export fine, but check the preview first: a diagram that is hard to read on screen will be hard to read as an image.

Frequently asked questions

Do I need an account to convert Mermaid to PNG?

No. Paste your Mermaid code, check the preview and download the PNG. An account is only needed if you want to save the diagram and open it again later.

How do I export a Mermaid diagram at a specific size?

Open the export menu and switch the PNG size from Auto to Width or Height, then type the number of pixels you want. The other dimension is worked out from the diagram so nothing is stretched.

What size should I export for a presentation or a retina screen?

Set a width two or three times the size the image will be displayed at. A diagram shown 800 pixels wide in a document looks sharp on a high-resolution screen when exported at 1600 or 2400 pixels.

Can I export a PNG with a transparent background?

PNG exports are drawn on a solid background that matches the page, so they are not transparent. Export SVG instead if you need the diagram to sit on a coloured background, because an SVG has no background of its own.

Does this work for sequence, class and ER diagrams too?

Yes. Every Mermaid diagram type exports the same way: flowcharts, sequence, class, ER and state diagrams, mind maps, Gantt charts, timelines, pie charts and the rest.

Can I copy the image without downloading a file?

Use Copy image in the export menu instead of downloading. The PNG goes straight to your clipboard, ready to paste into Slack, a document or a ticket.