mcpField
G
graph

graph

github.com/artemnovitckii创意与媒体73090 次安装2 周前更新
代码仓库

关于 graph

用于 Claude Code 的技能，可根据用户提供的数值绘制折线图动画视频。它通过 JSON 规格设置数据和显示选项，并支持生成 PNG 快照以快速检查画面。

主要功能

  1. 01折线图动画渲染
  2. 02使用用户提供的数据点
  3. 03自定义轴标签与数字格式
  4. 04深色显示选项
  5. 05PNG 快照检查

适用场景

  1. 01将给定时间序列制作成视频
  2. 02展示指标随时间变化
  3. 03视频渲染前检查图表画面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/artemnovitckii/claude-animation-skills --skill graph

安装后在 Claude Code 中输入/graph确认已加载。

附带文件build.pytemplate.html

详细介绍

/graph

┌──────────────────────┐
│ Followers            │  plain label
│ 100,000              │  counts up with the tip of the line
│                  •   │
│                 /    │  smooth line draws itself
│            ___/      │
│ ______----           │
│ Jan Feb ... Sep      │
└──────────────────────┘

首次使用

Claude Code 加载此技能时显示的“Base directory”就是此技能的文件夹。

SKILL_DIR="<base directory of this skill>"
KIT=$(python3 -c 'import os,sys;print(os.path.realpath(os.path.join(sys.argv[1],"..","..","kit")))' "$SKILL_DIR")
[ -s "$KIT/vendor/gsap.min.js" ] || bash "$KIT/setup.sh"

需要 ffmpeg 和 Node。

步骤

  1. 数据。 从用户（或其截图）获取真实数据。每个点对应一个值，按时间从早到晚排列。绝不编造数据；如果用户只给出起点和终点，就询问中间各点的数据，或者说明曲线仅供说明。
  2. 规范。 在用户的文件夹中编写 <name>.graph.json（见下文）。
  3. 构建。 运行 python3 "$SKILL_DIR/build.py" <spec.json>。大约需要 10 秒。添加 --snap 3.5，即可生成快速 PNG，而不是视频。
  4. 检查 <name>.graph.sheet.jpg：确保数字能在一行内显示，且最后一帧显示最终值。
  5. 交付 mp4 路径。

规范

{
  "label": "Followers",
  "values": [1.2, 2.1, 3.4, 5, 9, 24, 51, 78, 100],
  "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
  "final": 100000,
  "prefix": "", "suffix": "", "decimals": 0,
  "dark": false
}
  • values：2 个或更多数字，且不小于 0。最大值会触及顶部网格线。
  • labels（可选）：每个值对应一个标签，显示在坐标轴下方。超过 12 个时，每隔一个显示。
  • final（可选）：计数最终到达的数字。计数值为提示标记下方的值乘以 final / last value，因此可以用千为单位填写 values，并在 final 中填写完整数值。不填写时，计数使用 values 的单位。
  • prefix、suffix、decimals：例如 "$"、"%"、" kg" 等。数字过长时会自动缩小。
  • dark：黑底白线。
  • hold（可选）：最后一帧额外停留的秒数。out（可选）：输出路径。

风格

  • 一个数字，一行。标签使用普通名词（“关注者”“月收入”），而不是口号。
  • 图表上不要添加标注、“增长 83 倍”徽章或营销用语。
  • 后期增长（先慢后陡）的数值能形成最佳曲线，但要呈现真实走势。

评论

支持 Markdown