動く図

動く図は、解説の中に置く 1 枚の図を、場面ごとに動かして見せるものです。文字だけでは伝わりにくい「データがどこからどこへ渡るか」「誰が待っていて、いつ空くか」を、箱と矢印の上でデータの粒が動く形で見せます。

見方と操作

• 図が画面に見えると自動で再生し、最後の場面で止まります。見えない間は止まっています
• 下の操作で、再生・一時停止・1 場面ずつ進む・戻る・場面の棒から好きな場面へ飛ぶ
• 場面ごとに、語り（説明の文）・強調（ほかの箱は薄くなる）・矢印に沿って進むデータの粒・箱の値の書き換え・寄り（その場面だけ一部を大きく）が変わります
• 箱や場面に付いたコードの札を押すと、左のコードがその場所へ移ります。指している所のコードが変わっていれば、札に「古い」の印が付きます
• OS の「視差効果を減らす」を入れていると、粒は止めて矢印の中ほどに置き、寄りと動きを消して場面の切り替えだけにします

どこに出るか

場所	入れ方
ツアーの歩・データの旅の段・視点の節	その項目の figure に図の ID を書く
ノートの本文・語り・節の本文（Markdown）	言語が figure のコードの塊に図の ID を 1 行書く。下の詳しい説明の段にも出ます

止まった構成図・型の関係・時間の順番は Mermaid（Markdown のプレビュー）、データや要求が動くものは動く図、と使い分けます。

誰がどう書くか

図を書くのは AI ですが、AI が書くのはデータだけ（箱・矢印・群れ・場面）です。描き方と動かし方はアプリが決めます。図は .proglens/figures/<ID>.yaml に置かれます（proglens.yaml と .proglens/）。

AI は 7 つの型から骨組みをもらって書き換えます。

型	向いているもの
要求と応答	画面とサーバーの 1 回のやり取り
データの変形	入力が形を変えながら進む流れ
状態	状態の切り替わり
部品の親子	部品の木
順番待ちとロック	同時に書く人の順番・ロック
繰り返し	何度も回る処理
段の流れ	段ごとに進むパイプライン

• 並べ方はアプリが矢印の向きから決めます（重なれば下へずらします）
• 1 枚の上限は、箱 40・矢印 80・群れ 12・場面 60。図を軽く保ち、滑らかに動かすためです
• 生の SVG・HTML・スクリプト・外部の URL は書けません。文はすべて文字として描きます
• 図に無い箱を指す矢印のような食い違いは、書き込みの時点で断ります。指した図が無ければ、その所に「まだありません」と出して残りを描きます

AI への頼み方は「この処理を動く図で説明して」のように頼むだけで、プラグインのスキルが型の選び方を AI に伝えます（Claude Code のプラグイン）。