Beautiful Mermaid

Turns Mermaid diagram code into clean SVG and PNG outputs with proper theme support. You get twelve themes out of the box, from Tokyo Night to Solarized, and it handles the full pipeline: render the diagram, wrap it in HTML, then use agent-browser to capture a 4K screenshot for the PNG. The documentation is thoughtful about syntax gotchas, like using pipe notation for edge labels instead of space-dash syntax that can break renders. If you're generating diagrams for documentation or need to produce both vector and raster formats without manual screenshots, this handles the whole workflow. Clean intermediary files yourself afterward.

skills.sh installs: 1.8K
GitHub stars: 301
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add intellectronica/agent-skills --skill beautiful-mermaid --agent claude-code

Installs into .claude/skills of the current project.

Files

Beautiful Mermaid Diagram Rendering

Render Mermaid diagrams as SVG and PNG images using the Beautiful Mermaid library.

Dependencies

This skill requires the agent-browser skill for PNG rendering. Load it before proceeding with PNG capture.

Supported Diagram Types

Flowchart - Process flows, decision trees, CI/CD pipelines
Sequence - API calls, OAuth flows, database transactions
State - State machines, connection lifecycles
Class - UML class diagrams, design patterns
Entity-Relationship - Database schemas, data models

Available Themes

Default, Dracula, Solarized, Zinc Dark, Tokyo Night, Tokyo Night Storm, Tokyo Night Light, Catppuccin Latte, Nord, Nord Light, GitHub Dark, GitHub Light, One Dark.

If no theme is specified, use default.