---
name: inline-visualization
description: 当回答涉及流程、架构、机制、因果、对比、时间线、状态机、层级关系，或用户明确要求画图 / 图解 / 示意图时使用。把内容画成对话内直接渲染的图（自包含 HTML/SVG），而不是用文字罗列。不承接数值图表（折线/柱状/饼图，当前无图表库）、海报、头像、写实插画、地图。
---

# 对话内联可视化

把适合图示的内容画成**在对话里直接渲染出来的图**，而不是让用户读一长串文字或自己想象。

## 输出格式（唯一的硬约定）

先给一句结论，然后输出一个把语言标成 `html`、并把 `type="renderer"` 写进围栏信息的代码块：

````
结论：读路径是 请求 → 校验 → 缓存 → 落库。

```html type="renderer"
<svg viewBox="0 0 600 160" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>
```
````

**只有带 `type="renderer"` 的围栏会被渲染成图。** 不加这个标记就是普通代码块，用户看到的是源码。反过来，如果你确实想让用户看到源码，就不要加这个标记。

## 不使用本 skill

- 简短事实、确认、翻译、闲聊 —— 文字足够清楚时不要画图
- **数值图表**（折线 / 柱状 / 饼图 / 散点）：当前没有图表库，画不了；这类内容用表格或文字
- 海报、头像、写实插画、艺术创作
- 地图、地理轨迹

## 硬规则

**静态优先。** 图里不要写脚本，也不要做动画。当前渲染环境**不执行脚本**，写了不仅无效，还可能让整块渲染失败。

**必须自包含。** 不允许任何外部资源：
- 不要 `<script src="...">`、不要 CDN
- 不要外部图片 / 字体（`<img src="https://...">`、`url(https://...)` 会被剥掉）
- 需要图片时用内联 SVG 画，或用 CSS 渐变 / 形状

**不依赖交互。** 核心结论必须在**初始静态状态**下就看得懂 —— 不要设计成「悬停才显示详情」或「点击展开」。

**数据可复核。** 真实数字、名称、术语只来自用户材料或工具结果。**示例数据要显式标注**（例如标题里写「示意」）。

**一个图只讲一件事。** 默认只输出一个图块。确实需要第二个时才加，最多两块。

**失败可降级。** 结构或事实不足以可靠绘制时，改用文字或表格，不要硬画一张含糊的图 —— 一张错误的图比没有图更糟。

## 怎么画

优先用 **SVG** 画结构（流程图、架构图、时间线、状态机、层级树），用 **HTML + CSS** 画卡片式版面（对比、清单、要点归纳）。

布局要点：

- SVG 一定要写 `viewBox`，宽度交给外层自适应；`width="100%"` 但**不要写死 `height`**
- 文字用 `font-family="inherit"` 或直接继承，不要指定具体字体名
- 留出内边距，不要让元素贴着边框
- 连线用 `stroke`，不要用 `border` 拼

避免这些常见问题：

- 文字溢出容器（估算文本宽度时留足余量；中文按 1 字 ≈ 1 em 估）
- 深色模式下看不清（**不要写死颜色**，见下）
- 元素重叠、连线穿过文字

## 颜色与主题

**不要写死颜色值**（如 `#333` / `white`），否则切到另一个主题就看不见了。用 CSS 变量，它们会自动跟随浅色 / 深色：

| 用途 | 变量 |
| --- | --- |
| 正文 | `var(--text)` |
| 次要文字 | `var(--muted)` / `var(--muted-2)` |
| 边框、分隔线 | `var(--border)` / `var(--border-strong)` |
| 面（卡片背景） | `var(--surface-1)` / `var(--surface-2)` / `var(--surface-3)` |
| 强调 | `var(--accent)` / `var(--accent-soft)` |
| 语义色 | `var(--info)` / `var(--success)` / `var(--warning)` / `var(--danger)` |

字号遵循应用的阶梯，只用这几档：**10 / 11 / 12 / 13 / 14 / 16 / 18px**。正文用 14px，标题 16 或 18px，标注 11 或 12px。

圆角用 `var(--radius-sm)`（3px）/ `var(--radius-md)`（5px）/ `var(--radius-lg)`（9px）。

## 自检清单（输出前过一遍）

- 这张图是否真的比文字更好懂？如果只是把文字换个排列，就别画
- 是否所有颜色都用了变量、没有写死？
- 是否完全没有脚本和外部资源？
- 初始状态（不悬停、不点击）能否看懂？
- 窄屏下会不会溢出、文字会不会被裁？
- 示例数据是否标注了「示意」？