【保存版】想要 AI 漂亮地绘制 Mermaid 图表的人，就是它 Pretty-Mermaid Skills，约 900 星。它的优点 ・可以以 SVG/ASCII 形式输出 Mermaid 图表 ・可以通过 15 种不同主题改变外观 ・广泛支持流程图、时序图、ER 图等 ・可以直接轻松集成到 Claude Code、Cursor、Codex 等 对于连图表都想交给 AI 的人来说，这是一个实用的技能。对于想让文档和设计笔记更易读的人来说，正中要害。

imxv/Pretty-mermaid-skills 来源：https://github.com/imxv/Pretty-mermaid-skills

Pretty-Mermaid Skills

fLEWT5x.png

将 Mermaid 图表渲染为漂亮的 SVG 或 ASCII 艺术 超快、完全可主题化、零 DOM 依赖。为 AI 时代而生。

许可证: MIT Node.js 版本 (https://nodejs.org/) GitHub Stars (https://github.com/imxv/Pretty-mermaid-skills)

English | 中文

简介

一个面向 AI 的 Mermaid 图表渲染技能，支持 SVG 和 ASCII 两种输出格式，让你的文档更加生动。

✨ 特性

• 📊 多格式支持：SVG 和 ASCII 渲染导出
• 🎨 丰富主题：内置 15 种适用于不同场景的主题
• 📈 完整图表支持：流程图、时序图、状态图、类图、ER 图等
• ⚡ 高性能：批量并行渲染
• 📚 开箱即用：完整模板和详细文档

支持的主题

🤖 AI 助手集成

与以下 AI 编码环境无缝集成：

• Claude Code
• Cursor
• Gemini CLI
• Antigravity
• OpenCode
• Codex
• qoder

🚀 安装

一键安装

npx skills add https://github.com/imxv/pretty-mermaid-skills --skill pretty-mermaid

验证安装

cd Pretty-mermaid
node scripts/themes.mjs

注意：依赖项将在首次运行时自动安装。只需确保 Node.js 可用即可。

📖 快速开始

列出可用主题

node scripts/themes.mjs

渲染单个图表

node scripts/render.mjs \
    --input diagram.mmd \
    --output output.svg \
    --theme tokyo-night

批量渲染

node scripts/batch.mjs \
    --input-dir ./diagrams \
    --output-dir ./output \
    --theme dracula

📂 示例

查看 assets/example_diagrams/ 中的 5 个模板文件：

• flowchart.mmd - 流程图
• sequence.mmd - 时序图
• state.mmd - 状态图
• class.mmd - 类图
• er.mmd - ER 图

📚 文档

详细使用指南请参阅 SKILL.md。

⚙️ 环境要求

• Node.js 14+

📄 许可证

MIT License

Star 历史

Star 历史图 (https://www.star-history.com/#imxv/Pretty-mermaid-skills&type=timeline&legend=top-left)

🙏 致谢

基于 beautiful-mermaid (https://github.com/lukilabs/beautiful-mermaid)