Pretty Mermaid Skills

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

...