Pretty-mermaid-skills: To provide AI with Mermaid chart rendering capability, supporting both SVG and ASCII output formats

🔗 View on GitHub: imxv/Pretty-mermaid-skills

🚀 Quick Installation

Render Mermaid diagrams as beautiful SVGs or ASCII art.

npx

npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid

What It Does

A Mermaid diagram rendering skill for AI, supporting both SVG and ASCII output formats to make your documentation more vivid.

• 📊 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

Available Themes

Light Themes

• zinc-light, tokyo-night-light, cappuccin-latte, github-light, solarized-light

Dark Themes

• zinc-dark, tokyo-night, tokyo-night-storm, cappuccin-mocha, github-dark, solarized-dark

Other

• nord, nord-light, dracula, one-dark

Supported AI Environments

• Claude Code
• Cursor
• Gemini CLI
• Antigravity
• OpenCode
• Codex
• qoder

Example Usage

# Render single diagram
node scripts/render.mjs \
  --input diagram.mmd \
  --output output.svg \
  --theme tokyo-night

# Batch render
node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./output \
  --theme dracula

# Preview themes
node scripts/themes.mjs

Example Diagrams

Check the 5 template files in assets/example_diagrams/:

• flowchart.mmd — Flowchart
• sequence.mmd — Sequence Diagram
• state.mmd — State Diagram
• class.mmd — Class Diagram
• er.mmd — ER Diagram

📚 Detailed Usage Guide | 📜 MIT License