beautiful-mermaid

Render Mermaid diagrams to SVG and PNG with theme options.

1|Updated Apr 13, 2015
One-click install
npx skills add https://github.com/tyler-dot-earth/.dotfiles --skill beautiful-mermaid-tyler-dot-earth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: beautiful-mermaid
Source: https://github.com/tyler-dot-earth/.dotfiles/tree/main/agents/skills/beautiful-mermaid
Command: npx skills add https://github.com/tyler-dot-earth/.dotfiles --skill beautiful-mermaid-tyler-dot-earth

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library.

Core Features & Use Cases

  • Supports Flowchart, Sequence, State, Class, and Entity-Relationship diagrams with optional themes.
  • Renders diagrams to SVG and PNG, including an HTML wrapper for high-quality screenshots.
  • Includes a deterministic workflow with a code-first or file-based input approach.

Quick Start

Provide Mermaid diagram code or a file and the tool will render it to SVG and PNG using the Beautiful Mermaid library.

Frequently Asked Questions about beautiful-mermaid

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

FAQPage Schema
How do I render Mermaid diagrams to SVG and PNG files?▼

You can render Mermaid diagrams to SVG and PNG by providing diagram code or an input file. The tool processes Flowchart, Sequence, State, Class, and Entity-Relationship diagrams using a deterministic workflow.

What diagram types are supported for Mermaid visualization?▼

Mermaid visualization supports Flowchart, Sequence, State, Class, and Entity-Relationship diagrams. These diagram types can be rendered with optional themes applied during the SVG and PNG generation process.

Can I use my own themes when rendering Mermaid diagrams?▼

Yes, you can apply optional themes when rendering Mermaid diagrams. The rendering workflow supports theme customization for supported diagram types before outputting the final SVG and PNG files.

Do I need agent-browser to export Mermaid diagrams as PNG?▼

Yes, exporting Mermaid diagrams as PNG relies on agent-browser for capture. The tool loads rendering logic and an HTML wrapper to produce high-quality screenshots, while SVG generation does not require browser capture.

What is the best way to automate Mermaid diagram rendering in a workflow?▼

The best way to automate Mermaid diagram rendering is using a code-first or file-based input approach. This deterministic workflow consistently produces SVG and PNG outputs without manual intervention for your visualization tasks.

Why does my Mermaid PNG export require an HTML wrapper?▼

The Mermaid PNG export requires an HTML wrapper to facilitate high-quality screenshots via agent-browser. This approach ensures the visual fidelity of the rendered diagram is preserved during the PNG capture process.