Why export Mermaid as SVG
SVG is a vector format: the diagram stays sharp at any zoom level, the file is small, and text remains real text you can search, select and edit. That makes SVG the right choice for documentation sites, design files, print, and slides you will present on large screens.
SVG that opens properly outside the browser
Many Mermaid exporters produce SVG that only looks right in a browser. They wrap labels in HTML foreignObject elements and keep the colours in a stylesheet, so PowerPoint, Word and Figma show empty boxes or black shapes. This converter renders labels as native SVG text and writes the final colours, strokes and fonts onto every shape, so the file looks the same wherever you open it.
How to convert Mermaid to SVG
- Paste your Mermaid code or upload a
.mmdfile. The fenced```mermaidwrapper is removed automatically. - Pick a theme and, if you need it, a transparent background.
- Click Download SVG, or Copy SVG code to paste the markup straight into HTML, MDX or a CMS.
Using the SVG in other apps
- PowerPoint and Word: Insert → Pictures → This Device. In Microsoft 365 you can right-click the SVG and choose Convert to Shape to edit boxes and text individually.
- Figma, Sketch and Illustrator: drag the file onto the canvas; groups and text layers stay editable.
- Confluence and wikis: attach the SVG to the page and insert it as an image. If your space does not allow SVG uploads, use the PNG converter instead.
- Websites and docs: reference the file in an
<img>tag, or paste the copied markup inline.
Mermaid SVG from the command line
For build pipelines, the official Mermaid CLI renders the same diagrams without a browser tab: install it with npm install -g @mermaid-js/mermaid-cli, then run mmdc -i diagram.mmd -o diagram.svg (add -b transparent for a transparent background or -t dark for a theme). This page is the quicker option for one-off diagrams, and for SVG files that need to open in Office or Figma, since its labels are plain SVG text rather than HTML.
If the code does not render, the error is explained and highlighted; the Mermaid syntax fixer repairs the usual AI mistakes. To export several diagrams from one Markdown file at once, use extract Mermaid from Markdown.