The fastest way to convert a Mermaid diagram to an image

The easiest route is Mermaid Live Editor, the official tool at mermaid.live. Paste your diagram code into the left panel, and the preview appears on the right. Click the download icon (three dots menu, then "Download SVG" or "Download PNG") to save it as an image file. The whole process takes under a minute and requires no account or software installation.

If you need a different format or want more control over the output, several other online tools work the same way: you paste code, preview the result, and download. The choice between them depends mainly on which image format you need and whether you want additional editing options.

Key Takeaways

  • Mermaid Live Editor (mermaid.live) is the official tool and requires no login—paste your code, preview instantly, and download as PNG or SVG.
  • Most online converters work identically: paste code on the left, see the diagram on the right, then download the image file.
  • PNG works for most uses; SVG is better if you need to resize without losing quality or edit the image later.
  • If your diagram code has errors, the preview will show a red error message instead of the diagram, so you can fix the code before downloading.

Using Mermaid Live Editor step by step

Open mermaid.live in your browser. You will see a split screen: the code editor on the left and the diagram preview on the right. If there is already sample code in the editor, select all of it and delete it, then paste your own Mermaid code.

As you type or paste, the preview updates in real time. If your code is correct, you will see the finished diagram. If there is a syntax error, the preview shows a red box with an error message telling you which line has the problem. Fix the code and the preview updates automatically.

Once the diagram looks right, click the three-dot menu icon in the top right corner of the editor. Choose "Download SVG" for a scalable vector image (best for resizing later) or "Download PNG" for a standard image file. The file downloads to your computer's default download folder.

When to use PNG versus SVG

PNG is a standard image format that works everywhere—email, documents, websites, presentations. It is smaller in file size and displays the same way on every device. Use PNG if you are adding the diagram to a report, sharing it with someone, or posting it online.

SVG is a vector format that stays sharp no matter how large you resize it. PNG becomes blurry if you enlarge it too much. Use SVG if you think you might need to resize the diagram later, or if you want to open it in design software like Figma or Adobe Illustrator to edit it further.

Other online tools that work similarly

Several other websites offer the same basic function. Kroki.io supports Mermaid along with many other diagram types (PlantUML, GraphViz, and others). Paste your code, select Mermaid from the diagram type dropdown, and download as PNG, SVG, or PDF. Diagrams.net (formerly draw.io) has a Mermaid import feature under File > Import, though it is less direct than the dedicated tools.

For most people, Mermaid Live Editor is the fastest choice because it is made by the Mermaid team and has no extra steps. The other tools are useful if you are already working with multiple diagram types or need a specific output format like PDF.

Troubleshooting common issues

If the preview shows an error message instead of your diagram, check the syntax of your code. Common mistakes include missing semicolons at the end of lines, incorrect indentation, or typos in keywords like "graph" or "flowchart". Copy the error message into a search engine—Mermaid documentation usually has examples that match your diagram type.

If the download button does not appear or the file does not save, try a different browser. Some older browsers or strict security settings can block downloads. Chrome, Firefox, Safari, and Edge all work reliably with Mermaid Live Editor. If you are on a work or school network with download restrictions, you may need to use a personal device or ask your IT department to allow the download.

If the downloaded image looks different from the preview—colors are wrong, text is cut off, or the layout changed—the issue is usually your browser's zoom level. Make sure your browser zoom is set to 100% before downloading. You can also try exporting as SVG instead, which sometimes handles layout better than PNG.

Converting diagrams created in other tools

If you have a Mermaid diagram saved as code in a text file or document, open that file in a text editor, copy all the code, and paste it into Mermaid Live Editor. The preview will show whether the code is valid. If you created the diagram in a different tool like Lucidchart or Visio, you will need to rewrite it in Mermaid syntax—there is no automatic converter between diagram formats.

Mermaid syntax is relatively simple for common diagrams like flowcharts, sequence diagrams, and organizational charts. The official documentation at mermaid.js.org has templates for each type. Copy a template that matches your diagram, replace the sample text with your own content, and adjust the structure as needed.

Frequently Asked Questions

Can I edit the image after I download it?

PNG files are static images and cannot be edited as diagrams. If you need to make changes, edit the Mermaid code in the editor and download again. SVG files can be opened in design software like Figma or Inkscape, but editing them as code is complex. For ongoing changes, keep your Mermaid code in a text file or document and regenerate the image whenever you update it.

Does Mermaid Live Editor save my diagrams?

Mermaid Live Editor does not save diagrams to an account—it only stores code in your browser's temporary memory. If you close the tab, the code is lost. Copy your code and save it to a text file, document, or code repository before closing. You can paste it back into the editor anytime to regenerate the image.

What image size will I get when I download?

The download size depends on your diagram's complexity and the format. PNG files are typically between 50 KB and 500 KB. SVG files are usually smaller. The preview window shows roughly how large the image will be. If you need a specific size, you can resize the PNG in image editing software afterward, though SVG is better for resizing without quality loss.

Can I use these images commercially or in published work?

Mermaid itself is open source and free to use. Images you create are yours to use however you want—in reports, presentations, books, websites, or any other project. There are no licensing restrictions on the images you download from Mermaid Live Editor.