How to Convert Diagram Code to an Image

Direct answer: identify the diagram language first, then use its renderer: Mermaid code with Mermaid CLI (mmdc), PlantUML code with PlantUML’s Java command line, or DOT code with Graphviz dot. Choose SVG when you need resolution-independent web or print output, PNG for broad compatibility, and PDF for reports or handoff.

1. Choose the renderer and output format

Source	Renderer	Typical command	Good first output
Mermaid definition	Mermaid CLI	`mmdc -i input.mmd -o output.svg`	SVG or PNG
PlantUML source	PlantUML Java archive	`java -jar plantuml.jar diagram.puml`	PNG, SVG when scaling matters
DOT source	Graphviz `dot`	`dot -Tsvg input.dot > output.svg`	SVG or PNG
Mermaid in a hosted editor	Mermaid Chart export	Use the editor’s export controls	PNG, SVG, or PDF

SVG keeps lines and labels sharp at different sizes. PNG is convenient for documents, presentations, and systems that do not render SVG. PDF is suitable for reports and handoff. Mermaid CLI, PlantUML, and Graphviz are command-line tools, so they can run repeatedly in scripts and documentation builds.

2. Convert Mermaid code

Install Mermaid CLI

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

Create input.mmd:

flowchart LR
    A[Write Mermaid code] --> B[Run mmdc]
    B --> C[Use SVG, PNG, or PDF]

Render SVG, PNG, and PDF

mmdc -i input.mmd -o output.svg
mmdc -i input.mmd -o output.png
mmdc -i input.mmd -o output.pdf

The input file contains the Mermaid definition and the output extension selects the image format. Mermaid CLI also supports themes and transparent PNG backgrounds. For example:

mmdc -i input.mmd -o dark-transparent.png -t dark -b transparent

Automate Mermaid rendering in a shell script

#!/usr/bin/env sh
set -eu
input="$1"
out_dir="${2:-dist}"
mkdir -p "$out_dir"
base="$(basename "$input" .mmd)"
mmdc -i "$input" -o "$out_dir/$base.svg"
mmdc -i "$input" -o "$out_dir/$base.png"

Run it with ./render-mermaid.sh architecture.mmd diagrams. Keep source files under version control and regenerate images during documentation builds so exported diagrams do not drift from their code.

3. Convert PlantUML code

PlantUML runs from a Java archive. PNG is the default output; SVG and PDF are selected with format flags.

@startuml
Alice -> Bob: Request
Bob --> Alice: Response
@enduml

Save that as diagram.puml, then run:

java -jar plantuml.jar diagram.puml
java -jar plantuml.jar -t svg diagram.puml
java -jar plantuml.jar -t pdf diagram.puml

You can process several files in one invocation:

java -jar plantuml.jar diagrams/*.puml

Use SVG for diagrams embedded in responsive documentation, PNG for systems that expect raster files, and PDF when the output is going into a report.

4. Convert Graphviz DOT code

Graphviz’s dot command reads a file or standard input. The -T option selects the output language.

digraph Architecture {
    browser -> api;
    api -> database;
}

Save it as input.dot and render it:

dot -Tsvg input.dot > output.svg
dot -Tpng input.dot > output.png

For generated DOT text, use a pipe:

echo 'digraph { a -> b }' | dot -Tsvg > output.svg

Graphviz supports many output formats. SVG is usually the best first choice when the diagram will be resized; PNG is useful for previews and raster-only destinations.

5. Use a hosted Mermaid editor

Mermaid Chart provides a browser workflow for editing a Mermaid diagram and exporting it as PNG, SVG, or PDF. This is useful when installing Node.js and a local CLI is undesirable. The trade-off is that the workflow depends on a hosted service rather than a local command you can run in your own build environment.

6. Make rendering repeatable in CI

Store the source (.mmd, .puml, or .dot) beside the documentation.
Pin the renderer version in the environment used by your build.
Render into a clean output directory.
Fail the build when a renderer exits with a non-zero status.
Publish SVG for web documentation and PNG or PDF as additional artifacts when required.

set -eu
mkdir -p build/diagrams
mmdc -i docs/system.mmd -o build/diagrams/system.svg
java -jar plantuml.jar -t svg docs/sequence.puml -o build/diagrams
dot -Tsvg docs/network.dot > build/diagrams/network.svg

For large repositories, render only files changed by the commit or cache the renderer installation. Keep source and generated files on a predictable path so links in documentation remain stable.

7. Troubleshooting

“Command not found: mmdc”

Mermaid CLI is not installed globally or its executable directory is not on PATH. Install @mermaid-js/mermaid-cli with npm, then open a new shell or fix the Node executable path.

Mermaid output is blank or fails to render

Check the Mermaid syntax and confirm the input file is the one passed to -i. Start with a small graph, then add sections until the failing construct is identified. Use a supported theme and background option when producing transparent or dark output.

PlantUML cannot start

Verify that Java is installed and that plantuml.jar is the correct path. Run java -jar plantuml.jar diagram.puml with one small file before processing a directory.

PlantUML produces PNG when SVG was expected

PNG is the default. Add -t svg (or -t pdf) explicitly.

Graphviz reports a DOT syntax error

Check braces, semicolons, quoted labels, and edge operators. Reduce the file to two nodes and one edge, render it, then add declarations back incrementally.

The diagram is cut off

Use SVG or PDF when possible, because they preserve scalable geometry. For PNG, render at the required dimensions and inspect long labels, wide graphs, and clusters. Split an oversized diagram into focused diagrams when a single image is unreadable.

Fonts differ between local and CI output

Render with the same operating-system image, Java/Node versions, and installed fonts in both environments. Treat generated images as build artifacts and compare them after renderer upgrades.

8. Performance, reliability, and cost

Performance: command-line rendering avoids repeated manual export. Reuse the same installed renderer for a batch and render only changed sources.
Reliability: check exit codes, keep source under version control, and pin tool versions. A successful build should produce all expected files.
Format choice: SVG generally gives the best quality-to-size trade-off for web documentation; PNG is simplest for broad compatibility; PDF is convenient for reports.
Cost: local Mermaid CLI, PlantUML, and Graphviz rendering uses your own compute. A hosted editor may be simpler, but its availability and export workflow depend on that service.

9. Or skip the browser setup

If your goal is a clean image of a rendered diagram or documentation page, ScreenshotNeo can capture a URL with one request. It accepts the cookie or consent banner like a visitor, removes more than 60 known consent platforms plus newsletter popups and chat widgets, and lets you turn each cleanup step off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; every response identifies the result with X-Page-Verdict and X-Billed headers.

See the ScreenshotNeo API documentation for the complete parameter list. This is a runnable cURL example:

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

Python:

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

Node.js:

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

Relevant capture controls include full-page screenshots with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets or any viewport, retina scale, PDF paper size/margins/landscape/page ranges, HTML or CSS to image, custom CSS and JavaScript, pre-capture clicks, hidden selectors, waits for a selector or delay or network idle, blocked ads/trackers/requests/resource types, custom headers/cookies/user agent/Authorization, timezone and geolocation, transparent backgrounds, image resizing, selectable cache TTL, signed links for public image tags, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. An MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.

There are 1,000 free screenshots each month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is included on every plan. Create a free ScreenshotNeo account.

10. FAQ

Should I use PNG or SVG?

Use SVG when the image must scale cleanly on the web or in print. Use PNG when the destination requires a raster image or simple broad compatibility. Use PDF for reports and handoff.

Can I convert diagram code without a GUI?

Yes. Mermaid CLI, PlantUML, and Graphviz all support repeatable command-line rendering.

How do I know which tool to use?

Match the source extension and syntax: Mermaid definitions use mmdc, PlantUML source uses the PlantUML Java archive, and DOT files use Graphviz dot.

Can I render several diagrams at once?

Yes. PlantUML accepts multiple files and Graphviz or Mermaid commands can be called from a shell loop or build script.

When is a hosted editor the better choice?

Choose one when you want browser-based editing and export without installing a local renderer. Choose a CLI when you need deterministic builds or CI automation.