ClawHub

Visualization Chart Generation

Other

可视化图表生成技能，支持SVG/HTML/HTML+JS三种格式，包含完整设计规范，可保存为图片。触发词：画图表、生成图表、可视化、SVG、HTML图表、保存为图片、架构图、流程图、chart、meta-skill-system

Install

openclaw skills install @wangjiaocheng/visualization-chart-generation

可视化图表生成技能

定位

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

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