| 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
- 不要调用 generate_image 或 write_file 工具
- 只输出 HTML 片段（不含 DOCTYPE/html/head/body），格式：
<style> → <svg>
- 先输出图表，再做文字解释（如有必要）
SVG 画布规范
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 720 H" font-family="system-ui, -apple-system, sans-serif">
- 画布宽度固定 720，高度 H 按内容计算（最低元素 y + height + 40）
- 所有元素在 x=20..700 范围内
- 背景：浅色/白色，与阿布界面一致
阿布配色体系
每张图从以下色组中选 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 |
用色规则：
- 节点：浅底色填充 + 边框色描边（stroke-width: 1）
- 标题文字：深色
- 副标题/说明文字：强调色
- 连线/箭头：灰调边框色，stroke-width: 1.5
- 不用纯黑
#000，不用渐变/阴影/发光
排版规范
文字：
