可视化图表生成技能

定位

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

输出形式：生成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），不可依赖第三方服务