How do I install the Beautiful Mermaid skill?

Run npx skillmds@latest add mkurman/beautiful-mermaid in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Beautiful Mermaid skill do?

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram. It is listed under AI & ML on SkillMD.

Is Beautiful Mermaid safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Beautiful Mermaid?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Beautiful Mermaid free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Beautiful Mermaid?

mkurman (@mkurman) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Beautiful Mermaid by mkurman — Agent Skill

Name: Beautiful Mermaid
Author: mkurman

File contents

----|------------|----------| | 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.)

Frequently asked questions

Beautiful Mermaid