back
loading skill details...
可视化图表生成技能,支持SVG/HTML/HTML+JS三种格式,包含完整设计规范,可保存为图片。触发词:画图表、生成图表、可视化、SVG、HTML图表、保存为图片、架构图、流程图、chart、meta-skill-system
---
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),不可依赖第三方服务
don't have the plugin yet? install it then click "run inline in claude" again.