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.