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.
Sample diagrams
Preview will appear here
Export settings
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
- 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
Keeping diagrams in sync
Server networks, plugin developers, and hosting teams use diagrams to explain architecture to staff and players. 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. Pair vote flows with our Votifier Tester and maintenance schedules with the Cron Generator.
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.