Pretty Mermaid Skills

<div align="center">

Pretty Mermaid

Beautiful Mermaid diagrams for AI agents

Turn Mermaid source into polished SVGs, shareable PNGs, and terminal-ready ASCII—locally, without a browser.

English ｜ 中文 ｜ 日本語

</div>

🚀 Install

npx skills add imxv/pretty-mermaid-skills@pretty-mermaid -g -y

View the skill, install count, and security audits on skills.sh →

Why Pretty Mermaid?

• Made for AI agents: works with Claude Code, Cursor, Codex, Gemini CLI, and more
• One source, three outputs: polished SVG for docs, PNG for sharing, and ASCII/Unicode for terminals
• No browser required: renders locally without Chromium, Puppeteer, or a DOM
• Flexible by default: 15 themes, custom colors, six diagram types, and batch rendering

✨ Features

• 📊 Multi-format Support: SVG, PNG, and ASCII rendering export
• 🎨 Rich Themes: 15 built-in themes for different scenarios
• 📈 Six Diagram Types: Flowchart, Sequence, State, Class, ER, and XY charts
• ⚡ 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
catppuccin-latte	tokyo-night-storm	dracula
github-light	catppuccin-mocha	one-dark
solarized-light	github-dark
	solarized-dark

🎨 Theme Gallery

Compare the same flowchart across every built-in theme in the complete 15-theme gallery.

<p align="center"> <img src="assets/theme_gallery/tokyo-night.svg" alt="Tokyo Night theme preview" width="49%"> <img src="assets/theme_gallery/github-light.svg" alt="GitHub Light theme preview" width="49%"> </p>

🤖 AI Assistant Integration

Seamlessly integrates with the following AI coding environments:

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

Installation details

Install from GitHub

npx skills add imxv/pretty-mermaid-skills@pretty-mermaid -g -y

Verify Installation

npx skills list -g

Confirm that pretty-mermaid appears in the global skill list. Node.js 16 or newer is required.

📖 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

Render PNG

node scripts/render.mjs \
  --input diagram.mmd \
  --output output.png \
  --format png \
  --width 1200 \
  --theme tokyo-night

Batch Render

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

📂 Examples

Check the 6 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
• xychart.mmd - XY Chart (bar and line)

PNG output is rendered directly in Node.js with no external converter required. The renderer also supports CJK state names, multiline labels, linkStyle, configurable ELK layout spacing, interactive XY chart tooltips, and ANSI-colored terminal output.

📚 Documentation

• Skill usage guide
• Theme gallery
• Diagram syntax reference
• Theme and custom color reference
• beautiful-mermaid API reference
• Release process

🤝 Community

Read the contribution guide, report problems with the issue templates, and review the security policy before sharing sensitive findings. Release history is tracked in the changelog.

⚙️ Requirements

• Node.js 16+

📄 License

MIT License

Star History

🙏 Acknowledgments

Based on beautiful-mermaid