skills.rest
Avistian
AvistianCOMMUNITY
Explore all skills by this author →
GitHub

beautiful-mermaid

Render Mermaid diagrams as SVG and high-resolution PNG images with themed styling.

Updated Jun 8, 2026
Search Tags:#png#mermaid#flowchart#visualization#svg#diagram#render
One-click install
npx skills add https://github.com/Avistian/nba --skill beautiful-mermaid-avistian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: beautiful-mermaid
Source: https://github.com/Avistian/nba/tree/main/.cursor/skills/beautiful-mermaid
Command: npx skills add https://github.com/Avistian/nba --skill beautiful-mermaid-avistian

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires beautiful-mermaid, and includes scripts (resource) and references (resource) components.

What problem does it solve? Converting Mermaid diagram code into polished, shareable image files requires juggling renderers, themes, and screenshot tooling; this Skill automates the full pipeline from Mermaid syntax to themed SVG and 4K-resolution PNG output. ## Core Features & Use Cases - SVG Rendering: Render flowcharts, sequence, state, class, and ER diagrams to SVG using the Beautiful Mermaid library with 13 built-in themes like Tokyo Night, Dracula, and Nord. - High-Resolution PNG Capture: Wrap the SVG in an HTML page and capture a 4K-viewport screenshot via the agent-browser skill for crisp raster output. - Syntax Guidance: A bundled Mermaid syntax reference helps generate valid diagram code and avoid common pitfalls like broken edge labels. - Use Case: A developer documenting an API OAuth flow can describe the sequence, get valid Mermaid code generated, and receive both a scalable SVG and a presentation-ready PNG in one pass. ## Quick Start Render this Mermaid flowchart of our CI/CD pipeline as an SVG and PNG using the tokyo-night theme.

Frequently Asked Questions about beautiful-mermaid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render a Mermaid diagram to SVG and PNG?▼

Run the render script with your Mermaid code or a .mmd file to produce an SVG, then wrap it in HTML and capture a PNG screenshot with agent-browser at a 4K viewport. Both files are saved to the current working directory.

What diagram types does Mermaid rendering support?▼

The skill supports flowcharts, sequence diagrams, state diagrams, class diagrams, and entity-relationship diagrams. A bundled syntax reference covers node shapes, edge styles, subgraphs, and relationship notation for each type.

What themes are available for Mermaid diagram rendering?▼

Thirteen themes are available including default, dracula, solarized, tokyo-night, nord, github-dark, github-light, catppuccin-latte, and one-dark. If no theme is specified, the default light-grey theme is used.

Why does my Mermaid diagram render incomplete or cut off?▼

Incomplete renders usually come from edge label syntax; use pipe notation like A -->|label| B instead of the space-dash form. Also check for duplicate node IDs, unclosed brackets, and unquoted special characters in labels.

Can I render Mermaid diagrams without Bun installed?▼

Yes, the render scripts also run with npx tsx on Node.js or with deno run using read, write, and net permissions. The script auto-detects the runtime and installs the beautiful-mermaid package if missing.

Related Skills

Explore More Design & Creative Skills→
jtucker9jtucker9

sight

Generate Mermaid diagrams from database, API, and component structures.

Community
Intermediate
M-Abdullah07M-Abdullah07
1

mermaid-graph-renderer

Convert Mermaid diagram syntax into SVG, PNG, or PDF images.

Community
Intermediate
TalonT-OrgTalonT-Org
5

verify-diag

Validate architecture diagrams against source code for component and connection accuracy.

Official
Advanced
V4-CompanyV4-Company
2

marsai:drawing-diagrams

Generate Mermaid diagrams from context and open them in mermaid.live.

Official
Intermediate