# Doubao Visualization
> 当用户的需求依赖可视化展示、画图、图解、趋势图、关系图、交互/动态演示、动画讲解，或数据趋势占比排名、多指标对比、算法状态机、参数变化教学、结构化知识、几何构造证明需要图示时使用；地图、附件生成、纯文字足够场景不使用。
- Skill: `iwanalq/doubao-visualization` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add iwanalq/doubao-visualization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/iwanalq/doubao-visualization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: iwanalq (https://skillmd.com/u/iwanalq)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/iwanalq/doubao-visualization
---
# 豆包可视化回复
## 概述
本 Skill 用于当用户问题使用可视化回答有收益时，模型能回复安全、真实、可运行、移动端友好的 HTML renderer 可视化内容。核心原则是：只有命中可视化白名单才输出可视化；一旦命中，最终答案必须包含至少 1 个与任务主目标直接对应的 `html type="renderer"` 模块，并配套简短结论与数据口径说明。
完整规范拆分在 `references/` 下的 4 个文件中；生成可视化前必须按场景读取并遵守，不能遗漏触发、格式、设计、稳定性、ECharts、交互、几何、输出示例和移动端规则。
## 使用场景
使用本 Skill 当用户请求满足任一白名单条件：
1. **显式要求可视化**：提到可视化、画图、图解、关系图、走势图、趋势图、分布图、占比图、交互演示、动态演示、动画讲解、用图说明、直观一些、清晰看到、方便展示、方便学生理解等。
2. **数据图表显著增益**：涉及趋势、占比、排名、波动、相关性或多指标对比，如金融价格、空气质量、气候指标、传染病发病、市场份额、财务指标等。
3. **教学型动态概念**：参数变化会影响曲线、轨迹、分布或空间关系，如运动轨迹、天文地理变化、函数变换、物理过程、算法过程。
4. **步骤状态机**：算法逐步执行、状态迁移、流程推进，且用户目标是“看过程”。
5. **结构化知识展示**：人物关系、历史脉络、组织结构、因果链路、流程执行、时间轴、网络扩张、路径演化等，用图能明显提升理解。
6. **几何构造与证明题**：仅限可视化有显著增益的几何题。
不要使用本 Skill 当：
- 用户只是代码调试、工程实现、文案、总结改写、普通问答检索、静态信息罗列、通用知识解释、闲聊、安全拒答、单纯症状解释或健康建议，且文字或公式已足够清晰。
- 用户要生成、导出、修复 PDF/PPT/Word/Excel/图片/压缩包等附件产物；这类任务必须真实生成文件，不能用 HTML renderer 冒充最终文件。
- 用户请求地图、导航、路线、地点查找、地理轨迹、行政区划展示等地图/地理位置可视化；此类需求绝对禁止地图可视化，回退为纯文本、普通列表、非地图型流程图或取数方案。
## 核心流程
1. **判定是否触发**：先按白名单判断；未命中时只用 Markdown 回复，禁止为了美化强行输出 renderer。
2. **读取相关规则**：命中白名单后至少读取 `references/visualization-trigger-design.md`；涉及脚本、公式、ECharts、交互、几何或移动端输出时，继续读取对应 reference，按完整规则执行。
3. **核验事实与数据**：需要实时、权威或历史真实数据时，先用可用的搜索、链接访问或数据工具核验；取不到可靠数据时，不能编造数值，只能输出空态图、示例结构、可复用模板或下一步取数方案，并明确标注“未取得可靠数据，以下为示例结构”。
4. **选择表现形式**：优先纯 SVG/Canvas/JS；通用数据图表可用 ECharts 或 Chart.js；仅 2D 无法表达关键关系时才用 Three.js 等专用库；地图相关组件和库始终禁止。
5. **生成 renderer**：用 Markdown 文本与 `html type="renderer"` 代码块交替输出。命中白名单时必须包含：简短文字结论、至少 1 个可运行 renderer、关键数据口径/假设/来源说明。
6. **做稳定性自检**：检查 HTML 结构、内联样式、脚本 IIFE、try-catch、DOM 存在性、CDN 降级、无解析期错误、无死循环高度写法、无地图组件、无文本重叠或截断。
7. **做移动端自检**：使用响应式布局，禁止固定列数，交互元素不小于 `44×44px`，正文不低于 14px，图表轴标签不低于 12px，控件不覆盖核心内容。
## 输出形式
命中可视化白名单时，进行文本和可视化混合的方式进行详细回复，可视化模块稳定输出：
固定结构（交替输出）：
> 文字结论或上下文说明（说明数据口径、假设、来源）
```html type="renderer"
```
> 必要的解读、关键峰谷/拐点、最大最小项、下一步建议等
命中白名单的最终答案应该同时包含
1. 文字回复或结论；
2. 一个或多个与任务主目标直接对应的 HTML renderer 可视化；
3. 关键数据口径、假设或来源说明。
4. 其他详细的文本回复内容
单个 HTML 代码块 **≤ 300 行**，超出拆为多个模块。
强制规则：
- **必须直接在回复正文中使用 ` ```html type="renderer" ` 代码块输出可视化内容**，由消息渲染器就地渲染
- **禁止**使用 CanvasCreateFile 创建文件
- **禁止**使用任何文件生成工具输出可视化，注意，禁止使用 如CanvasCreateFile / CanvasStrReplace 等文件工具输出可视化
- 所有可视化均以 ` ```html type="renderer" ` 代码块直接嵌入回复正文中，不要在回复额外交付HTML产物
关键格式约束：
- 最外层必须使用 `` 与透明 `div` 包裹；禁止 ``、``、``。
- CSS 全部内联，禁止 `