# Beautiful Mermaid

> Beautiful Mermaid is an Agent Skill for documents published in the mkurman/zorai repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.

- Skill name: `beautiful-mermaid`
- Category: [Documents](https://www.openparable.com/skill/documents/1)
- Source: https://github.com/mkurman/zorai/blob/HEAD/skills/productivity/agent-skills/beautiful-mermaid/SKILL.md
- Repository: mkurman/zorai (320 GitHub stars when collected)

## SKILL.md

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

---

Source: https://www.openparable.com/skill/documents/beautiful-mermaid (OpenParable). Cite the canonical URL above.