SuperAPI AI 工具集

visualize

通用与其它

查看项目

更新于 10-16 03:39

技能介绍

用途:为数据、概念、关系或流程图生成可视化,强调“在真正被阅读的载体上呈现”,输出为可直接落地的单文件 HTML 或 Markdown。

三种引擎:Markdown(.md 文件或内嵌 mermaid.js 的 .html,适合 PR、README、工单、Notion、Slack、wiki);Vega(声明式 JSON 规格,放在独立 HTML 外壳中渲染,适合标准静态浏览器图表,简洁可审计);D3(命令式 JavaScript,可完全控制 DOM,支持键盘导航与无障碍标注,适合自定义交互或仅有 D3 能表达的图,如桑基图)。每个浏览器输出都是单一自包含 HTML 文件,无需服务器,除 CDN 外无依赖。

主要能力:内置模板库,含 25 个 Vega 规格、26 个 D3 模板、9 个 Markdown 模板,覆盖对比、构成、分布、地理、层级、网络、流程/时序、关系、时序等图表类别;含无障碍底线(数据表回退、SVG title/desc、冗余编码)。

使用方式:按“思考→研究→构建→验证→呈现→保存”六阶段流程执行,实现偏轻、研究偏重;构建前先确定主张、受众与编码方案;验证阶段需两遍不渲染的检查(源码结构回读与渲染推断)相互一致;最终 HTML 保存到 ${CLAUDE_PROJECT_DIR}/.claude/visualizations/viz-<timestamp>.html,可选通过 CLI 注册。可选加速脚本(非门禁):python3 scripts/check_render.py <path> [<path> ...]。

引擎选择无默认值,按顺序判断:内容类型(流程/时序→Markdown)、渲染载体(仅 Markdown 载体→Markdown)、能力需求(如桑基图→D3)、交互需求(悬停/筛选/缩放→D3)、简洁性(标准静态浏览器图表→Vega);交互需求不明确时应询问用户而非默默套用。

限制与原则:柱状图必须从零基线开始;避免彩虹色图、二维数据的 3D 图、超过 5 片饼图、双 Y 轴、以颜色作为唯一区分(约 8% 男性有红绿色觉缺陷);使用 OpenColors 调色板并满足 WCAG AA 对比度;日期分面、面积用 sqrt 缩放等均属既定规范。收费、价格与可用平台等资料中未提供。