Pretty-mermaid-skills
<div align="center"> # Pretty-Mermaid Skills  Render Mermaid diagrams as beautiful SVGs or ASCII art Ultra-fast, fully themeable, zero DOM dependencies. Built for the AI era. [](LICENSE) [](https://nodejs.org/) [](https://github.com/imxv/Pretty-mermaid-skills) **English** ο½ [δΈζ](README_CN.md) </div> ## Introduction A Mermaid diagram rendering skill for AI, supporting both SVG and ASCII output formats to make your documentation more vivid. ## β¨ Features - π **Multi-format Support**: SVG and ASCII rendering export - π¨ **Rich Themes**: 15 built-in themes for different scenarios - π **Full Diagram Support**: Flowchart, Sequence, State, Class, ER and more - β‘ **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 | | cappuccin-latte | tokyo-night-storm | dracula | | github-light | cappuccin-mocha | one-dark | | solarized-light | github-dark | | | | solarized-dark | | ## π€ AI Assistant Integration Seamlessly integrates with the following AI coding environments: - **Claude Code** - **Cursor** - **Gemini CLI** - **Antigravity** - **OpenCode** - **Codex** - **qoder** ## π Installation ### One-click Install ```bash npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid ``` ### Verify Installation ```bash cd Pretty-mermaid node scripts/themes.mjs ``` > **Note**: Dependencies will be auto-installed on first run. Just ensure Node.js is available. ## π Quick Start ### List Available Themes ```bash node scripts/themes.mjs ``` ### Render Single Diagram ```bash node scripts/render.mjs \ --input diagram.mmd \ --output output.svg \ --theme tokyo-night ``` ### Batch Render ```bash node scripts/batch.mjs \ --input-dir ./diagrams \ --output-dir ./output \ --theme dracula ``` ## π Examples Check the 5 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 ## π Documentation See [SKILL.md](SKILL.md) for detailed usage guide. ## βοΈ Requirements - Node.js 14+ ## π License MIT License ## Star History [](https://www.star-history.com/#imxv/Pretty-mermaid-skills&type=timeline&legend=top-left) ## π Acknowledgments Based on [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid)