画面に入場時に描画されるアニメーションダイアグラム
原則
1つのダイアグラムに1つのアイデアを、まず1文で記述します。描画は画面に入ったときに1度だけ、読み順に従って行われ、その後は静止します。インクがメッセージを伝え、グレーが残りの情報を伝え、ラベルは図の上に配置され、凡例はありません。「動きを減らす」設定が有効な場合、図は単に表示されます。
必須の背景知識: diagram-storytelling（1つのアイデアへの絞り込み、矢印上の動詞、ノード＝状態）。emil-design-eng（曲線と時間に関する知識）。
使用すべきでない場合
- データグラフ（曲線、数値付き棒グラフ）：データ可視化ツールを使用。
- 実時間での動作を示すためにループするアニメーション：アニメーションプロトタイプであり、ダイアグラムではありません。
- ツール内で1日に数十回表示されるダイアグラム：アニメーションは不要です。
手順
- 一文にする。 アイデアを一文で書き、インクで表現する主体を決めます（「3つのコンセプトを探求し、1つのプロトタイプが選ばれた」）。文に2つのアイデアがある場合は、2つのダイアグラムを作成します。
- 語彙（ファイル）。
reference/diagramMotion.tsとreference/DiagramParts.tsxをプロジェクトにコピーします（まだ存在しない場合）。Panel、Arrowhead、トーン、ヘルパーをローカルで再定義しないでください。 - 文言（データファイル）。 バイリンガル（
en/fr）のデータファイルを作成します。アクセシビリティ用のtitleとdesc、および各ラベルを含めます。ラベルは最大でも数単語にします。フランス語の場合：大文字にアクセントを付け、コロンの前には改行しないスペースを入れ、ダッシュは使用しません。 - ジオメトリ。
viewBox="0 0 960 H"（H は 300 から 400 の間）、座標は名前付き定数で定義、行の端のラベルのために左右に 60px のマージンを確保します（textAnchor="end"で x=54 のラベルは切れます）。Panelの最小幅は 720（スマートフォンでもスクロール可能にします）。 - 読む順序＝遅延の順序。 各要素には読み順に従ってミリ秒単位の遅延を設定します：最初に読むものは 0、ステップごとに +200〜300ms、同じシリーズ内の要素間は 40〜110ms。インクのメッセージは最後に表示します（1500〜2300ms）。描画の合計時間：2〜3秒。
- 検証。 localhost でページをレンダリングし、ダイアグラムを中央にスクロールし、3秒待って、パネルをキャプチャします（
reference/shoot-diagrams.cjsをNODE_PATH=<プロジェクト>/node_modulesで実行）。各キャプチャを確認：端で切れたラベル、白いブロックの下のラベル、隣り合って接触しているラベルがないか。修正して再キャプチャします。また、390px の幅でも確認します。
クイックリファレンス
| 要素 | ヘルパー | 値 |
|---|---|---|
| 線、矢印 | draw(shown, delay, duration) を pathLength={1} の path に適用 | 400〜900ms |
| 点線 | 描画不可：rise（フェードイン）を使用 | |
| ブロック、ラベル | rise(shown, delay)：8px 上昇 | 500ms |
| タイムバー | grow(shown, delay, duration)：左から伸長 | 500〜800ms |
| フレーム、レンズ | open(shown, delay)：0.96 から 1 に開く | 600ms |
| 矢印の先端 | <Arrowhead x y angle style={rise(...)}> を draw の直後に配置 | |
| トーン | INK #111827 メッセージ、LINE #D1D5DB 境界線、PALE #E5E7EB 背景、#6B7280 セカンダリラベル、#9CA3AF 除外されたもの | |
| テキスト | ノードタイトル 14px 太字、ラベル 11〜13px、10px 未満は不可 | |
| 曲線 | cubic-bezier(0.22, 1, 0.36, 1)（ヘルパーに既に含まれています） |
CSS 変換はすべてラッパーの <g> に適用し、SVG の transform 属性を持つ形状には直接適用しないでください（置き換わってしまいます）。
アイデアのタイプ別の形状
- 絞り込まれていくシーケンス：ノードを一列に配置し、枝分かれを扇状に広げ、1本だけをインクで、残りを
LINEで「除外」と表示します。 - 時間的リズム：上部に週の軸、アクターごとに1行、
growバー、重要な関係を示すインクの矢印を1本。 - 広がりから収束へ：時間の長さに比例したバーの上にレンズ（
openしてから輪郭をdraw）を配置します。 - 状態と遷移：ノード＝状態（探索中は点線、中間はグレー、確定したものはベタのインク）、矢印には動詞でラベルを付け、ノードと重ならないように行の上側に配置します。
- オブジェクトの部分分解：オブジェクトを左側に、点線で切断、矢印、部分をカードとして右側に、最初の部分をインクで。
各形状の完全な例：reference/exemple-TemplateDiagrams.tsx とその文言ファイル reference/exemple-templateDiagramsData.ts。
ダイアグラムのサムネイル（カード、リスト用）
同じコンポーネントをカード用に固定ビューでレンダリングできます。thumb はパネルとリビールを無効にし、viewBox は 520×400（13:10、カード画像と同じアスペクト比）のフレームになり、メッセージを中央に配置します。フレームはダイアグラムごとに FRAMES に定義し、350px 幅でキャプチャして検証します：描画内のテキストは 11px 以上で読みやすくなります。reference/exemple-TemplateDiagrams.tsx 内の Drawing と TemplateDiagramThumb を参照してください。
よくあるエラー
| エラー | 修正 |
|---|---|
| 「動きを出すために」ループ（回るドット、点滅する状態）を追加する | 描画そのものが動きです。ループは時間がダイアグラムの主題である場合のみ、1つだけ、描画後に useLoop を使用します。 |
| アクセントカラー、有効/無効を示す緑/赤 | インクとグレーのみ。判定は形状（実線、点線、除外）または単語で表現します。 |
| 図の横に凡例を配置 | 単語は図の上、それが示すものの近くに配置します。 |
| 矢印に移動先画面の名前でラベル付け | 遷移の動詞でラベル付けします（「承認済み」、「非採用」）。 |
| 60px 離れた2つのノードの中央にラベルを配置 | ラベルがノードにかぶります：行の上側に配置します。 |
| 効果のために遅延を選択 | 読み順に従って遅延を設定し、メッセージは最後にします。 |
| キャプチャせずに完了と宣言 | スクロールして3秒待ってからキャプチャし、キャプチャを確認します。 |