Mermaid Code to Image Generator: Convert Mermaid to PNG, SVG, or PDF

iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more

To convert Mermaid code into an image, paste it into the official Mermaid Live Editor and export PNG or SVG for a quick one-off. For repeatable builds, save the code in a .mmd file, install the official @mermaid-js/mermaid-cli package, and run mmdc -i input.mmd -o output.svg. The output extension selects SVG, PNG, or PDF.

This guide explains the fastest browser workflow, automated command-line conversion, format choices, themes and scaling, troubleshooting, and a no-account third-party option.

#	Preview	Product	Price
1		Creating Software with Modern Diagramming Techniques: Build Better Software with Mermaid	$29.95	Buy on Amazon
2		MERMAID.JS 11 DIAGRAM-AS-CODE MASTERY: VISUALIZE ARCHITECTURE, SYSTEM DESIGN, AND AUTOMATED...	$8.99	Buy on Amazon
3		Diagrams as Code: Exploring Mermaid, PlantUML, D2 and Generating Diagrams using AI LLMs	$16.00	Buy on Amazon
4		The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text...	$45.99	Buy on Amazon
5		Visualize Secure Systems: Mermaid.js for Network & Security Architects	$2.99	Buy on Amazon

Choose the right Mermaid-to-image method

The official browser editor is normally the quickest route. Use mermaid-cli when the same source must render consistently whenever documentation or a release is built.

Convert Mermaid code in the official Live Editor

1. Open the official Mermaid Live Editor.
2. Paste your Mermaid definition into the code pane. A minimal example is:

flowchart TD
    A[Write Mermaid code] --> B{Choose format}
    B -->|SVG| C[Scalable graphic]
    B -->|PNG| D[Portable bitmap]
    B -->|PDF| E[Report-ready document]

3. Wait for the rendered preview. Syntax errors are shown in the editor rather than in the exported file.
4. Use the export control to download PNG, SVG, or Markdown/source. Keep the source download when you expect to edit the diagram later.

Browser export is ideal for a single diagram because it requires no local package installation. It also lets you see layout changes before saving the file.

#1 Best Overall

Creating Software with Modern Diagramming Techniques: Build Better Software with Mermaid

$29.95

Buy on Amazon

Prepare code that renders predictably

• Start with a diagram declaration such as flowchart TD, sequenceDiagram, or classDiagram.
• Give nodes short labels first; very long labels can create unexpectedly wide output.
• Quote labels containing punctuation that Mermaid could interpret as syntax.
• Keep a copy of the original .mmd text. PNG and PDF are output files, not editable Mermaid source.

Use Mermaid Chart for visual editing and collaboration

Mermaid Chart adds direct visual editing, themes, collaboration, sharing, and export to PNG, SVG, PDF, or MMD. This is useful when colleagues need to adjust a diagram without hand-editing every line, or when a team needs a shared workspace.

1. Open the Mermaid Chart editor and create or paste a Mermaid diagram.
2. Check the visual preview and apply the required theme.
3. Use the export action for PNG, SVG, PDF, or MMD.
4. Share the diagram through the editor’s collaboration workflow when others need to review or edit it.

Export MMD alongside the visual file so the diagram remains maintainable in version control.

Automate conversion with mermaid-cli

The official Mermaid CLI accepts a Mermaid definition file and renders it without opening a browser. This makes it suitable for shell scripts, continuous-integration jobs and batches of diagrams.

Install the CLI

Install the package from npm:

npm install -g @mermaid-js/mermaid-cli

Verify that the command is available:

mmdc --help

If your environment does not permit global npm installs, install the package in a project and invoke its local binary through your package runner.

Render an SVG

1. Save Mermaid code as architecture.mmd.
2. Run:

mmdc -i architecture.mmd -o architecture.svg

SVG is usually the best default for websites, technical documentation and print because it remains sharp when enlarged.

Rank #2

MERMAID.JS 11 DIAGRAM-AS-CODE MASTERY: VISUALIZE ARCHITECTURE, SYSTEM DESIGN, AND AUTOMATED FLOWCHARTS WITH MARKDOWN FOR DEVELOPER DOCUMENTATION

$8.99

Buy on Amazon

Render PNG or PDF

Change only the output extension:

mmdc -i architecture.mmd -o architecture.png
mmdc -i architecture.mmd -o architecture.pdf

PNG is convenient for presentations and office documents. PDF is better for reports that must be printed or circulated as fixed pages.

Make the command repeatable

Put all diagrams in a directory and run a small shell loop:

for file in diagrams/*.mmd; do
  name="${file%.mmd}"
  mmdc -i "$file" -o "$name.svg"
done

In CI, install the same Mermaid CLI version used locally, fail the job when mmdc returns an error, and publish the generated files as build artifacts. Pinning the package version in your project reduces unexpected layout changes after an upgrade.

Pick SVG, PNG, PDF, or MMD

For documentation repositories, commit the .mmd file and generate SVG or PNG during the build. For a one-time stakeholder handout, export PDF or PNG as requested.

Control appearance, size and readability

Background and transparency

PNG export can use a default, transparent, or custom background in Mermaid Chart. Choose a solid background when the image will be placed on unknown presentation or document colors; choose transparency when it must blend into an existing page.

Rank #3

Diagrams as Code: Exploring Mermaid, PlantUML, D2 and Generating Diagrams using AI LLMs

$16.00

Buy on Amazon

Large diagrams

Prefer SVG for large or zoomable diagrams. If PNG is mandatory, increase the output dimensions or render at a higher scale in the editor that you use. Splitting an extremely wide flowchart into linked subdiagrams is often more readable than producing one enormous bitmap.

Themes and consistency

Apply one theme across a documentation set rather than changing colors diagram by diagram. Store the source and any theme configuration with the project so a later regeneration does not silently change the visual language.

Use a no-account third-party renderer

mermaid.tools supports paste-and-preview rendering without an account and exports SVG, PNG, JPEG, or PDF. It identifies itself as independent of Mermaid.js and Mermaid Chart. Do not paste confidential architecture, credentials, customer data, or unreleased product details until you have checked the service’s current privacy and retention terms.

Or skip the browser setup

If your Mermaid diagram is rendered on a web page, ScreenshotNeo can capture that page through one API request. It is a website screenshot API and MCP server; it is not a Mermaid compiler, so your page must already render the diagram in the browser. Before capture, it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status.

Use the API documentation at https://screenshotneo.com/docs/ for all options. This example captures a rendered page as WebP:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://screenshotneo.com -o shot.webp

Replace the URL with the address of your own page containing the Mermaid diagram. The same endpoint can return PNG, JPEG or WebP, and supports full-page capture, element selectors, dark mode, device presets, custom viewports, retina scale, custom CSS and JavaScript, waits, request blocking, cookies, headers, geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous webhooks, bulk capture and a usage API.

Rank #4

The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code

$45.99

Buy on Amazon

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://screenshotneo.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://screenshotneo.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. Every feature is included on every plan: 1,000 shots per month are free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

Troubleshoot failed renders and exports

“Parse error” or blank preview

Check indentation, brackets, arrows and diagram type syntax. Reduce the file to a two-node example, confirm it renders, then add sections back incrementally. A blank preview usually indicates invalid Mermaid syntax or a browser-side rendering error rather than a damaged output file.

Text is clipped

Shorten labels, split the diagram, or use SVG. For PNG, render at a larger scale and inspect the result at its intended display size.

CLI command not found

Confirm that Node.js and npm are installed, then reinstall @mermaid-js/mermaid-cli. If it was installed locally, run the project’s local binary instead of assuming a global command is on your PATH.

CLI fails in CI but works locally

Use the same Node.js and Mermaid CLI versions in both environments. Cache npm dependencies carefully, capture the command’s error output, and verify that the runner can start the browser components required by the CLI.

Best Value

Visualize Secure Systems: Mermaid.js for Network & Security Architects

$2.99

Buy on Amazon

Fonts or colors differ

Rendering depends on the editor, CLI version, theme and available fonts. Pin versions for automated builds and avoid relying on a font that is not installed in the build environment.

Private diagrams and hosted services

Keep sensitive source local with mermaid-cli, or confirm the privacy terms of any hosted editor or independent renderer before pasting code. For screenshots of authenticated pages, configure the capture service’s headers or cookies and avoid exposing credentials in URLs.

Recommended workflow

1. Use the official Live Editor for a quick manual export and visual check.
2. Save the source as .mmd and commit it to version control.
3. Use mermaid-cli to regenerate SVG, PNG or PDF in scripts and CI.
4. Choose SVG for scalable documentation, PNG for broad compatibility, PDF for reports, and MMD for editable source.
5. Use a hosted screenshot API only after the page itself renders Mermaid, and review privacy requirements for private diagrams.

Frequently Asked Questions

Is Mermaid code itself an image file?

No. Mermaid code is text describing a diagram. A Mermaid editor or renderer must interpret it and produce SVG, PNG, PDF or another output file.

Can I convert Mermaid to JPEG?

The independent mermaid.tools renderer lists JPEG export. The official Mermaid Live Editor and mermaid-cli workflows described here focus on PNG, SVG and PDF.

Should I keep the generated image or the Mermaid source?

Keep both when the diagram matters. The MMD source is what you edit and regenerate; the image is the distribution artifact.

The Bottom Line

Use the official Live Editor for the fastest one-off conversion and mermaid-cli for reliable, repeatable rendering. Keep the .mmd source, choose SVG when scalability matters, and export PNG or PDF when the destination requires them.

Quick Recap

Bestseller No. 1

Creating Software with Modern Diagramming Techniques: Build Better Software with Mermaid

$29.95

Bestseller No. 2

MERMAID.JS 11 DIAGRAM-AS-CODE MASTERY: VISUALIZE ARCHITECTURE, SYSTEM DESIGN, AND AUTOMATED FLOWCHARTS WITH MARKDOWN FOR DEVELOPER DOCUMENTATION

$8.99

Bestseller No. 3

Diagrams as Code: Exploring Mermaid, PlantUML, D2 and Generating Diagrams using AI LLMs

$16.00

Bestseller No. 4

The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code

$45.99

Bestseller No. 5

Visualize Secure Systems: Mermaid.js for Network & Security Architects

$2.99

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.