菜单
用 Mermaid 语法生成可视化图表 — 流程图、架构图、序列图、ER 图、甘特图、状态图、思维导图、饼图等结构化图表。当用户要求画图/画架构图/画流程图等结构化可视化需求时触发，直接输出 mermaid 代码块，前端会自动转换为 HTML 并在沙箱 iframe 中渲染。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
生成可交互的 HTML 可视化组件 — 算法动画、数据图表、概念演示、交互式教程等。当用户需要交互式演示、动画解释、数据探索、UI 原型等场景时触发，直接输出 html 代码块，前端会在安全沙箱中渲染为可交互组件。
生成精美的纯 HTML+CSS 信息图 — 时间线、流程、对比分析、SWOT、金字塔、漏斗、数据卡片、组织架构等。无需外部依赖，在沙箱 iframe 中渲染。适合将结构化信息以海报级视觉效果呈现。
用 SVG 生成精美的架构图、流程图、时序图、层级图、对比图等结构化图表。直接输出 ```html 代码块（内含 SVG），前端在沙箱 iframe 中渲染。效果比 Mermaid 更美观、布局更灵活。
复盘当前对话——回顾任务过程、总结经验教训、主动沉淀可复用的 skill。当用户要求"复盘"、"反思"、"总结一下刚才"、"有什么值得记住的"时使用。
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
| name | mermaid-diagram |
| description | 用 Mermaid 语法生成可视化图表 — 流程图、架构图、序列图、ER 图、甘特图、状态图、思维导图、饼图等结构化图表。当用户要求画图/画架构图/画流程图等结构化可视化需求时触发，直接输出 mermaid 代码块，前端会自动转换为 HTML 并在沙箱 iframe 中渲染。 |
| trigger | 用户明确要求用 mermaid 语法画图，或需要 ER 图、甘特图、Git 分支图、类图等 mermaid 专长的技术图表 |
| do-not-trigger | 用户要求画流程图、架构图、时间线、层级图、对比图等通用图表（优先用 svg-diagram）；用户要求生成照片、插画、艺术画、海报、UI 设计图、Logo；用户明确要求用 generate_image 生图 |
| user-invocable | true |
| disable-auto-invoke | true |
| argument-hint | <图表描述> |
| tags | ["图表","diagram","流程图","架构图","mermaid","可视化","visualization"] |
你现在帮用户生成 Mermaid 图表。直接在回复中输出 ```mermaid 代码块，前端会自动将其转换为 HTML 并在沙箱 iframe 中通过 Mermaid CDN 渲染为 SVG 图表。
不要调用 generate_image 工具，Mermaid 代码块就是最终输出。
根据用户需求选择最合适的类型：
| 需求 | Mermaid 语法 |
|---|---|
| 流程图/决策树 | flowchart TD 或 flowchart LR |
| 序列图/时序图 | sequenceDiagram |
| 类图/数据模型 | classDiagram |
| 状态图/状态机 | stateDiagram-v2 |
| ER 图/数据库设计 | erDiagram |
| 甘特图/项目排期 | gantt |
| 饼图/占比 | pie |
| 思维导图 | mindmap |
| 时间线 | timeline |
| Git 分支图 | gitGraph |
| 四象限图 | quadrantChart |
| 块图/架构布局 | block-beta |
```mermaid 块只放一张图TD（上→下）LR（左→右）A[文字]（方框）B{条件?}（菱形）C([文字])（圆角）D[(数据库)]（圆柱）对于系统架构图，推荐用 flowchart TD + subgraph 分层：
flowchart TD
subgraph 前端
A[Web App] --> B[Mobile App]
end
subgraph 后端
C[API Gateway] --> D[业务服务]
D --> E[数据库]
end
前端 --> 后端
", ', (, ) 等）出现在节点文字中，会导致语法错误