Pretty Mermaid Skills — AI skill for Claude Code
To provide AI with Mermaid chart rendering capability, supporting both SVG and ASCII output formats.
How to install Pretty Mermaid Skills
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open imxv/Pretty-mermaid-skills and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Pretty Mermaid Skills does
Render Mermaid diagrams as beautiful SVGs or ASCII art
Alternatives in AI
- Architecture Diagram Generator — Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files 7k ★
- AI Research SKILLs — Visual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code 5.7k ★
- Cursor Tools — by eastlondoner - Creates a versatile AI command interface supporting multiple providers and models with flexi 4.7k ★
README
Pretty-Mermaid Skills
Render Mermaid diagrams as beautiful SVGs or ASCII art
Ultra-fast, fully themeable, zero DOM dependencies. Built for the AI era.
[](LICENSE) [](https://nodejs.org/) [](https://github.com/imxv/Pretty-mermaid-skills)
**English** ｜ [中文](README_CN.md)
Introduction
A Mermaid diagram rendering skill for AI, supporting both SVG and ASCII output formats to make your documentation more vivid.
✨ Features
- 📊 Multi-format Support: SVG and ASCII rendering export
- 🎨 Rich Themes: 15 built-in themes for different scenarios
- 📈 Full Diagram Support: Flowchart, Sequence, State, Class, ER and more
- ⚡ High Performance: Batch parallel rendering
- 📚 Ready to Use: Complete templates and detailed documentation
Supported Themes
| Light Themes | Dark Themes | Other |
|---|---|---|
| zinc-light | zinc-dark | nord |
| tokyo-night-light | tokyo-night | nord-light |
| cappuccin-latte | tokyo-night-storm | dracula |
| github-light | cappuccin-mocha | one-dark |
| solarized-light | github-dark | |
| solarized-dark |
🤖 AI Assistant Integration
Seamlessly integrates with the following AI coding environments:
- Claude Code
- Cursor
- Gemini CLI
- Antigravity
- OpenCode
- Codex
- qoder
🚀 Installation
One-click Install
npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaidVerify Installation
cd Pretty-mermaid
node scripts/themes.mjs**Note**: Dependencies will be auto-installed on first run. Just ensure Node.js is available.
📖 Quick Start
List Available Themes
node scripts/themes.mjsRender Single Diagram
node scripts/render.mjs \
--input diagram.mmd \
--output output.svg \
--theme tokyo-nightBatch Render
node scripts/batch.mjs \
--input-dir ./diagrams \
--output-dir ./output \
--theme dracula📂 Examples
...
Related Skills
Explain It With Pictures
A skill for AI coding agents (Claude Code, opencode, Cursor): explain any codebase to non-technical builders w
Update Branch Name
by giselles-ai - Updates branch names with proper prefixes and formats, enforcing naming conventions, supporti
Obsidian AI Tagger Universe
An intelligent Obsidian plugin that leverages AI to automatically analyze note content and suggest relevant ta
Skul
Manage project-scoped personal AI configuration bundles (skills, commands, agents) for AI coding tools while s
Human Writing
Skill bắt AI viết văn giống người, không dùng em dash và các ký tự Unicode lạ mà AI hay sinh ra. Thay toàn bộ
Ascii Shader Tsx
Agent skill for generating animated ASCII art, dithered visuals, and shader-like effects as React/TSX componen
Related Agents
Npl Fim
Comprehensive fill-in-the-middle visualization specialist supporting modern web visualization tools including
Chart Reviewer
Reviews football chart and visualisation code for correctness, conventions, and rendering issues. Optionally i
Helm Compat Checker
Compare jhelm template output against Go Helm for a specific chart. Use to verify rendering compatibility.
