1仕組みと動作原理
全編を通じた実行の主軸は「段階的開示（プログレッシブ・リビール）」：一度に1つの情報ビートのみを進め、開示順序を nodes → edges → labels に固定し、「フォーカス＋コンテキスト」（アクティブ要素は完全不透明、残りは約0.35まで減光）を組み合わせて閲覧者の混乱を防ぐ。
skills/diagram-animation/SKILL.md
Never show everything at once. Reveal in this order: **nodes → edges → labels**.
これは提案ではなく決定規則である：後続の各コードスニペット（ノードの scale-in、エッジの dashoffset、ラベルの fade）はすべてその実装に過ぎない。
線描画系のアニメーションは stroke-dashoffset メカニズムに統一し、pathLength="1" を使って幾何学的な長さを 0→1 の進捗値に正規化することで、同一の dash パラメータで任意の長さのエッジを制御可能にする。
skills/diagram-animation/SKILL.md
`pathLength="1"` lets one dash value drive any edge length.
正規化こそが、「エッジ／折れ線／ルート」という3種の描画を全く同一のコードで記述できる理由である。
チャートアニメーションには3つの最小実行可能実装を提供：ベースラインからの scaleY によるバー伸長、getTotalLength + transition による折れ線描画、rAF + easeOutCubic 補間および Intl.NumberFormat 桁区切りによる数値カウントアップ。
skills/diagram-animation/SKILL.md
| Count-up | interpolate value with eased `t` | `easeOutCubic` |
単一の Quick reference テーブルで各動作タイプを具体的なプロパティとイージングに紐付けており、これが美的判断を検証可能なパラメータへと落とし込む要となる。
納品物は階層別にトラック分け：自己完結型チャート = 単一ファイル HTML（インライン SVG + CDN ライブラリ + メインタイムライン用インライン script 1本）。ヘッドレススクリーンショットで確定的描画を捉えられるよう、ページは ?t=N による停止をサポート必須とする。
skills/diagram-animation/SKILL.md
if (t !== null) { tl.pause(); tl.seek(parseFloat(t)); }
停止機能は任意のデバッグ手段ではなく出力契約として定義されており、検証ループを成立させるための前提条件である。
検証ループ = start / mid / end の3時点でヘッドレススクリーンショットを撮影し、目視で2点を確認：忠実性（開示順序、接続先の終点、カウントアップが正確な値に着地しているか）と不具合アーティファクト（ラベルの途切れ、画面外ノード、フォントの FOUC、継ぎ目のカクつき）。
skills/diagram-animation/SKILL.md
count-ups land on the EXACT values
「数値がデータソースの値と厳密に一致しているか」を受入基準に含めることで、チャートアニメーションで最も頻発する歪みを的確に防ぐ。
reduced-motion は機能縮小アニメーションではなく最終状態ブランチを提供：ループ系アニメーションは即座に animation:none とし、合成済みの最終フレームを表示する。
skills/diagram-animation/SKILL.md
`prefers-reduced-motion` path shows the final composed diagram without looping motion.
類似ドキュメントでは「動きを減らす」とだけ曖昧に書かれがちだが、本作では「全ノード表示、エッジ描画完了、カウント完了値」と最終状態を明確に規定している。
2コア機能
01段階的なノード／エッジ／ラベルの開示（GSAP メインタイムライン + stagger + エッジ dashoffset 描画）
02流体コネクターライン：marching dash ループ + offset-path 移動ドット（Pure CSS、JS 不要）
03アニメーションチャート3点セット：バー伸長 / 折れ線描画 / 数値カウントアップ
04多彩な技術スタックでの実装選択肢：インライン SVG+GSAP/CSS、Framer Motion（React）、D3 transition、Mermaid/Excalidraw 出力図のアニメーション化、Remotion 動画エクスポート
05D3 データバインディングアニメーション（伸長およびカウントアップ用 transition / tween）
06Remotion フレーム駆動の決定的レンダリング（同一図面から毎レンダリングで同一の PNG 連番 / MP4 を出力）
07?t=N 停止ハーネス：GSAP / SMIL / CSS の3系統それぞれに対応した停止機構
08シーケンス図／アーキテクチャ図のレシピ：背景領域を先に敷き、次にノード、エッジ、ラベルの順で配置。メッセージを順次開示しつつ閲覧用の hold 時間を確保
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx / Playwright（无头截图） |
| cli | ffmpeg（contact-sheet.sh 拼图） |
| cli | npx -y playwright（仓库根 seek-shot.sh 内部） |
| network | jsDelivr CDN：gsap ESM（交付物在浏览器端加载） |
| package | 第三方动画/图表库：GSAP、Framer Motion、D3、anime、Remotion（自 CDN 或 npm 引入） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: npx playwright screenshot --wait-for-timeout=500 …（SKILL.md Verify loop 内のインラインコマンド）
- 网络端点: 外部ネットワークアクセスの宣言: スキル自体に業務 API 呼び出しはない。ネットワーク面はツールチェーンに起因する——npx が registry.npmjs.org から playwright パッケージを取得し、Chromium バイナリをダウンロードする
- 本地工作目录: ファイル I/O と成果物出力: frame-mid.png（SKILL.md 内のインラインスクリーンショット出力例）、frame-<t>.png（seek-shot.sh の出力）
監査ノート： 審査対象はスキルディレクトリ自体（skills/diagram-animation/：SKILL.md + references/ + 0バイトの README.md。ディレクトリ内にスクリプトや認証情報は存在せずディスク書き込みも行わない）。オレンジ評価の要因となったのは、本スキルが規定する検証ループと納品形態である：① SKILL.md の Verify loop に `npx playwright screenshot …` が直接記載されており、参照されているリポジトリ直下のヘルパー `scripts/seek-shot.sh` 内部でも `npx -y playwright screenshot` が実行される。npx は npm レジストリからパッケージを取得し初回実行時に Chromium バイナリをダウンロードするため、分類基準の「サードパーティのプラグイン・イメージ・リモートパッケージへの依存」に該当する（同作者の pack 先行例: logo-animation も同一理由でオレンジ判定）。② 納品物はブラウザ側で cdn.jsdelivr.net から gsap 等の ESM を取得する（成果物時点の参照であり、第4バッチ基準に基づき実行時の外部送信には算入せず明記のみ行う）。スキル自体は認証情報や env の読み取り、業務 API の呼び出し、情報収集、保護回避を行わないためレッドには該当せず、「認証情報読み取り」型のオレンジでもない。発火条件：実際に検証ループ（スクリーンショット／画像結合）を実行した場合にのみリモート取得が発生し、単に HTML を作成したりブラウザで手動確認するだけでは発生しない。
5二重目の独立検証
- [ok] 外部依赖调用点复核（npx playwright / ffmpeg / CDN） — SKILL.md Verify loop 内确有 `npx playwright screenshot --wait-for-timeout=500 "file://$PWD/diagram.html?t=1.2" frame-mid.png`；仓库根 scripts/seek-shot.sh 同为 npx playwright 截图、scripts/contact-sheet.sh 为 ffmpeg hstack；SKILL.md 顶部代码块确有 cdn.jsdelivr.net 的 gsap ESM import。三条均落地，非推测。
- [ok] 无凭证 / 无 env / 无业务 API 反查 — skill 两个文档与三个仓库脚本中无 API_KEY/token/secret/.env 读取、无 curl/wget、无 fetch 到业务端点；唯一远程动作是包管理器与 CDN 静态资源。判 orange 的依据只是「远程包/镜像」，不含凭据读取。
- [ok] 目录资产面清点 — skills/diagram-animation/ 下仅 SKILL.md（163 行）、references/ 一份 218 行 cookbook、0 字节 README.md；无 scripts/、无模板、无数据文件——「纯指令 + 内联代码片段」结论成立。
- [discrepancy] 跨引用可解析性 — SKILL.md 有两处引用落在本 skill 目录外：`scripts/seek-shot.sh`/`scripts/contact-sheet.sh` 位于仓库根（单装本 skill 目录会悬空，需装整个 repo）；`see remotion-video` 指向的 remotion-video 不在本 repo 的 5 个 skill 中（属同作者 motion-design-skills pack），同样悬空。同 repo 内的 whiteboard → explainer-video 引用可解析。
- [ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 SVG / Framer Motion / D3 / Remotion 四栈，正文 Build-tool choice 逐栈给出适用判据，reference 给出对应可运行实现（Framer Motion pathLength、D3 数据绑定、Remotion spring/interpolate）；无夸大，也未声称能自动出图或代跑渲染。
- [ok] 「确定性」主张的成立条件 — 成立范围有明确边界：GSAP/JS 主时间轴的 ?t 冻结与 Remotion 帧驱动路径可逐帧确定；而 CSS keyframes/transition 分支本身不可 seek，SKILL.md 明确要求「drive reveal order with `animationDelay`; freeze by pausing/seeking the equivalent JS timeline」并给出 prefers-reduced-motion 终态——主张非无条件承诺。
6結論
最適な用途： 既存の静的構造（アーキテクチャ図、フローチャート、シーケンス図、データチャート）をステップごとに開示する Web アニメーションや動画クリップに変換する用途に最適。「検証可能な確定的フレーム」（?t 停止 + 3フレームスクリーンショット）を納品基準とするチームに特に適しており、同一リポジトリの explainer-video（全体ナラティブ層）や whiteboard-animation（手描き層）と組み合わせて活用できる。
不向きな用途： 完全なストーリーテリングやナレーションを伴う長尺動画には不向き（explainer-video や動画系パックを推奨）。情報の構造化を伴わない純粋な装飾・演出目的のアニメーションには不向き（すべてのルールが可読性のために設計されているため）。時間軸を必要とせず静的な1枚の図表のみを求めるタスクにも不向き。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload diagram-animation.tar.gz
sha256:
Option B · Copy Guide for Agente196243bfb566372…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3e2d411b72.