TryMermaid

Mermaid to SVG converter

Paste Mermaid code, preview it, and download an SVG that stays sharp at any size and has no background of its own. Free and no sign-up.

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.

  2. Step 2

    Check the preview

    Check the live preview and fix any syntax the editor flags.

  3. Step 3

    Export SVG

    Open the export menu and choose SVG.

  4. Step 4

    Use it anywhere

    The file downloads ready to drop into a documentation site, a slide or a repository.

Vector rather than pixels

Because an SVG is drawn from shapes rather than pixels, it looks the same at any zoom level. That makes it the better format for documentation sites, PDFs and print, where a PNG would need exporting again at a larger size.

Transparent by nature

An SVG has no background, so the diagram sits directly on whatever is behind it. On a dark background, use a Mermaid dark theme so the text stays readable.

Friendly to version control

An SVG is text under the hood, so it compares cleanly in version control. A diagram committed as SVG shows a readable diff instead of a binary blob.

What this does not do

  • Some tools and chat apps do not accept SVG uploads. Export PNG for those.
  • An SVG carries its fonts by reference, so a viewer without the same font may substitute one. Exporting PNG avoids that.

Frequently asked questions

Why export SVG instead of PNG?

An SVG is a vector image: it is drawn from shapes and text rather than pixels, so it stays sharp at any size and usually takes less space. Use SVG for documentation sites, print and anywhere the image may be resized. Use PNG when a tool only accepts a bitmap.

Do I need an account?

No. Paste the code, check the preview and download the file. An account is only needed to save diagrams to reopen later.

Does the SVG have a transparent background?

Yes. An SVG has no background of its own, so it sits on whatever colour is behind it. That makes it the right choice for a dark-themed site or a coloured slide.

Is the text in the SVG still selectable?

The text stays as real text in the SVG, so it can be selected, searched and read by screen readers, and it scales without blurring.

Does it work for every Mermaid diagram type?

Yes, every diagram type exports to SVG: flowcharts, sequence, class, ER and state diagrams, mind maps, Gantt charts and the rest.