For a one-off image, paste your Mermaid code into the Mermaid Live Editor, check the preview, then export PNG or SVG. For repeatable conversion from files or scripts, install Mermaid CLI and run mmdc -i input.mmd -o output.svg. Use SVG when you need a crisp, scalable diagram; choose PNG when a broadly compatible raster image is more convenient.
Choose the conversion method
Mermaid diagram code is text, not an image file. A Mermaid renderer parses that text and produces a visual diagram. The right route depends on whether you need a quick download or a repeatable workflow:
- One diagram, no setup: use the Mermaid Live Editor in a browser.
- Repeated renders or automation: use Mermaid CLI (
mmdc) with an input file. - A diagram already rendered on a public webpage: a screenshot service can capture the page as an image, but that is different from converting raw Mermaid source.
The official Mermaid CLI project describes its purpose as taking a Mermaid definition file and generating SVG, PNG, or PDF output. The editor and CLI are rendering routes; simply renaming a text file with an image extension does not convert it.
Convert Mermaid code in the Live Editor
- Open the official Mermaid guide at mermaid.js.org/intro/getting-started.html and follow its link to the Live Editor.
- Paste the complete Mermaid definition into the Code area. Include the diagram declaration, such as
flowchart TD, and the diagram statements beneath it. - Check the Preview. If it shows a parse or syntax error, correct the source before exporting; export cannot make invalid Mermaid syntax into a finished diagram.
- Open Actions and choose Export PNG or Export SVG.
- Save the downloaded file and inspect it at the size and against the background where you plan to use it.
The editor is the simplest choice for manual conversion because it combines source entry, preview, and export without a local command-line installation. Its getting-started guide also lists exporting as Markdown; Markdown is useful for source-oriented workflows, but it is not itself a raster image.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
Convert Mermaid code with Mermaid CLI
Mermaid CLI is suitable when your source is already in a file or you want a command that can be repeated in a local workflow. The project documents npm installation and the mmdc renderer. The examples below use the CLI syntax shown in its README; install it first in an environment with Node.js and npm available.
Install the CLI
npm install -g @mermaid-js/mermaid-cliSave your diagram source as input.mmd. Then run a render command from the directory containing that file:
Render an SVG
mmdc -i input.mmd -o output.svgThe input option points to the Mermaid definition file, and the output extension selects the result format. Use a distinct output filename if you want to preserve an earlier export.
Render a PNG with a dark theme and transparent background
mmdc -i input.mmd -o output.png -t dark -b transparentThis example uses the CLI’s documented dark theme and transparent-background options. If the diagram’s content or contrast does not suit those settings, omit them or adjust the theme and background for the destination.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Render source from standard input
The CLI documentation also shows piping Mermaid source to the renderer rather than reading an input file. That can be useful when another command generates the source. Check the README for the exact invocation and options supported by the version installed in your environment.
The README documents other installation approaches, including local npm installation and containers. Those can be preferable when you want the CLI scoped to a project or isolated from the machine’s global tools. The project notes that its Node.js API is not covered by semver in the same way as the main Mermaid package; if automation calls that API directly, check the documentation for the release you install rather than assuming API compatibility across releases.
Choose PNG, SVG, PDF, or source
| Format | Best fit | What to consider |
|---|---|---|
| SVG | Web embedding, print, or diagrams that may be resized | Vector output scales without the pixelation associated with enlarging a raster image. |
| PNG | Slides, general sharing, or documents that expect a raster image | Widely convenient, but small text and lines may look pixelated when the image is enlarged. Increase the export scale if available, or export SVG. |
| Report-style handoff or reading without editing the Mermaid source | Mermaid Chart’s export documentation discusses PDF for reports and notes that a large diagram may need a different direction or to be split into smaller sections to avoid excessive whitespace. | |
| MMD | Editing and reusing the Mermaid definition | This is Mermaid source, not an image. |
These formats and export considerations are described in the Mermaid Chart export guide. Pick based on the recipient’s software and whether the output needs to stay editable or scale cleanly.
Fix common export problems
The diagram does not render
Read the error in the Live Editor preview and fix the Mermaid syntax or parse issue first. Check that the source includes a valid diagram declaration and that node or edge statements follow Mermaid syntax. With the CLI, confirm the input file is the intended one and contains the source you expect before rerunning the render.
PNG text or lines look pixelated
Export SVG when the destination accepts vector artwork. If you need PNG, increase its scale using an available export control and inspect the result at its intended display size. A small PNG enlarged substantially can lose edge sharpness.
The exported theme or background is wrong
For Mermaid Chart exports, check the diagram’s front matter theme: the export guide warns that editor-level theme preferences do not necessarily carry into exports. For PNG, the documented options include the default theme background, transparent background, or a custom color; the CLI README also demonstrates a transparent background. Confirm the result over the actual page or slide background, since transparency can reveal contrast problems that were not obvious in the editor.
A PDF has too much whitespace
Mermaid Chart’s export guidance suggests changing diagram direction or splitting a large diagram into smaller sections. A wide or tall layout may fit the page better after reorientation; separate diagrams can also be easier to read than one crowded export.
The CLI command is not recognized
Check that Mermaid CLI installed successfully and that the shell can find its executable. If you installed it locally rather than globally, run it through the project’s local npm setup as documented by the CLI project. Verify the input and output paths too: a correct command cannot render a file that is not at the specified location.
Free tools Windows power users keep installed
One-click scans. No signup required.
The CLI output differs from the preview
Check which theme and background options you passed to mmdc, and compare those settings with the diagram’s source and the browser preview. Export controls and front matter can affect the final appearance. If a script depends on the CLI’s Node.js API rather than its command-line interface, verify the API against the installed release documentation because the README gives it a different semver qualification from the main Mermaid package.
Or skip the browser setup
ScreenshotNeo is a website screenshot API, not a Mermaid source renderer: first render your diagram as a webpage, then use a screenshot request to capture that public page. The example below targets the official Mermaid getting-started page; replace that URL with your own publicly accessible page containing the rendered diagram.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://mermaid.js.org/intro/getting-started.html -o shot.webpSee the ScreenshotNeo API documentation for request parameters. ScreenshotNeo can accept cookie or consent banners and remove supported consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response reports the page verdict and billing status in headers. Its MCP server provides screenshot tools for AI agents and MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up free for 1,000 screenshots a month, with no card required.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Reliability, repeatability, and cost considerations
For Mermaid source, the Live Editor and CLI generate the diagram itself; a screenshot API captures a rendered webpage and should not be treated as a replacement Mermaid parser. Choose the editor when you want to inspect and manually save an individual export. Choose CLI when the same source needs to be rendered repeatedly or as part of a script. In either case, keep the .mmd source so you can correct or regenerate the image later.
When automating, preserve the exact source and rendering options alongside the generated file. That makes it easier to reproduce a theme or background choice, identify whether a change came from the source or the renderer, and rerun the export after edits. The CLI project’s release notes and README are the appropriate place to verify current installation and API details for the version you use.
FAQ
Can I convert Mermaid source directly into a JPG?
The cited Mermaid workflows document SVG, PNG, and PDF exports rather than JPG. Export PNG if you need a raster result supported by the documented routes.
Can I keep a copy that remains editable?
Yes. Save the original Mermaid definition, commonly as an .mmd file; an exported image is a rendered result, not a substitute for the source.
Does a screenshot of a Mermaid editor convert my code?
No. A screenshot captures what a browser displays. Use Mermaid’s editor export or CLI to render raw Mermaid source; use a screenshot service only when you need an image of a rendered webpage.
Quick Recap
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.
