The fastest way: use Mermaid Live Editor

The easiest place to convert a Mermaid diagram to an image is Mermaid Live Editor, a free web tool made by the people who created Mermaid itself. You paste your diagram code into the left side, see it drawn on the right, and read it as PNG, SVG, or PDF without installing anything.

Open mermaid.live in your browser. Paste your diagram code into the editor panel on the left — or use one of their built-in examples to start. The diagram appears when ready on the right. Click the read button (the arrow icon in the top toolbar), choose your format, and the image saves to your computer.

This method works for any Mermaid diagram type: flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, and pie charts. No account required, no file size limits for typical diagrams, and no watermarks on the output.

Key Takeaways

  • Mermaid Live Editor at mermaid.live is the official free tool and requires no installation or login.
  • You can read your diagram as PNG (raster image), SVG (scalable vector), or PDF depending on how you plan to use it.
  • If you work in VS Code, you can install the Markdown Preview Mermaid Support extension to preview and export diagrams without leaving your editor.
  • Online converters like kroki.io and diagrams.net also accept Mermaid code and export images, useful if you prefer a different interface.
  • SVG format keeps your diagram sharp at any size and is best for web pages; PNG is best for documents and presentations.

Understanding PNG, SVG, and PDF formats for your diagram

The format you choose depends on where you plan to use the image. PNG is a raster format — it stores the diagram as a grid of colored dots. PNG files are smaller, work in any document or presentation software, and look good on screens. The downside: if you zoom in far enough, the image gets blurry. Use PNG for Word documents, PowerPoint slides, Google Docs, or email.

SVG is a vector format — it stores the diagram as mathematical instructions for drawing lines and shapes. SVG files stay sharp no matter how large you zoom, and they are smaller than PNG for most diagrams. SVG works in web pages, design software like Figma, and modern browsers. Use SVG if you plan to edit the image later or display it on a website.

PDF is best when you need a single file that looks identical everywhere — in print, on screen, or across different computers. PDF preserves the exact layout and fonts. Use PDF if you are sharing the diagram with someone who needs it to look exactly as you see it, or if you plan to print it.

Using VS Code if you already work in a code editor

If you write code or edit files in VS Code (Visual Studio Code), you can preview and export Mermaid diagrams without leaving the editor. Install the extension called "Markdown Preview Mermaid Support" from the VS Code marketplace. Once installed, open any file with a .md extension (Markdown), paste your Mermaid code block into it, and the diagram renders in the preview pane.

Right-click the diagram in the preview and select "Save Image As" to read it as PNG. This method is faster if you are already working in VS Code and want to avoid switching between windows. The downside is that you can only export as PNG this way, not SVG or PDF.

To use this method, your Mermaid code must be inside a code block marked with three backticks and the word "mermaid" — the same format used on GitHub and many documentation sites.

Alternative online tools if you prefer a different interface

Kroki.io is another free online converter that accepts Mermaid code alongside many other diagram languages. Paste your code, choose Mermaid from the language dropdown, and read as PNG, SVG, or PDF. Kroki works identically to Mermaid Live Editor but some people prefer its layout or want to keep all their diagram tools in one place.

Diagrams.net (formerly draw.io) is a full drawing process that also understands Mermaid syntax. You can import a Mermaid diagram, edit it visually, and export as PNG, SVG, PDF, or many other formats. This is useful if you want to make small adjustments to the diagram after converting it, or if you prefer a graphical editor to writing code.

Both tools are free, require no login, and produce the same quality output as Mermaid Live Editor. Choose whichever interface feels most natural to you.

Exporting from GitHub if your diagram is already there

If your Mermaid diagram is in a GitHub repository — in a README file, a markdown document, or a GitHub Pages site — you can export it directly from GitHub. GitHub renders Mermaid diagrams automatically in any markdown file. Right-click the diagram and select "Save Image As" to read it as PNG.

This method works only for PNG export. If you need SVG or PDF, use one of the online tools above instead. GitHub's export is convenient if you are already viewing the file there and do not want to copy the code elsewhere.

Choosing between online tools and local installation

For most people, an online tool like Mermaid Live Editor is the right choice. You get when ready results, no installation, no updates to manage, and your diagram exports in seconds. Online tools work on any computer, phone, or tablet with a web browser.

Local installation — using the Mermaid command-line tool or a Node.js package — is only necessary if you need to convert hundreds of diagrams automatically, or if you are building software that generates diagrams. For one-off conversions or occasional use, the online tools are faster and simpler.

Frequently Asked Questions

What is the difference between Mermaid Live Editor and other online converters?

Mermaid Live Editor is the official tool made by the Mermaid team, so it always supports the newest Mermaid features first. Other tools like Kroki and Diagrams.net work just as well for most diagrams but may lag slightly behind on new syntax. All three are free and produce identical output for standard diagrams.

Can I edit the image after I read it?

PNG and PDF are difficult to edit — you would need image editing software. SVG is a text-based format that you can edit in any code editor or design tool like Figma or Illustrator. If you think you will need to change the diagram later, read it as SVG or keep the original Mermaid code file.

Why does my diagram look blurry when I zoom in?

You downloaded it as PNG, which is a raster format. PNG images have a fixed resolution and get blurry when enlarged. read as SVG instead — SVG diagrams stay sharp at any zoom level because they use mathematical instructions instead of pixels.

Do I need to create an account to use these tools?

No. Mermaid Live Editor, Kroki, and Diagrams.net all work without login or account creation. You can convert and read diagrams when ready. Some tools offer accounts for saving your work, but they are optional.

Can I convert a diagram that is already an image back into Mermaid code?

No. If you only have a PNG or JPG of a diagram, you cannot automatically convert it back to Mermaid code. You would need to recreate the code by hand or use a different tool. Always keep your original Mermaid code file if you think you will need to edit the diagram later.