Beautiful Mermaid
Documentsbeautiful-mermaidBeautiful 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.
How to use this skill
Bring this guide into your coding agent with a prompt tailored to the tool you use.
- Open your project in Codex.
- Copy and paste the prompt below.
- Review files and risks before approving any action.
Inspect the Agent Skill at https://github.com/mkurman/zorai/blob/HEAD/skills/productivity/agent-skills/beautiful-mermaid/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/beautiful-mermaid, but wait for my approval before writing files or running scripts.
Copying this prompt does not install or run the skill. Review third-party files before use.
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.)