Pretty-Mermaid Skills

Render Mermaid diagrams as beautiful SVGs or ASCII art

Ultra-fast, fully themeable, zero DOM dependencies. Built for the AI era.

English ｜ 中文

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-mermaid

Verify 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.mjs

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

📂 Examples

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

📚 Documentation

See SKILL.md for detailed usage guide.

⚙️ Requirements

• Node.js 14+

📄 License

MIT License

Star History

🙏 Acknowledgments

Based on beautiful-mermaid