Pretty-Mermaid Skills
Render Mermaid diagrams as beautiful SVGs or ASCII art
Ultra-fast, fully themeable, zero DOM dependencies. Built for the AI era.
English ο½ δΈζ
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
npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid
Verify Installation
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
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 5 template files in assets/example_diagrams/:
flowchart.mmd- Flowchartsequence.mmd- Sequence Diagramstate.mmd- State Diagramclass.mmd- Class Diagramer.mmd- ER Diagram
π Documentation
See SKILL.md for detailed usage guide.
βοΈ Requirements
- Node.js 14+
π License
MIT License
Star History
π Acknowledgments
Based on beautiful-mermaid