Mermaid to SVG: Export a Sequence Diagram for Docs and Slides
Export Mermaid as SVG for documents and slides. Try a short sequence diagram, download real SVG and PNG files, and check the result in your app.
A diagram that looks clear in your editor can become hard to read when you enlarge it on a slide. Exporting Mermaid to SVG gives you a vector file you can resize for documentation and presentations. Start with the Mermaid image converter and keep the diagram source alongside the export.
- Open the tool and click the diagram to edit its source.
- Paste your Mermaid code, then click outside the editor to see the rendered result.
- Open Settings, select Output and choose SVG.
- Close the settings and click Download image. Open the downloaded SVG in a browser, then test it in the document or slide where you plan to use it.
The editor accepts Mermaid source. If you store it inside a Markdown code fence, paste only the contents of that fence.
This example shows four messages between a writer, an editor and an exporter. The labels are deliberately short so you can inspect the arrows without a crowded layout. Paste it into the tool to reproduce the diagram.
```mermaid
sequenceDiagram
participant Writer
participant Editor
participant Exporter
Writer->>Editor: Paste diagram source
Editor-->>Writer: Show preview
Writer->>Exporter: Choose SVG
Exporter-->>Writer: Download diagram
```
Download the SVG · Open the PNG
Both files were downloaded through the tool's export controls from the same source. In the SVG, check all three participant names, four message labels and the branding below the diagram. For longer interactions, extend this example using the Mermaid sequence diagram syntax guide.
Open the file in your target application before finalizing the document. Check that fonts, arrowheads and labels appear as expected, and that the bottom of the diagram fits inside the image boundary. Enlarge it to inspect the text, then view it at the size readers will see.
If your publishing tool only accepts raster images, select PNG in the same output settings and export again. Check that file at its intended display size. A long diagram may need shorter labels or several smaller diagrams to remain readable.
Save the Mermaid text with the exported image. When a message changes, edit the source and export a fresh SVG. Add a short caption explaining the interaction, so readers can follow the point of the diagram. You can create the SVG here.