beautiful-mermaid

name	beautiful-mermaid
description	Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.
tags	["productivity","agent-skills","beautiful-mermaid","svg","mermaid","diagram"]

----|------------|----------| | default | Light grey | General use | | dracula | Dark purple | Dark mode preference | | tokyo-night | Dark blue | Modern dark aesthetic | | tokyo-night-storm | Darker blue | Higher contrast | | nord | Dark arctic | Muted, calm visuals | | nord-light | Light arctic | Light mode with soft tones | | github-dark | GitHub dark | Matches GitHub UI | | github-light | GitHub light | Matches GitHub UI | | catppuccin-latte | Warm light | Soft pastel aesthetic | | solarized | Tan/cream | Solarized colour scheme | | one-dark | Atom dark | Atom editor aesthetic | | zinc-dark | Neutral dark | Minimal, no colour bias |

Troubleshooting

Theme not applied

Check the render script output for the bg and fg values, or inspect the SVG's opening tag for --bg and --fg CSS custom properties.

Diagram appears cut off or incomplete

• Check edge label syntax — use -->|label| pipe notation, not -- label -->
• Verify all node IDs are unique
• Check for unclosed brackets in node labels

Render produces empty or malformed SVG

• Validate Mermaid syntax at https://mermaid.live before rendering
• Check for special characters that need escaping (wrap in quotes)
• Ensure flowchart direction is specified (graph TD, graph LR, etc.)