Visual Explainer 是一个生成自包含 HTML 文件的技能，用于技术图表、可视化和数据表格。其核心原则是：始终在浏览器中打开结果，加载该技能后不再回退到 ASCII 艺术。
用途 该技能适用于需要以可视化方式解释系统、代码变更、方案和数据的场景。当用户要求图表、架构图，或需要呈现表格数据时使用。它还支持主动渲染：当准备在终端中以 ASCII 框线表格展示表格数据（对比、审计、功能矩阵、状态报告等结构化行列）时，若表格有 4 行以上或 3 列以上，应自动生成 HTML 页面并告知用户文件路径，同时可在聊天中保留简要文字摘要。
主要能力 支持多种图表类型，并针对每种类型给出渲染方式：
- 架构/系统图：文本密集时用 CSS Grid 卡片加流程箭头；拓扑为主时用 Mermaid。
- 流程图/管道：用 Mermaid，支持自动节点定位与边路由，可用 handDrawn 手绘风格。
- 时序图：用 Mermaid，支持生命线、消息、激活框、注释和循环。
- 数据流图：用 Mermaid，支持边标签描述数据。
- ER/模式图：用 Mermaid 的 erDiagram 语法。
- 状态机/决策树：用 stateDiagram-v2 或 flowchart LR（当标签含特殊字符时）。
- 思维导图：用 Mermaid 的 mindmap 语法。
- 数据表/对比/审计：用真实 <table> 元素，支持粘性表头、斑马纹、响应式滚动、状态指示器等。
- 时间线/路线图：CSS 中央线加卡片。
- 仪表盘/指标概览：CSS Grid 加 Chart.js，支持 KPI 卡片与趋势指示。
使用方式 工作流分为四步：
- 思考方向：确定受众、图表类型和美学风格（如单色终端、编辑风、蓝图、霓虹仪表盘、纸墨、手绘、IDE 风格、数据密集、渐变网格等），并每次变化选择。
- 结构：生成前阅读参考模板（architecture.html、mermaid-flowchart.html、data-table.html）和参考文件（css-patterns.md、responsive-nav.md、libraries.md）。Mermaid 始终使用 theme: 'base' 配合自定义 themeVariables，并为每个 .mermaid-wrap 容器添加缩放控件。可选使用 surf-cli 通过 Gemini 生成插图并 base64 嵌入。
- 样式：强调排版、色彩、表面层次、背景氛围、视觉权重、动画等原则，使用 CSS 自定义属性定义调色板，支持明暗主题。
- 交付：输出到 ~/.agent/diagrams/，使用描述性文件名，在 macOS 用 open、Linux 用 xdg-open 打开，并告知用户路径。
适用场景 适用于开发者理解系统、PM 查看全局、团队评审方案等场景。适合需要架构图、流程图、时序图、数据表、时间线、仪表盘等可视化输出的任务。
限制 每个图表为单个自包含 .html 文件，除 CDN 链接（字体、可选库）外无外部资源。Mermaid 的 stateDiagram-v2 标签解析严格，含冒号、括号、<br/>、HTML 实体等特殊字符会导致静默解析失败，此时应改用 flowchart LR。AI 生成插图为可选，若 surf 不可用则跳过且不报错。输出目录 ~/.agent/diagrams/ 跨会话持久。