skills.rest
musingfox
musingfoxCOMMUNITY
Explore all skills by this author →
GitHub

mermaid-display-beauty

Render Mermaid diagrams as SVG images using the beautiful-mermaid renderer.

2|Updated Oct 16, 2025
Search Tags:#mermaid#bun#svg#server-side#diagram#render#web-diagrams
One-click install
npx skills add https://github.com/musingfox/cc-plugins --skill mermaid-display-beauty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-display-beauty
Source: https://github.com/musingfox/cc-plugins/tree/main/mermaid-viz/skills/mermaid-display-beauty
Command: npx skills add https://github.com/musingfox/cc-plugins --skill mermaid-display-beauty

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Render Mermaid diagrams as SVG images using the beautiful-mermaid renderer to enable fast, server-side rendering without relying on browser tools or Puppeteer.

Core Features & Use Cases

  • Synchronous server-side rendering of Mermaid syntax to SVG
  • Supports Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, and XY Chart
  • Useful when Bun is installed or when mmdc/npx is unavailable and SVG output is preferred

Quick Start

Provide a Mermaid diagram specification and the skill will render it as an SVG

Frequently Asked Questions about mermaid-display-beauty

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

FAQPage Schema
How do I render Mermaid diagrams to SVG without using a browser or Puppeteer?▼

Render Mermaid diagrams to SVG server-side without Puppeteer by providing Mermaid syntax to this skill, which uses Bun and the beautiful-mermaid renderer to synchronously generate SVG files. It eliminates browser dependencies for diagram rendering.

Do I need Bun installed to render Mermaid diagrams server-side?▼

Yes, Bun is required to render Mermaid diagrams server-side with this skill, though dependencies auto-install on first use. Bun executes the synchronous rendering process and outputs the SVG to a temporary file path.

What Mermaid diagram types can I render as SVG using Bun?▼

You can render flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, and XY charts as SVG using this skill. The server-side rendering processes these Mermaid diagram types synchronously to produce SVG outputs.

How do I control the color scheme when rendering Mermaid diagrams to SVG?▼

Control the SVG color scheme when rendering Mermaid diagrams by setting the MERMAID_COLOR_SCHEME environment variable. This directs the beautiful-mermaid renderer to apply specific color themes to the server-side SVG output.

What is the best way to generate SVG diagrams for architectures and data flows without mmdc or npx?▼

Generate SVG diagrams for architectures and data flows without mmdc or npx by using Bun with the beautiful-mermaid renderer. It synchronously renders Mermaid syntax to SVG files server-side, bypassing unavailable command-line tools.

Related Skills

Explore More Software Engineering Skills→
hyperjumptechhyperjumptech
1

mermaid-diagram

Generate and validate syntactically correct Mermaid diagrams from user specifications using CLI and validator script.

Official
Advanced
usepowershellusepowershell
9

pr-screenshots

Capture Playwright screenshots and embed them into GitHub pull request descriptions.

Community
Intermediate
luanzebaluanzeba

mermaid

Validate Mermaid diagrams syntax in .mmd files and Markdown blocks, rendering SVG output with ASCII previews.

Community
Intermediate
spencerpaulyspencerpauly
672

exporting-to-png

Convert HTML, code, diagrams, and SVG content into PNG images.

Community
Intermediate