메뉴
用 SVG 生成精美的架构图、流程图、时序图、层级图、对比图等结构化图表。直接输出 ```html 代码块（内含 SVG），前端在沙箱 iframe 中渲染。效果比 Mermaid 更美观、布局更灵活。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
生成可交互的 HTML 可视化组件 — 算法动画、数据图表、概念演示、交互式教程等。当用户需要交互式演示、动画解释、数据探索、UI 原型等场景时触发，直接输出 html 代码块，前端会在安全沙箱中渲染为可交互组件。
生成精美的纯 HTML+CSS 信息图 — 时间线、流程、对比分析、SWOT、金字塔、漏斗、数据卡片、组织架构等。无需外部依赖，在沙箱 iframe 中渲染。适合将结构化信息以海报级视觉效果呈现。
用 Mermaid 语法生成可视化图表 — 流程图、架构图、序列图、ER 图、甘特图、状态图、思维导图、饼图等结构化图表。当用户要求画图/画架构图/画流程图等结构化可视化需求时触发，直接输出 mermaid 代码块，前端会自动转换为 HTML 并在沙箱 iframe 中渲染。
复盘当前对话——回顾任务过程、总结经验教训、主动沉淀可复用的 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 | svg-diagram |
| description | 用 SVG 生成精美的架构图、流程图、时序图、层级图、对比图等结构化图表。直接输出 ```html 代码块（内含 SVG），前端在沙箱 iframe 中渲染。效果比 Mermaid 更美观、布局更灵活。 |
| trigger | 用户要求画流程图、架构图、序列图、系统架构、技术架构、层级图、部署图、拓扑图、数据流、状态机、对比图、关系图、组织结构图、路线图、思维导图，或任何结构化的图表/可视化需求 |
| do-not-trigger | 用户要求生成照片、插画、艺术画、海报、UI 设计图、Logo（用 generate_image）；用户要求做数据统计海报（用 infographic）；用户要求做交互/动画/按钮操作的组件（用 html-widget）；用户要求数据图表如折线图/柱状图/饼图（用 html-widget + Chart.js） |
| user-invocable | true |
| disable-auto-invoke | true |
| argument-hint | <图表描述> |
| tags | ["图表","diagram","流程图","架构图","可视化","visualization","SVG"] |
你现在帮用户生成 精美的 SVG 图表。直接在回复中输出 ```html 代码块（内含 SVG），前端会在安全沙箱 iframe 中自动渲染。
```html 代码块，不要用 ```mermaid<style> → <svg><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 720 H" font-family="system-ui, -apple-system, sans-serif">
每张图从以下色组中选 2-3 组搭配，灰色组做中性元素：
| 色组 | 浅底色 (fill) | 边框色 (stroke) | 强调色 | 深色 (文字) |
|---|---|---|---|---|
| 靛蓝 | #EBF0FF | #B4C6FC | #6B7FF5 | #2D3A8C |
| 翠绿 | #E8FAF0 | #8FE8BE | #2EBD7F | #145A3A |
| 琥珀 | #FFF8E6 | #F5D97E | #E6A817 | #7A5200 |
| 灰调 | #F5F6F8 | #D4D8E0 | #8B93A1 | #2E3440 |
| 玫红 | #FFF0F1 | #F5B3BA | #E8556D | #8C1B30 |
| 天蓝 | #EDF7FF | #9DD4F5 | #3AA8E0 | #134B73 |
用色规则：
#000，不用渐变/阴影/发光文字：
形状：
箭头标记（需要时定义一次）：
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M1 1.5L7.5 5L1 8.5" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
节点用圆角矩形，决策点用菱形或双线框。连线用直线 + 箭头。
<!-- 节点示例 -->
<rect x="280" y="20" width="160" height="44" rx="10" fill="#EBF0FF" stroke="#B4C6FC"/>
<text x="360" y="47" text-anchor="middle" font-size="13" font-weight="500" fill="#2D3A8C">开始处理</text>
<!-- 连线示例 -->
<line x1="360" y1="64" x2="360" y2="100" stroke="#D4D8E0" stroke-width="1.5" marker-end="url(#arrow)"/>
布局规则：每行最多 4 个节点，行间距 70-80px。
水平分层带，每层全宽圆角矩形，层内放子节点。
<!-- 层容器 -->
<rect x="20" y="20" width="680" height="120" rx="12" fill="#EBF0FF" stroke="#B4C6FC" stroke-dasharray="none"/>
<text x="40" y="48" font-size="11" font-weight="400" fill="#6B7FF5">用户接入层</text>
<!-- 层内节点 -->
<rect x="60" y="58" width="130" height="60" rx="10" fill="#FFFFFF" stroke="#B4C6FC"/>
<text x="125" y="93" text-anchor="middle" font-size="13" font-weight="500" fill="#2D3A8C">Web 客户端</text>
布局规则：层从上到下排列，层间距 16px，最上层是用户侧，最下层是基础设施。不同层用不同色组。
水平主轴 + 事件节点交错上下排列。
<!-- 主轴 -->
<line x1="40" y1="140" x2="680" y2="140" stroke="#D4D8E0" stroke-width="2"/>
<!-- 事件点 -->
<circle cx="140" cy="140" r="6" fill="#6B7FF5" stroke="#FFFFFF" stroke-width="2"/>
<text x="140" y="120" text-anchor="middle" font-size="13" font-weight="500" fill="#2D3A8C">v1.0 发布</text>
<text x="140" y="165" text-anchor="middle" font-size="11" fill="#8B93A1">2024.03</text>
布局规则：事件标签奇数在上、偶数在下，防止重叠。
根节点居上居中，子节点向下展开，用竖线连接。
布局规则：同层节点等间距分布，父→子用垂直线 + 水平线连接（L 形或 T 形）。
3-5 个节点环形排列，曲线箭头连接。
<path d="M x1 y1 Q cx cy x2 y2" fill="none" stroke="#D4D8E0" stroke-width="1.5" marker-end="url(#arrow)"/>
左右两栏或 2×2 矩阵，十字轴线分隔，每个象限不同底色。
节点自由布局，连线表达关系，用不同颜色或虚线/实线区分关系类型。
输出前自检：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 720 340" font-family="system-ui, -apple-system, sans-serif">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M1 1.5L7.5 5L1 8.5" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- 接入层 -->
<rect x="20" y="16" width="680" height="80" rx="12" fill="#EDF7FF" stroke="#9DD4F5"/>
<text x="40" y="38" font-size="11" fill="#3AA8E0" font-weight="400">接入层</text>
<rect x="60" y="46" width="140" height="38" rx="10" fill="#fff" stroke="#9DD4F5"/>
<text x="130" y="70" text-anchor="middle" font-size="13" font-weight="500" fill="#134B73">Web 应用</text>
<rect x="220" y="46" width="140" height="38" rx="10" fill="#fff" stroke="#9DD4F5"/>
<text x="290" y="70" text-anchor="middle" font-size="13" font-weight="500" fill="#134B73">移动端</text>
<rect x="380" y="46" width="140" height="38" rx="10" fill="#fff" stroke="#9DD4F5"/>
<text x="450" y="70" text-anchor="middle" font-size="13" font-weight="500" fill="#134B73">API 网关</text>
<!-- 连线 -->
<line x1="360" y1="96" x2="360" y2="126" stroke="#D4D8E0" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- 服务层 -->
<rect x="20" y="126" width="680" height="80" rx="12" fill="#EBF0FF" stroke="#B4C6FC"/>
<text x="40" y="148" font-size="11" fill="#6B7FF5" font-weight="400">服务层</text>
<rect x="80" y="156" width="120" height="38" rx="10" fill="#fff" stroke="#B4C6FC"/>
<text x="140" y="180" text-anchor="middle" font-size="13" font-weight="500" fill="#2D3A8C">用户服务</text>
<rect x="220" y="156" width="120" height="38" rx="10" fill="#fff" stroke="#B4C6FC"/>
<text x="280" y="180" text-anchor="middle" font-size="13" font-weight="500" fill="#2D3A8C">订单服务</text>
<rect x="360" y="156" width="120" height="38" rx="10" fill="#fff" stroke="#B4C6FC"/>
<text x="420" y="180" text-anchor="middle" font-size="13" font-weight="500" fill="#2D3A8C">消息服务</text>
<rect x="500" y="156" width="120" height="38" rx="10" fill="#fff" stroke="#B4C6FC"/>
<text x="560" y="180" text-anchor="middle" font-size="13" font-weight="500" fill="#2D3A8C">推荐服务</text>
<!-- 连线 -->
<line x1="360" y1="206" x2="360" y2="236" stroke="#D4D8E0" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- 数据层 -->
<rect x="20" y="236" width="680" height="80" rx="12" fill="#E8FAF0" stroke="#8FE8BE"/>
<text x="40" y="258" font-size="11" fill="#2EBD7F" font-weight="400">数据层</text>
<rect x="120" y="266" width="130" height="38" rx="10" fill="#fff" stroke="#8FE8BE"/>
<text x="185" y="290" text-anchor="middle" font-size="13" font-weight="500" fill="#145A3A">PostgreSQL</text>
<rect x="290" y="266" width="130" height="38" rx="10" fill="#fff" stroke="#8FE8BE"/>
<text x="355" y="290" text-anchor="middle" font-size="13" font-weight="500" fill="#145A3A">Redis</text>
<rect x="460" y="266" width="130" height="38" rx="10" fill="#fff" stroke="#8FE8BE"/>
<text x="525" y="290" text-anchor="middle" font-size="13" font-weight="500" fill="#145A3A">Kafka</text>
</svg>