beautiful-mermaid
✓Render Mermaid diagrams as SVG or ASCII art using the beautiful-mermaid library. Ultra-fast rendering with 15 built-in themes and Shiki VS Code theme support. Use when: (1) Creating diagrams from Mermaid syntax, (2) Rendering flowcharts, state, sequence, class, or ER diagrams, (3) Generating ASCII diagrams for terminal/markdown output, (4) Theming diagrams to match VS Code color schemes, (5) Embedding diagrams in documentation or web UIs. Supports SVG output with live theme switching and ASCII/Unicode output for plain text contexts.
Installation
SKILL.md
Render Mermaid diagrams as SVG (for UIs) or ASCII/Unicode (for terminals and markdown).
| bg | string | "#FFFFFF" | Background color | | fg | string | "#27272A" | Foreground color | | font | string | "Inter" | Font family | | transparent | boolean | false | Transparent background | | line | string | auto | Edge/connector color | | accent | string | auto | Arrow heads, highlights | | muted | string | auto | Secondary text, labels |
| surface | string | auto | Node fill tint | | border | string | auto | Node stroke |
Render Mermaid diagrams as SVG or ASCII art using the beautiful-mermaid library. Ultra-fast rendering with 15 built-in themes and Shiki VS Code theme support. Use when: (1) Creating diagrams from Mermaid syntax, (2) Rendering flowcharts, state, sequence, class, or ER diagrams, (3) Generating ASCII diagrams for terminal/markdown output, (4) Theming diagrams to match VS Code color schemes, (5) Embedding diagrams in documentation or web UIs. Supports SVG output with live theme switching and ASCII/Unicode output for plain text contexts. Source: alexmikhalev/beautiful-mermaid.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/alexmikhalev/beautiful-mermaid --skill beautiful-mermaid- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is beautiful-mermaid?
Render Mermaid diagrams as SVG or ASCII art using the beautiful-mermaid library. Ultra-fast rendering with 15 built-in themes and Shiki VS Code theme support. Use when: (1) Creating diagrams from Mermaid syntax, (2) Rendering flowcharts, state, sequence, class, or ER diagrams, (3) Generating ASCII diagrams for terminal/markdown output, (4) Theming diagrams to match VS Code color schemes, (5) Embedding diagrams in documentation or web UIs. Supports SVG output with live theme switching and ASCII/Unicode output for plain text contexts. Source: alexmikhalev/beautiful-mermaid.
How do I install beautiful-mermaid?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/alexmikhalev/beautiful-mermaid --skill beautiful-mermaid Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/alexmikhalev/beautiful-mermaid
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-01