# Visualise
> 在对话中直接渲染内联交互式可视化——SVG 图、HTML 组件、图表、讲解图。当用户要求画图、做图、画流程图、架构图、数据可视化、UI mockup，或说'画个图''show me''draw''map out''visualize''diagram'时触发；即使没明说，只要主题有空间/顺序/系统性关系、用图比文字更清楚，也应主动使用。
- Skill: `shyxin/visualise` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add shyxin/visualise`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shyxin/visualise/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: shyxin (https://skillmd.com/u/shyxin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/shyxin/visualise
---
# Inline Visualizer（内联可视化器）
在对话里直接渲染富可视化内容——SVG 图、HTML 交互组件、图表。输出以 token 流方式逐字注入一个沙箱化 iframe，观感像对话的自然延伸，而不是一个附件。
## 工作原理
你生成原始 HTML 或 SVG 片段。客户端把它们渲染进一个沙箱化 iframe，并注入设计系统的 CSS 变量。不要写 ``、``、`` 标签——只写内容片段。
**两种输出模式：**
- **SVG 模式**：输出以 `