| 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. |
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.
Flowchart Direction
ALWAYS use TD (top-down) for flowcharts. Start every flowchart with graph TD.
Do NOT use LR, RL, or BT directions.
Supported Diagram Types
- Flowchart - Process flows, decision trees, CI/CD pipelines (always use
graph TD)
- 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.
Common Syntax Patterns
Flowchart Edge Labels
Use pipe syntax for edge labels:
A -->|label| B
A ---|label| B
Avoid space-dash syntax which can cause incomplete renders:
A -- label --> B # May cause issues
Node Labels with Special Characters
Wrap labels containing special characters in quotes:
A["Label with (parens)"]
B["Label with / slash"]
