⏳ This skill is pending AI review.

Scores will appear once the review pipeline completes.

version unknown

pretty-mermaid

@imxv⭐ 1.5k stars

Choose how to use this skill

You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.

Adopt or update this skill from https://proskills.md/skills/other/imxv-pretty-mermaid-skills. First identify the installation path supported by this platform, detect whether it is already installed, compare the installed version with the latest stable release, show me what will change, and only then install or update it. If no native installer is available, use the complete package or source fallback described on the page.

1. Native installer

This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.

Do not guess an installer command or replace an existing version without reviewing the diff.

2. Complete package recommended

Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.

No complete ProSkills package is published for this listing yet.

3. Prompt-only

Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.

Need only the instruction file?

Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.

No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.

—/10

// RATINGS

⭐GitHub Stars

⭐⭐⭐⭐⭐ 1.5k on GitHubGitHub ↗

Very popular

🟢ProSkills Score

—

📍

Not yet listed on ClawHub or SkillsMP

// README

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 ｜中文｜日本語

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

🤖 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

🤝 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

// HOW IT'S BUILT

KEY FILES

SKILL.mdREADME.md

// REPO STATS

1.5k stars

// SHARE

Share on X Share on LinkedIn