@trendtech33566: 【Saved Edition】 For those who want AI to draw Mermaid diagrams beautifully, this is it Pretty-Mermaid Skills, about 900…

X AI KOLs Timeline 08/13/26, 10:34 PM Tools

mermaid-diagrams svg-rendering ascii-art ai-integration claude-code cursor open-source

Summary

Pretty-Mermaid Skills is an open-source tool that lets AI assistants render beautiful Mermaid diagrams as SVG or ASCII art, with 15 themes and easy integration into Claude Code, Cursor, Codex, and other AI coding environments.

【Saved Edition】 For those who want AI to draw Mermaid diagrams beautifully, this is it Pretty-Mermaid Skills, about 900. What’s great about it ・Can output Mermaid diagrams in SVG/ASCII ・Can change the appearance with 15 different themes ・Supports a wide range including flowcharts/sequence diagrams/ER diagrams, etc. ・Easy to integrate directly into Claude Code, Cursor, Codex, etc. A practical skill for people who want to leave even diagrams to AI. It hits home for those who want to make documents and design notes easier to read.

Original Article

View Cached Full Text

Cached at: 08/14/26, 05:28 AM

[Saved Edition] For those who want AI to draw Mermaid diagrams beautifully, this is it Pretty-Mermaid Skills, about 900. What’s great about it ・Can output Mermaid diagrams in SVG/ASCII ・Can change the appearance with 15 different themes ・Supports a wide range including flowcharts/sequence diagrams/ER diagrams, etc. ・Easy to integrate directly into Claude Code, Cursor, Codex, etc. A practical skill for people who want to leave even diagrams to AI. It hits home for those who want to make documents and design notes easier to read.

imxv/Pretty-mermaid-skills

Source: https://github.com/imxv/Pretty-mermaid-skills

Pretty-Mermaid Skills

fLEWT5x.png Render Mermaid diagrams as beautiful SVGs or ASCII art Ultra-fast, fully themeable, zero DOM dependencies. Built for the AI era. License: MIT Node.js Version (https://nodejs.org/) GitHub stars (https://github.com/imxv/Pretty-mermaid-skills) 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

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 for detailed usage guide.

⚙️ Requirements

Node.js 14+

📄 License

MIT License

Star History

Star History Chart (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)