How to convert Mermaid to SVG
- Paste your Mermaid code above.
- Choose a theme and background.
- Click Download SVG or Copy SVG code to paste it into HTML, Figma or a design tool.
Why SVG is the best format for diagrams
SVG is a vector format: it stays perfectly sharp at any size, the file is usually tiny, and text inside it remains selectable and searchable. It's ideal for documentation sites, blog posts and design hand-offs.
Compatibility
MermaidViewer exports SVG using real SVG <text> labels instead of HTML foreignObject elements, so the file opens correctly in Figma, Adobe Illustrator, Inkscape, PowerPoint and Keynote — not just in browsers.
- Need a raster image? Use Mermaid to PNG.
- Need a document? Use Mermaid to PDF.
- Want to style it first? Read the themes and styling guide.
Frequently asked questions
Will the SVG work in Figma or Illustrator?
Yes. Labels are exported as SVG text rather than embedded HTML, which design tools can import.
Can I get the SVG code instead of a file?
Yes. Click Copy SVG code to copy the markup to your clipboard.
Is it free?
Yes. There is no watermark, limit or sign-up.
More free tools
- Mermaid to PNG — Convert Mermaid code to a high-resolution PNG image online.
- Mermaid to PDF — Convert Mermaid diagrams to vector PDF files in your browser.
- Markdown Mermaid Viewer — Paste Markdown (README, docs, notes) and preview every ```mermaid code block as a rendered diagram.
- AI diagram generator — create Mermaid diagrams from text.