How to Convert Mermaid to PNG or SVG
Mermaid renders in GitHub, GitLab and Notion, but not in email, Slack, PDFs, Word or most CMSs. For those you need an image. Here are five ways to get one, from a one-off export to an image URL your code can generate.
Developers · 2026-10-23 · 6 min read
1. Mermaid Live Editor (one-off)
Paste the code at mermaid.live and use Actions → PNG or SVG. Perfect for a single diagram; no good for anything automated.
2. mermaid-cli (in your build)
The official command-line tool (`mmdc -i diagram.mmd -o diagram.png`) renders with a headless browser. Great in CI or a docs build; it needs Node and Chromium installed wherever it runs.
3. A hosted image URL (no install)
Encode the Mermaid text in a URL and use that URL as an image anywhere — email, Slack messages, PDFs, READMEs, Confluence. AI Flowchart's image API is compatible with mermaid.ink URLs and caches every image on a CDN:
| Need | URL |
|---|---|
| PNG | https://img.aiflowchart.io/img/<base64 Mermaid> |
| SVG | https://img.aiflowchart.io/svg/<base64 Mermaid> |
| Dark theme | add ?theme=dark |
| Styled diagram | add ?style=aiflowchart |
Tip: Use base64url encoding (replace + and / with - and _, drop the = padding). In JavaScript: btoa(unescape(encodeURIComponent(code))).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,"").
4. Your docs platform
GitHub, GitLab, Notion, Obsidian and Docusaurus render Mermaid blocks directly — no image needed while the diagram stays inside those tools.
5. Edit it as a diagram, then export
If the diagram needs layout tweaks, colours or a presentation, import the Mermaid into an editor and export PNG, PDF or PowerPoint from there. In AI Flowchart: Import → Mermaid, or click "Edit as a board" on the Mermaid to PNG page.
Which one should you use?
| Situation | Best option |
|---|---|
| One diagram for a slide or doc | Live Editor or an editor export |
| Diagrams generated in CI | mermaid-cli |
| Emails, Slack bots, PDFs, AI agents | Hosted image URL |
| Docs on GitHub or Notion | Native Mermaid blocks |
Frequently asked questions
How do I convert Mermaid to PNG online?
Paste it into a Mermaid to PNG tool such as aiflowchart.io/mermaid-to-png, or use the Mermaid Live Editor's export.
Can I put a Mermaid diagram in an email?
Not as code — email clients do not run Mermaid. Use an image URL (img.aiflowchart.io/img/…) or attach a PNG.
Is there a mermaid.ink alternative?
Yes. img.aiflowchart.io uses the same URL format (/img/ and /svg/ with base64 input), so you can switch by changing the domain.