Scalable vector export

Mermaid to SVG Converter

Convert Mermaid source into an SVG file for a README, documentation site, or webpage. Check the rendered diagram and theme in the editor above, then click the SVG button at the top right of the preview.

Convert Mermaid source to SVG

The deployment-flow example below is a practical documentation asset. You can replace it with another supported Mermaid diagram before downloading.

OnUML
Loading diagram preview...

Publish a diagram that can scale with the document

SVG keeps shapes and connectors as vectors. Choose it when the destination accepts SVG and the diagram needs to remain sharp at different display sizes.

Vector scaling

Resize a diagram in a supported viewer without enlarging a fixed grid of pixels.

Theme in the output

Choose colors before downloading so the diagram is readable on the destination background.

One image asset

Use the exported file in a documentation or web workflow that accepts SVG images.

Maintainable source

Keep the Mermaid source beside the output so future structural changes can be rendered again.

Convert Mermaid source to an SVG file

A correct preview comes first. Downloading does not repair missing labels or an unreadable layout.

  1. 01

    Paste valid Mermaid source or adapt the deployment example. Resolve any reported syntax error.

  2. 02

    Choose a theme and check the full preview, including long labels and the intended reading direction.

  3. 03

    Click the SVG button at the top right of the preview. Check the downloaded file in its destination and keep a separate copy of the Mermaid source.

Use the exported SVG in documentation

SVG is a rendered asset. Font availability and SVG support in the destination can affect how labels appear.

SVG image compatibility guide (MDN) →

Embedding in a README or webpage

Where the platform accepts SVG, reference the file as an image, for example ![Deployment flow](deployment.svg) in Markdown. Check the platform’s image policy and preview the published result.

Changing the diagram after export

Edit the Mermaid source and export again when a node, branch, or relationship changes. The downloaded SVG is not a Mermaid source backup or an automatic round-trip editing format.

Labels in other applications

Some Mermaid labels use HTML inside SVG. A design or presentation application may handle those labels differently from a browser; try the actual target application before relying on editable text or perfect visual matching.

When PNG is a better delivery file

Use PNG if the destination rejects SVG or renders its labels incorrectly. Keep SVG for scalable display and Mermaid source for structural edits.

Mermaid to SVG example

A deployment flow shows a test gate and a retry loop. It is the kind of diagram you can embed in engineering documentation after exporting SVG.

flowchart LR
    Commit[Commit change] --> Build[Build application]
    Build --> Tests{Tests pass?}
    Tests -->|No| Fix[Fix and retry]
    Fix --> Commit
    Tests -->|Yes| Deploy[Deploy release]
  • The Yes and No labels explain why a release reaches deployment or returns for a fix.
  • LR gives the pipeline a horizontal reading direction; TD may fit a narrower documentation column.
  • After exporting, test the file in the actual page or application where readers will see it.

Frequently asked questions

Where is the SVG download option?

After the current source has rendered successfully, click the SVG button at the top right of the preview.

Will SVG become blurry when enlarged?

Vector shapes and connectors can scale without pixelation. Fonts, labels, and destination support still need checking in the viewer where the file will be used.

Can I edit every element in a design application?

That is not guaranteed. Applications differ in how they handle SVG text, styles, and HTML-based labels. Keep the Mermaid source for reliable changes to the diagram structure.

Does the SVG include the original Mermaid source?

The download is the rendered SVG, not a source backup. Keep your Mermaid source separately so you can revise and render the diagram later.

Can I convert sequence, ER, or Gantt diagrams?

Yes, if the syntax is supported by the editor’s Mermaid version and renders successfully. SVG export is not limited to the deployment flowchart example.

Why does the SVG look different on another machine?

Check font availability, destination background, and the viewer’s SVG and HTML-label support. Use PNG as a delivery fallback when the target cannot display the SVG consistently.

Further reading

Compare Mermaid and PlantUML

Compare syntax and modeling capabilities when choosing a diagram language for technical documentation.

Read the diagram language comparison →