skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

beautiful-mermaid

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

Updated Jul 16, 2026
Search Tags:#png#mermaid#flowchart#visualization#svg#diagram#render
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill beautiful-mermaid-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: beautiful-mermaid
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/beautiful-mermaid
Command: npx skills add https://github.com/X-manist/Cohmira --skill beautiful-mermaid-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning Mermaid diagram code into polished, shareable images usually requires manual tooling and screenshot fiddling. This Skill renders Mermaid diagrams to SVG and captures high-resolution PNGs with consistent themes in one repeatable workflow. ## Core Features & Use Cases - Themed SVG Rendering: Render flowcharts, sequence, state, class, and ER diagrams using 13 built-in themes such as Tokyo Night, Dracula, Nord, and GitHub Dark. - High-Resolution PNG Capture: Wrap the SVG in an HTML page and screenshot it at a 4K viewport 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 space-dash edge labels. - Use Case: Ask for a CI/CD pipeline flowchart in the tokyo-night theme, and receive both a scalable diagram.svg and a 4K diagram.png ready for documentation or slides. ## Quick Start Render this Mermaid flowchart of our deployment 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 the agent-browser CLI at a 4K viewport. Both files are saved to the current working directory.

What themes are available for Mermaid diagram rendering?▼

Thirteen themes are supported: default, dracula, solarized, zinc-dark, tokyo-night, tokyo-night-storm, tokyo-night-light, catppuccin-latte, nord, nord-light, github-dark, github-light, and one-dark. If no theme is specified, default is used.

Which Mermaid diagram types does beautiful-mermaid support?▼

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

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

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

Can I run the render script without Bun installed?▼

Yes, the scripts support multiple runtimes. You can use npx tsx for Node.js or deno run with read, write, and net permissions as alternatives to bun run.

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
darkroomengineeringdarkroomengineering
41

debug

Automate browser debugging with agent-browser CLI for navigation, screenshots, and snapshots.

Official
Intermediate
V4-CompanyV4-Company
2

marsai:drawing-diagrams

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

Official
Intermediate