Pretty Mermaid

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

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

• 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

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

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

Seamlessly integrates with the following AI coding environments:

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

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

npx skills list -g

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

node scripts/themes.mjs

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

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

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

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.

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

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.

• Node.js 16+

MIT License

Based on beautiful-mermaid