Recommended Free Tools
Mermaid.ink is the closest direct answer. Create a diagram in Mermaid Live Editor, copy the encoded value that the editor puts in its browser URL, and append that value to https://mermaid.ink/img/ for a raster image. Use https://mermaid.ink/svg/ for SVG or https://mermaid.ink/pdf/ for PDF. The resulting address can be used in Markdown, HTML, a browser, or an HTTP client. Kroki is the better fit when you want to send plain Mermaid text with GET or POST, run your own renderer, or support many diagram languages. mermaid.tools is useful for sharing an editable diagram state, but its URL fragment is not a server-rendered image endpoint.
What “Mermaid URL to image” means
A Mermaid diagram has two different kinds of URLs:
- Rendered-image URL: a server receives an encoded diagram and returns PNG, JPEG, WebP, SVG, or PDF bytes. Mermaid.ink follows this model.
- Editor/share URL: the browser opens an editor whose state is stored in the link, often in a URL fragment. mermaid.tools follows this model; the link is excellent for collaboration but does not itself return image bytes.
That distinction matters in documentation. An <img> element, CSS background, social-card generator, or build script needs an image endpoint. A design review or issue tracker may only need a shareable editor link.
Mermaid.ink: the quickest online generator
Step 1: write the diagram in Mermaid Live Editor
- Open Mermaid Live Editor and enter or paste your Mermaid code.
- Check the preview. Fix syntax errors before creating a production link; an encoded URL preserves the source exactly, so a syntax error will be reproduced by the renderer.
- Use the editor’s share or URL state. The browser address contains an encoded representation of the diagram.
Step 2: change the editor address to an image endpoint
Copy the encoded value from the editor URL and place it after the Mermaid.ink path:
https://mermaid.ink/img/returns a raster image (JPEG, PNG, or WebP).https://mermaid.ink/svg/returns SVG.https://mermaid.ink/pdf/returns PDF.
For example, if the editor URL ends with an encoded diagram value, keep that value unchanged and replace the editor’s route with the corresponding Mermaid.ink route. Do not URL-decode, line-wrap, or add spaces to the encoded portion. Paste the completed address into a browser first; a successful response displays the rendered artifact or downloads it according to your browser settings.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
Step 3: embed or download the result
Use the final Mermaid.ink address anywhere an image URL is accepted:
- Markdown:
 - HTML:
<img src="the-completed-mermaid-ink-image-url" alt="Architecture diagram"> - CSS:
background-image: url("the-completed-mermaid-ink-image-url"); - Automation: fetch the URL with an HTTP client and save the response as
.png,.jpg,.webp,.svg, or.pdf, matching the endpoint you selected.
Keep the complete URL, including every encoded character. Some Markdown processors or chat systems rewrite punctuation; if that happens, save the image locally or use HTML with proper attribute escaping.
Mermaid.ink output controls
Mermaid.ink documents URL parameters for visual and sizing changes. Add them as a query string after the encoded diagram value:
| Control | What it changes | When to use it |
|---|---|---|
bgColor |
Background color | Set a predictable background for a slide, thumbnail, or dark page. |
theme |
Mermaid theme | Keep colors consistent with documentation or an application UI. |
width |
Output width | Prevent a diagram from rendering too small in a fixed-width layout. |
height |
Output height | Reserve a known vertical area or reduce excess whitespace. |
scale |
Render scale | Increase pixel density for retina displays without changing the logical layout. |
Use the image endpoint for web images. For documents, the PDF endpoint also supports fit, paper, and landscape options. Those settings are useful when a wide flowchart must fit a landscape page rather than being shrunk into a portrait sheet. Test the resulting URL after each change: a parameter typo can produce an unchanged image or an error response, depending on the renderer.
When Kroki is a better choice
Kroki exposes an HTTP API that accepts Mermaid source text through GET or POST. That input model is often easier for a build pipeline than extracting an encoded value from an editor URL. Kroki also offers a free public service and can be self-managed, which is important when diagrams contain private architecture, customer data, or regulated information.
Choose Kroki for plain-text requests
- GET: convenient for a short diagram and a cacheable link.
- POST: better for larger source text, generated diagrams, or code that should not be placed in a URL.
- Self-managed deployment: gives your team control over network access, retention, and upgrades.
Choose Kroki for multiple diagram languages
Kroki is a unified gateway for many formats, including Mermaid, PlantUML, GraphViz, BPMN, C4, Ditaa, Excalidraw, Vega, Vega-Lite, WaveDrom, WireViz, and several BlockDiag variants. If a repository mixes Mermaid sequence diagrams with PlantUML or GraphViz, one gateway can simplify authentication, monitoring, and client code. If every diagram is Mermaid and you mainly need a copy-and-paste image URL, Mermaid.ink has less setup.
Mermaid.ink, Kroki and mermaid.tools compared
| Service | Input model | Output or result | Deployment | Best fit |
|---|---|---|---|---|
| Mermaid.ink | Encoded Mermaid payload copied from the editor URL | JPEG, PNG, WebP, SVG, or PDF endpoint | Hosted service | Fast Mermaid-only image links and embeds |
| Kroki | Mermaid text over GET or POST | Rendered diagram through an HTTP API | Free public service or self-managed | Automation, larger requests, privacy control, and multiple diagram languages |
| mermaid.tools | Compressed editor state in a URL fragment | Shareable editor link, not an image endpoint | Hosted editor | Collaborative editing without an account or API key |
Reliable workflows for Markdown, sites and CI
For a README or static site
Generate the Mermaid.ink SVG URL, then place it in the document as an image. SVG stays sharp at different sizes, but check your host’s SVG security policy. If the host strips remote images, download the SVG during the build and commit or publish the local file instead.
For a social card or thumbnail
Use PNG, JPEG, or WebP and set an explicit background, width, height, and scale. A solid background avoids transparency surprises when a social platform previews the image. Inspect the downloaded dimensions rather than relying on the browser’s displayed size.
For a PDF or print handout
Use the PDF route and select fit, paper, and landscape settings appropriate to the diagram. Wide sequence and architecture diagrams generally need landscape orientation. Open the PDF in a viewer before distributing it; page fitting can make labels unreadably small even when the export technically succeeds.
For continuous integration
Keep Mermaid source files in version control, generate the endpoint or POST request in the build, and fail the job when the HTTP response is not a successful image or PDF. Cache generated artifacts when the source has not changed. Pin your chosen theme and dimensions so a renderer change does not silently alter every published page.
Common failures and fixes
The image is blank or shows an error
- Reopen the Mermaid source in Live Editor and correct syntax first.
- Copy the encoded value again. Missing one character, inserting a newline, or decoding percent escapes can invalidate the payload.
- Try the SVG route. If SVG works but the raster route does not, the problem is usually an image-format or sizing request rather than Mermaid syntax.
The URL works in a browser but not in Markdown
- Escape ampersands correctly when the URL is inside HTML.
- Check that your Markdown processor allows remote images and has not shortened or wrapped the long URL.
- Use a local downloaded artifact when your documentation platform blocks third-party image hosts.
Labels are clipped or too small
- Increase width or height before increasing scale; scale adds pixels but does not create more layout space.
- Split an oversized diagram into several smaller diagrams.
- For PDF, use fit and landscape options instead of forcing a portrait page.
Private data appears in a public link
Anyone who receives an image URL can request the rendered result. Do not place secrets, credentials, customer records, or confidential infrastructure details in a hosted diagram request. Use a self-managed Kroki deployment or an internal rendering process when your security policy requires it.
The diagram changes after a dependency or theme update
Rendering is not necessarily immutable. Preserve the Mermaid source, record the selected theme and output settings, and store release artifacts when exact historical appearance matters.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesOr skip the browser setup
If you already have a public Mermaid image URL and need a clean capture for a report, preview, or asset pipeline, ScreenshotNeo can fetch that page with one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Use the generated Mermaid.ink URL as the url value in the examples below. The sample target is a Mermaid.ink image payload for a simple graph; replace only that target with your own completed image URL.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggVEQ7QS0tPkIiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggVEQ7QS0tPkIiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggVEQ7QS0tPkIiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`ScreenshotNeo returned ${res.status}`);
await Bun.write('shot.webp', res);See the ScreenshotNeo documentation for request options. You can select full-page capture, a CSS element, a device preset or custom viewport, dark mode, retina scale, image resizing, transparent backgrounds, custom CSS or JavaScript, cookies, headers, user agents, timezone, geolocation, resource blocking, selector or network-idle waits, caching with a chosen TTL, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, PDF paper and margin settings, and usage or OpenAPI endpoints. Every plan includes every feature.
| Plan | Allowance | Price |
|---|---|---|
| Free | 1,000 shots/month | $0, no card |
| Starter | 3,000 shots | $5 |
| Growth | 15,000 shots | $15 |
| Pro | 60,000 shots | $39 |
| Scale | 250,000 shots | $99 |
| Business | 1,000,000 shots | $249 |
Yearly billing gives two months free. Create a free ScreenshotNeo account to get 1,000 screenshots a month without adding a card.
Decision guide
- Choose Mermaid.ink when you need a Mermaid diagram turned into an image URL immediately.
- Choose Kroki when your application sends source text, needs POST, supports several diagram languages, or requires self-managed infrastructure.
- Choose mermaid.tools when the goal is an account-free collaborative editor link rather than image bytes.
- Use ScreenshotNeo when you need a clean, automated capture of the resulting page or image, especially in an AI-agent workflow.
Frequently Asked Questions
Can I use a Mermaid.ink URL directly in an HTML image tag?
Yes. Use the completed URL from the /img/ or /svg/ endpoint as the src value and provide descriptive alt text.
Is mermaid.tools an alternative image API?
No. It stores compressed editor state in the URL fragment for sharing. Use Mermaid.ink or Kroki when another program needs rendered image or PDF bytes.
Should I use GET or POST with Kroki?
GET is convenient for short, cacheable diagrams; POST avoids long URLs and is safer for generated or larger Mermaid source.
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.
Free tools Windows power users keep installed
One-click scans. No signup required.
