Pretty Mermaid

Beautiful Mermaid diagrams for AI agents

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

English ｜ 中文 ｜ 日本語

🚀 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, two outputs: polished SVG for docs 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 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

🎨 Theme Gallery

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

🤖 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

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)

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