beautiful-mermaid
CommunityRender Mermaid diagrams as SVG/PNG instantly.
Authoredrouhardmicrosoft
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill makes it simple to turn Mermaid diagram descriptions into ready-to-use visuals (SVG and PNG) without manual rendering or tooling setup.
Core Features & Use Cases
- Diagram rendering: Converts Flowchart, Sequence, State, Class, and ER diagrams to high-quality SVG and PNG outputs.
- Theming & output options: Supports multiple themes for publication-ready visuals and adjustable output sizes for documentation or presentations.
- Use Case: Imagine documenting a software system; you provide the Mermaid code and receive ready-to-use diagrams for documentation, slides, or bug reports.
Quick Start
bun run scripts/render.ts --code "graph TD; A-->B" --output example Or: bun run scripts/render.ts --input diagram.mmd --output diagram
Dependency Matrix
Required Modules
beautiful-mermaid
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: beautiful-mermaid Download link: https://github.com/edrouhardmicrosoft/agent-canvas-skills/archive/main.zip#beautiful-mermaid Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.