Visualization Chart Generation

SKILL.md

---
name: visualization-chart-generation
author: 王教成 Wang Jiaocheng (波动几何)
description: 可视化图表生成技能，支持SVG/HTML/HTML+JS三种格式，包含完整设计规范，可保存为图片。触发词：画图表、生成图表、可视化、SVG、HTML图表、保存为图片、架构图、流程图、chart、meta-skill-system
---

# 可视化图表生成技能

## 定位

本技能提供从设计规范到图表输出的完整能力。

**输出形式**：生成SVG/HTML/HTML+JS代码文件，用户可通过浏览器打开查看，支持保存为图片。

## 核心能力

### 设计规范能力

内置完整的视觉设计规范，确保生成的图表风格统一、专业：

- **颜色系统**：9色系×7层级的完整调色板，支持亮色/暗色模式
- **字体系统**：标题/正文/辅助文字的大小、字重、行高规范
- **布局系统**：圆角、间距、安全区域、viewBox规范
- **组件系统**：预设样式类（box/node/arr/leader等）
- **图表类型指导**：流程图、结构图、说明图的绘制规范

### SVG生成能力

生成静态矢量图表，适合简单、高效的可视化需求：

- **静态图表**：架构图、关系图、对比图
- **流程图**：顺序过程、因果关系、决策树
- **结构图**：包含关系、物理/逻辑层次
- **说明图**：建立直觉、物理截面或抽象隐喻

### HTML生成能力

生成交互式网页图表，适合需要动态效果的需求：

- **交互式图表**：可点击、可展开、可筛选
- **动态内容**：动画效果、过渡效果
- **表单控件**：按钮、输入框、下拉菜单
- **复杂布局**：多列、卡片、网格

### HTML+JS复杂可视化能力

集成专业图表库，适合复杂数据可视化需求：

- **Chart.js集成**：柱状图、折线图、饼图、雷达图
- **D3.js集成**：力导向图、树状图、热力图
- **自定义JS**：任意复杂的交互逻辑

### 输出保存能力

支持多种输出格式，满足不同使用场景：

- **SVG文件**：矢量格式，无限缩放，适合设计软件编辑
- **HTML文件**：网页格式，可在浏览器打开查看
- **PNG图片**：通过HTML页面的"保存为图片"按钮导出

## 目录结构

```
visualization-chart-generation/
├── SKILL.md                    # 主技能文件
├── references/                 # 参考文档目录（.md文件）
│   ├── viz-catalog.md          # 设计规范清单 + 组件依赖拓扑
│   ├── viz-requirements.md     # 生成要求清单
│   ├── exemplars.md            # 范本库索引
│   └── exemplars/              # 范本库目录
│       ├── V0-需求分析域范本.md
│       ├── V1-设计规范域范本.md
│       ├── V2-SVG生成域范本.md
│       ├── V3-HTML生成域范本.md
│       ├── V4-复杂可视化域范本.md
│       └── V5-输出保存域范本.md
└── assets/                     # 资产目录（模板、图标、字体等）
    ├── flowchart-template.svg  # 流程图SVG模板
    ├── save-as-image-template.html  # 带保存按钮HTML模板
    └── chartjs-bar-template.html    # Chart.js柱状图模板
```

**分类原则**：
- `references/`：存放**参考文档**（.md），用于加载到上下文中指导思考
- `assets/`：存放**输出资产**（.svg/.html/.pptx等），用于最终输出，不需要加载到上下文

## 使用规则

### 执行流程

1. **首次加载**：读取 `references/viz-catalog.md`，获取设计规范和组件清单
2. **按需深入**：确认图表类型后，读取 `references/viz-requirements.md` 获取生成要求；如需范本，读取 `references/exemplars.md` 获取参考
3. **独立执行**：本技能不依赖外部工具，所有能力均已内嵌，可直接生成图表代码

### 格式选择规则

根据用户需求选择合适的输出格式：

| 需求场景 | 推荐格式 | 原因 |
|----------|----------|------|
| 静态图表 | SVG | 简单、高效、通用 |
| 交互功能 | HTML | 功能强大、体验好 |
| 复杂可视化 | HTML+JS | 支持Chart.js、D3.js等库 |
| 保存为图片 | SVG或HTML | 两者都可以，SVG更容易转换 |

### 输出规则

1. **文件输出**：生成的代码保存为 `.svg` 或 `.html` 文件
2. **浏览器查看**：用户可通过浏览器打开文件查看图表
3. **图片保存**：HTML文件可包含"保存为图片"按钮，方便导出PNG

## 执行框架

本技能内嵌了完整的图表生成执行框架。

**核心理念**：
- **规范驱动**：所有图表必须遵循设计规范
- **格式适配**：根据需求选择最合适的格式
- **用户友好**：输出文件可直接使用，无需额外处理

**统一执行流程**：收到任务后按4步执行——需求分析 → 格式选择 → 代码生成 → 文件输出。

### Step 0：需求分析

分析用户的可视化需求：
- 图表类型（流程图/结构图/说明图/数据图）
- 内容复杂度（简单/中等/复杂）
- 交互需求（静态/交互/动态）
- 保存需求（是否需要保存为图片）

### Step 1：格式选择

根据需求分析结果选择格式：
- **SVG**：静态图表、简单流程图、需要设计软件编辑
- **HTML**：交互式图表、动态效果、需要表单控件
- **HTML+JS**：复杂数据可视化、需要Chart.js/D3.js

### Step 2：代码生成

根据设计规范生成图表代码：
- 应用颜色系统（选择合适的色系和层级）
- 应用字体系统（标题/正文/辅助文字）
- 应用布局规则（圆角、间距、安全区域）
- 应用组件样式（预设类）

### Step 3：文件输出

将生成的代码保存为文件：
- SVG文件：`.svg` 扩展名
- HTML文件：`.html` 扩展名，可包含"保存为图片"按钮
- 告知用户文件位置和打开方式

## 事实纪律

1. 设计规范必须来自 `references/viz-catalog.md`，不可凭感觉
2. 生成的代码必须符合规范要求，不可随意修改样式
3. 文件输出必须使用标准格式，确保浏览器兼容性
4. 复杂可视化必须使用成熟的图表库（Chart.js/D3.js），不可自行实现复杂逻辑
5. 保存为图片功能必须使用标准API（Canvas/SVG），不可依赖第三方服务