mcpField
G
graph

graph

github.com/artemnovitckiiクリエイティブ・メディア75590 回インストール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 がこのスキルの読み込み時に表示する「ベースディレクトリ」です。

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. 数値。 ユーザー（またはそのスクリーンショット）から実際の数値を取得します。各ポイントに値を1つずつ、古い順に指定します。データを捏造してはいけません。開始値と終了値しか提示されていない場合は、間のポイントを尋ねるか、曲線はイメージであることを伝えます。
  2. 仕様。 ユーザーのフォルダーに、以下の <name>.graph.json を作成します。
  3. ビルド。 python3 "$SKILL_DIR/build.py" <spec.json> を実行します。所要時間は約10秒です。動画の代わりに簡易 PNG を作成するには、--snap 3.5 を追加します。
  4. 確認。 <name>.graph.sheet.jpg を確認します。数値が1行に収まり、最後のフレームに最終値が表示されていることを確認します。
  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：0以上の数値を2つ以上指定します。最大値が上部のグリッド線に達します。
  • labels（任意）：値ごとに1つ指定し、軸の下に表示します。12個を超えると、1つおきに表示されます。
  • final（任意）：カウントが到達する数値です。カウントは先端の下に表示される値に final / last value を掛けた値になるため、values は千単位で指定し、final は完全な値で指定できます。省略すると、values の単位でカウントします。
  • prefix、suffix、decimals："$"、"%"、" kg" などを指定します。数値が長くなると、自動的に縮小されます。
  • dark：黒地に白い線を表示します。
  • hold（任意）：最後のフレームを表示する時間を秒単位で延長します。out（任意）：出力パスです。

デザインの指針

  • 数値は1つ、線は1本にします。ラベルには「Followers」「Monthly revenue」のような簡潔な名詞を使い、スローガンは使いません。
  • グラフに吹き出し、「83x growth」のチップ、マーケティング用語を加えないでください。
  • 後半に増加する値（前半は緩やかで、後半は急増する値）が最も良い曲線になりますが、実際の形状を示してください。

コメント

Markdown 対応