\n\n# Pretty Mermaid\n\n**Beautiful Mermaid diagrams for AI agents**\n\nTurn Mermaid source into polished SVGs, shareable PNGs, and terminal-ready ASCII—locally, without a browser.\n\n\n\n[](https://www.skills.sh/imxv/pretty-mermaid-skills/pretty-mermaid)\n[](https://github.com/imxv/Pretty-mermaid-skills/actions/workflows/ci.yml)\n[](LICENSE)\n[](https://nodejs.org/)\n[](https://github.com/imxv/Pretty-mermaid-skills)\n\n**English** ｜ [中文](README_CN.md) ｜ [日本語](README_JA.md)\n\n
\n\n## 🚀 Install\n\n```bash\nnpx skills add imxv/pretty-mermaid-skills@pretty-mermaid -g -y\n```\n\n[View the skill, install count, and security audits on skills.sh →](https://www.skills.sh/imxv/pretty-mermaid-skills/pretty-mermaid)\n\n## Why Pretty Mermaid?\n\n- **Made for AI agents**: works with Claude Code, Cursor, Codex, Gemini CLI, and more\n- **One source, three outputs**: polished SVG for docs, PNG for sharing, and ASCII/Unicode for terminals\n- **No browser required**: renders locally without Chromium, Puppeteer, or a DOM\n- **Flexible by default**: 15 themes, custom colors, six diagram types, and batch rendering\n\n## ✨ Features\n\n- 📊 **Multi-format Support**: SVG, PNG, and ASCII rendering export\n- 🎨 **Rich Themes**: 15 built-in themes for different scenarios\n- 📈 **Six Diagram Types**: Flowchart, Sequence, State, Class, ER, and XY charts\n- ⚡ **High Performance**: Batch parallel rendering\n- 📚 **Ready to Use**: Complete templates and detailed documentation\n\n### Supported Themes\n| Light Themes | Dark Themes | Other |\n| :--- | :--- | :--- |\n| zinc-light | zinc-dark | nord |\n| tokyo-night-light | tokyo-night | nord-light |\n| catppuccin-latte | tokyo-night-storm | dracula |\n| github-light | catppuccin-mocha | one-dark |\n| solarized-light | github-dark | |\n| | solarized-dark | |\n\n## 🎨 Theme Gallery\n\nCompare the same flowchart across every built-in theme in the [complete 15-theme gallery](docs/THEME_GALLERY.md).\n\n
\n \n \n
\n\n## 🤖 AI Assistant Integration\n\nSeamlessly integrates with the following AI coding environments:\n\n- **Claude Code**\n- **Cursor**\n- **Gemini CLI**\n- **Antigravity**\n- **OpenCode**\n- **Codex**\n- **qoder**\n\n## Installation details\n\n### Install from GitHub\n```bash\nnpx skills add imxv/pretty-mermaid-skills@pretty-mermaid -g -y\n```\n\n### Verify Installation\n```bash\nnpx skills list -g\n```\nConfirm that `pretty-mermaid` appears in the global skill list. Node.js 16 or newer is required.\n\n## 📖 Quick Start\n\n### List Available Themes\n```bash\nnode scripts/themes.mjs\n```\n\n### Render Single Diagram\n```bash\nnode scripts/render.mjs \\\n --input diagram.mmd \\\n --output output.svg \\\n --theme tokyo-night\n```\n\n### Render PNG\n```bash\nnode scripts/render.mjs \\\n --input diagram.mmd \\\n --output output.png \\\n --format png \\\n --width 1200 \\\n --theme tokyo-night\n```\n\n### Batch Render\n```bash\nnode scripts/batch.mjs \\\n --input-dir ./diagrams \\\n --output-dir ./output \\\n --theme dracula\n```\n\n## 📂 Examples\n\nCheck the 6 template files in `assets/example_diagrams/`:\n- `flowchart.mmd` - Flowchart\n- `sequence.mmd` - Sequence Diagram\n- `state.mmd` - State Diagram\n- `class.mmd` - Class Diagram\n- `er.mmd` - ER Diagram\n- `xychart.mmd` - XY Chart (bar and line)\n\nPNG 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.\n\n## 📚 Documentation\n\n- [Skill usage guide](SKILL.md)\n- [Theme gallery](docs/THEME_GALLERY.md)\n- [Diagram syntax reference](references/DIAGRAM_TYPES.md)\n- [Theme and custom color reference](references/THEMES.md)\n- [beautiful-mermaid API reference](references/api_reference.md)\n- [Release process](RELEASING.md)\n\n## 🤝 Community\n\nRead the [contribution guide](CONTRIBUTING.md), report problems with the issue templates, and review the [security policy](SECURITY.md) before sharing sensitive findings. Release history is tracked in the [changelog](CHANGELOG.md).\n\n## ⚙️ Requirements\n- Node.js 16+\n\n## 📄 License\nMIT License\n\n## Star History\n\n[](https://www.star-history.com/?repos=imxv%2FPretty-mermaid-skills&type=timeline&legend=bottom-right)\n\n## 🙏 Acknowledgments\nBased on [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid)\n",
"bytes": 5095,
"sha": "7b04c0d4ff29ba6ee6c08d4de7d712f97dc5d83538ceeb2cae00296bcc79b68d",
"repo_slug": "imxv/pretty-mermaid-skills",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/skl_imxv_pretty_mermaid_skills_pretty_mermai_75ef1b87/readme"
}
![\"Tokyo](\"assets/theme_gallery/tokyo-night.svg\")
\n ![\"GitHub](\"assets/theme_gallery/github-light.svg\")
\n