How do I convert a Mermaid diagram to PNG?

Paste your Mermaid code into the editor, wait for the live preview to render, choose PNG as the export format, set your preferred scale (2× recommended for sharp output), and click Download PNG. The image is generated entirely in your browser.

What Mermaid diagram types are supported?

This tool supports all standard Mermaid diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, and more. Any syntax valid in Mermaid v11 renders here.

Can I export Mermaid diagrams as SVG?

Yes. Select SVG as the export format and click Download. SVG is a vector format that scales without quality loss — ideal for documentation, wikis, and print. You can also copy the raw SVG markup with the Copy SVG button.

What is WebP export used for?

WebP produces smaller file sizes than PNG at similar quality, making it useful for web pages, Discord embeds, and server wiki uploads where bandwidth and load time matter.

Is my diagram sent to a server?

No. Mermaid rendering and image export run entirely in your browser using JavaScript. Your diagram code never leaves your device.

What does the scale option do?

Scale multiplies the output resolution for PNG and WebP exports. 1× matches the diagram size, 2× doubles width and height for retina displays, and 3× or 4× produce very high-resolution images for presentations or large prints.

Can I use transparent backgrounds?

Yes. Set Background to Transparent for PNG or WebP exports. SVG exports are always vector with a transparent background by default.

Why use Mermaid for Minecraft server documentation?

Mermaid lets server owners document network layouts, plugin permission tiers, vote reward flows, and maintenance schedules as text-based diagrams. Those diagrams can be version-controlled in Git, embedded in GitHub READMEs, and exported as images for Discord or wiki pages.

What Mermaid themes are available?

Four built-in themes: Default (light), Dark, Forest (green tones), and Neutral (grayscale). Change the theme before exporting to match your documentation style.

How do I fix a Mermaid syntax error?

Check the error message shown in the preview panel. Common issues include missing diagram type declarations (e.g. flowchart TD), unclosed brackets, or invalid node IDs. Use one of the sample diagrams as a starting template.

Tools · Diagrams

Mermaid Diagram to Image Converter

Convert Mermaid diagrams to PNG, WebP, or SVG images directly in your browser. Write flowcharts, sequence diagrams, Gantt charts, and more — preview live, then download or copy the SVG.

PNG · WebP · SVG export · live preview100% client-side · no uploads

Sample diagrams

Mermaid source

Preview

Preview will appear here

Export settings

Theme

Format

Scale

Background

PNG and WebP are rasterized in your browser from the SVG preview. Use 2× or 3× scale for sharp images in docs and wikis. SVG keeps vector quality and transparent backgrounds.

What is Mermaid?

Mermaid is a text-based diagramming language. Instead of dragging shapes in a GUI, you write plain-text definitions that render into SVG diagrams. It is widely used in GitHub READMEs, Notion, Obsidian, Confluence, and developer documentation because diagrams stay in sync with code and can be diffed in version control.

Diagram type	Keyword	Use case
Flowchart	flowchart TD	Decision trees, server join flows
Sequence	sequenceDiagram	Vote → Votifier → reward flows
Gantt	gantt	Backup and restart schedules
State	stateDiagram-v2	Server lifecycle (stopped → online)
Class / ER	classDiagram / erDiagram	Plugin permissions, database schemas
Pie	pie	Gamemode or player distribution

Mermaid diagrams for Minecraft server admins

Server networks, plugin developers, and hosting teams use diagrams to explain architecture to staff and players. Common documentation needs:

Network topology — hub → gamemode routing for BungeeCord or Velocity proxies
Vote reward pipeline — from server list vote to in-game reward (pair with our Votifier Tester)
Maintenance windows — Gantt charts for backup and restart schedules (see also Cron Generator)
Permission tiers — class diagrams for LuckPerms or group inheritance
Wiki embeds — export PNG or WebP for MediaWiki, GitBook, or Discord pins

Write the diagram as text in your repo, export an image here for platforms that do not render Mermaid natively, and keep the source in sync when your network changes.

PNG vs WebP vs SVG — which format to choose?

Format	Best for	Notes
PNG	Universal compatibility	Works everywhere — wikis, forums, Discord. Use 2× scale for crisp text.
WebP	Smaller file size on the web	Good for site pages and embeds where load time matters.
SVG	Scalable vector output	Infinite zoom, editable in Inkscape/Figma. Best for print and docs.

Frequently asked questions

Does GitHub render Mermaid automatically?

Yes — GitHub renders Mermaid in Markdown code blocks. For Discord, older wikis, or PDF exports that do not support Mermaid, use this tool to generate a PNG or SVG image instead.

Why is my exported PNG blurry?

Increase the scale to 2× or 3× before exporting. Raster formats encode a fixed pixel grid — higher scale produces more pixels and sharper text on retina displays.

Can I paste Mermaid from ChatGPT or Notion?

Yes. Paste the raw Mermaid source (without markdown fences) into the editor. If the source is wrapped in ```mermaid blocks, remove the fence lines first.