Export Mermaid for documents: choose PNG, SVG, JPG, or PDF

Choose your export format based on where the diagram will be read. A scalable SVG is useful in a compatible document viewer. A PNG is often easier to insert into a publishing platform. A PDF is convenient to hand off, but the file extension alone does not tell you whether its diagram is vector artwork or an embedded bitmap.

This guide describes the browser workspace's current export paths and gives you a repeatable check before sharing a diagram. Keep the Mermaid source alongside every image: an image is the deliverable, while the source is what you will edit next time.

Choose the format by destination

For diagrams made of labels and fine lines, PNG avoids JPEG's lossy compression. SVG can preserve vector shapes but is not automatically the smallest file, and its appearance still depends on the consuming application. Do not assume that an SVG which looks correct in a browser will render identically in every office or publishing tool.

Try one source through the export workflow

Use this small review flow so the output includes a decision, labeled branches, and a return loop:

flowchart TD
    draft["Draft diagram"] --> review{"Labels readable?"}
    review -->|Yes| export["Export and inspect"]
    review -->|No| revise["Simplify layout"]
    revise --> review

Copy the source and paste it into the workspace. Check the preview before exporting. Select a format in the export controls and choose a scale for raster output. The workspace provides 1×, 2×, and 4× options; start at 2× for a normal document image, then inspect the result at its intended display size.

A larger scale generates more pixels. It does not fix a diagram that has too many columns or labels that become tiny when the image is fitted to a narrow page. Use the mobile layout walkthrough when the composition is the limiting factor.

What the PDF export actually contains

In the current workspace, the diagram is drawn to a canvas, converted to PNG, and inserted into a PDF with jsPDF. That produces a PDF containing a raster image. It does not produce editable vector shapes or selectable diagram text.

This is suitable for sharing a self-contained preview. If you need scalable diagram geometry, keep an SVG and test it in the intended application. If a printer or publisher requires vector PDF, this workspace's PDF export does not meet that requirement; use a separate conversion workflow and inspect the resulting file. A higher raster scale can improve sharpness, but it cannot change raster content into vectors.

This distinction is based on the product's export implementation, not on the capabilities of the PDF format in general.

Inspect backgrounds, fonts, and edges

Open the actual downloaded file, then insert it into the destination document. Check the longest label, arrowheads near the edges, and any unusual characters. A successful preview in the editor does not establish that a different application has the same fonts or SVG support.

For transparent output, test on the page's actual background. Dark lines may disappear against a dark page; light labels can vanish against white. An opaque light background makes the diagram's contrast more predictable when the destination theme is unknown.

For PNG and JPG, inspect the image at its intended display width. For PDF, zoom in and check the page boundaries. For SVG, verify that all labels appear after importing it into the target application. Keep a PNG fallback if the destination's SVG handling is unreliable.

Keep a source file with the exported image

A useful handoff includes review-flow.mmd and the chosen output, for example review-flow.png. Add a short caption that explains the decision and the return path. A caption also helps readers who cannot use the image itself.

Rendering and export happen in the browser. Local workspace history is a convenience, not a backup: clearing browser storage or changing devices can make it unavailable. Save the source somewhere you control when you need to keep it.

When to use the command line

If a repository contains many .mmd files and you need repeatable generation, the official Mermaid CLI accepts source files and produces SVG, PNG, or PDF. For example:

mmdc -i review-flow.mmd -o review-flow.svg
mmdc -i review-flow.mmd -o review-flow.png

Pin the tool version in the project so rendering changes can be reviewed with the code. CLI output and this browser workspace follow different rendering paths, so validate the output produced by the tool you actually use. Start with the CLI workflow guide for repository automation.