skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

beautiful-mermaid

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

Updated Sep 1, 2026
Search Tags:#png#mermaid#flowchart#visualization#svg#diagram#render
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill beautiful-mermaid-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: beautiful-mermaid
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/beautiful-mermaid
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill beautiful-mermaid-zamansepeti43

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 manual tooling and often produces low-quality output. This Skill renders Mermaid diagrams into scalable SVG files and high-resolution PNG captures with consistent theming. ## Core Features & Use Cases - SVG and PNG Rendering: Generate vector SVG output plus a 4K-resolution PNG screenshot via an HTML wrapper and browser capture. - 13 Built-in Themes: Apply themes like Tokyo Night, Dracula, Nord, GitHub Dark, and Catppuccin Latte to match your documentation style. - Multiple Diagram Types: Supports flowcharts, sequence diagrams, state diagrams, class diagrams, and entity-relationship diagrams. - Use Case: You are writing architecture documentation and need a sequence diagram of your OAuth flow as a PNG for a slide deck. Provide the Mermaid code, pick the tokyo-night theme, and receive both SVG and PNG files. ## Quick Start Render this Mermaid flowchart code as a diagram with the tokyo-night theme and give me both the SVG and PNG files.

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 input 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, the default theme is used.

Which Mermaid diagram types does Beautiful Mermaid support?▼

It supports flowcharts, sequence diagrams, state diagrams, class diagrams, and entity-relationship diagrams. Each type has documented syntax patterns in the bundled Mermaid syntax reference.

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 A -- label --> B, verify all node IDs are unique, and check for unclosed brackets in node labels.

Can I run the render script without Bun installed?▼

Yes. The scripts support three runtimes: bun run, npx tsx, and deno run with read, write, and net permissions. The beautiful-mermaid package is installed automatically if missing.

Related Skills

Explore More Software Engineering Skills→
GS1NedGS1Ned

diagram-generator

Generate architecture, database, component, and sequence diagrams using Mermaid syntax.

Community
Intermediate
M-Abdullah07M-Abdullah07
1

mermaid-graph-renderer

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

Community
Intermediate
ajoslinajoslin
24

mermaid-gen

Create syntactically correct Mermaid diagrams with validated Live Editor links.

Community
Intermediate
pinakdhabupinakdhabu
8

universal-diagram-generator

Generate flowcharts, sequence diagrams, and more from Mermaid, D2, or Graphviz code.

Community
Intermediate