Anatomy：1行のプロンプトで、AIが複雑な機械原理を操作可能なインタラクティブ図解にする
操作可能な構造で機械原理とアルゴリズムのルールを解き明かし、インストール・生成・プレビュー・修正までの5ステップを実践する。
Anatomy は、AIコーディングアシスタント（Claude Code、Antigravity、OpenCode、Codex）向けのオープンソース Agent Skill です。機械の仕組みや抽象的なアルゴリズムを、ブラウザ上で実際に操作できるアイソメトリック（等角投影）図解へと変換します。複雑なメカニズムを理解するとき、各部品の名前を知ることは始まりにすぎません。本当に重要なのは、それらがどのように連動しているかです。動力がどこからどこへ伝わり、どの動作が状態を変化させ、どのような条件で次のステップが止まるのか。構造図やフローチャートは部品・接続・手順を一覧化できますが、動作中に起きるダイナミックな変化は、読者が頭の中で補完せざるを得ないことが少なくありません。
操作可能な図解は、その一連のプロセスを目の前に再現します。機械式時計のゼンマイを巻き上げれば、動力が歯車を経てどのように伝わり、脱進機によっていかにリズミカルに解放されるかを観察できます。キャッシュ内のデータ項目にアクセスすれば、それがどのように最新の位置へ移動し、容量がいっぱいになったときにどの項目が追い出されるかを目で追うことができます。入力を変え、動きを遅くし、構造を分解しながら、動作と結果の因果関係を追跡できるのです。これにより、技術ドキュメントや教材、解説記事において、抽象的なルールを具体的な挙動を通して説明できるようになります。
Anatomy のアプローチは、「物体の動きそのものに説明を担わせる」というものです。LRUキャッシュを限られたスロットを持つ本棚に見立て、トークンバケットによるレートリミットを、気体が常時補充されリクエストに応じてパンチ穴を開ける装置へとマッピングします。本棚の移動はアクセス順序に対応し、気体の蓄積と消費はクォータの増減に対応します。画面はSVG、WebGL、または3Dコードで描画され、パーツの動きと四隅の数値表示はまったく同一の状態モデルによって駆動されます。読者はこれをもとに挙動がルールに沿っているかを確かめることができますが、原理やパラメータ自体の妥当性は別途確認が必要です。
プログラミングアシスタントに対象のメカニズム、主要パラメータ、出力形式を伝えると、Skill がカメラ視点、パーツ描画、インタラクション、検証の仕組みを提供し、アシスタントがそれらに沿って編集可能なWebコードを生成します。出力形式は単一のHTML、SVG、またはReactコンポーネントから選択でき、技術文書、教材、Webページへの埋め込みに適しています。調整が必要な場合は、コードを直接修正するか、アシスタントへ追加の指示を出します。なお、生成されるのはブラウザで動作する解説用の図解であり、製造用のCAD図面や工学シミュレーションではありません。
1行のプロンプトから動く図解へ：実践する5つのステップ
1. ツールの準備とSkillのインストール
正常に動作するAIコーディングアシスタントと、Node.js を用意します。描画ライブラリには Node.js 20.10 以上が必要です。skills インストールツールには、より新しい Node.js（22.20 以上など）が必要です。
Skill 自体は無料ですが、生成や修正には各コーディングアシスタントのモデルクォータを消費します。自動スクリーンショットや線画の検査には Chrome または Chromium が必要です。
使用するツールに合わせて、以下のコマンドからいずれか1つを選択して実行してください。-g が付いているものはグローバルインストールです。現在のプロジェクト内でのみ使用する場合は、最後のコマンドを選択します。
インストールコマンド：
# Claude Code
npx skills add wheresryan22/anatomy -g -a claude-code
# Antigravity
npx skills add wheresryan22/anatomy -g -a antigravity
# OpenCode
npx skills add wheresryan22/anatomy -g -a opencode
# Codex
npx skills add wheresryan22/anatomy -g -a codex
# 仅当前项目（团队共用）
npx skills add wheresryan22/anatomy
Git経由でのインストールも可能：対象パスを展開
使用するツールのスキルディレクトリへリポジトリをクローンします：
# Claude Code
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy
# Antigravity
git clone https://github.com/wheresryan22/anatomy.git ~/.gemini/antigravity/skills/anatomy
# OpenCode
git clone https://github.com/wheresryan22/anatomy.git ~/.config/opencode/skills/anatomy
# Codex
git clone https://github.com/wheresryan22/anatomy.git ~/.agents/skills/anatomy
インストール完了後、Claude Code の実行中セッションであれば /reload-skills と入力して即座に再読み込みできます。Antigravity、OpenCode、Codex で /anatomy が自動認識されない場合は、クライアントを再起動すると有効になります（Codex では $anatomy で呼び出します）。
2. 作業ディレクトリの作成とアシスタントの起動
ターミナルで作業ディレクトリを作成し、アシスタントを起動します。以下は Claude Code を使用する例です：
mkdir anatomy-demo && cd anatomy-demo
# 启动你的 AI 编程助手（例如 claude / antigravity / opencode / codex）
claude
/anatomy ... はコーディングアシスタントへ送るプロンプトです。まず Agent を起動し、その対話セッション内で送信してください。ターミナルのシェルプロンプトへ直接貼り付けないよう注意してください。
3. プロンプトをコピーしてトークンバケットを作成
最初は、トークンバケットのような小さなメカニズムから始めるのがおすすめです。各リクエストはトークンを1個消費し、トークンがある場合のみ処理が通過します。トークンは一定のレートで補充され、上限に達するとそれ以上は増えません。容量は短時間のバーストトラフィックにどれだけ耐えられるかを決め、補充レートはクォータが回復する速さを決定します。 この両者が揃って初めてレートリミットの挙動が決まるため、単に「レートリミッターを描いて」と指示するだけでは不十分です。
ここでは容量を 8、補充レートを毎秒 2 個とし、バケットが空のときはリクエストを遮断することを明示します。これにより、アシスタントが具体的なルールに基づいてモデル化できるようになり、結果の検証も容易になります。出力として build.mjs と index.html の両方を要求するのは、パラメータ変更可能なビルドスクリプトと、ブラウザですぐに開けるWebページを同時に得るためです。パラメータを書き換えて再ビルドすれば、新しい設定が即座に反映されます。また、絶対パスとプレビュー用コマンドを出力させることで、「コード生成」から「結果の確認」までをスムーズに繋げます。
以下の2つのバージョンのうち、いずれか1つをAgentのセッション内で送信してください（テンプレートは本記事で提供しています）。Codex を使用する場合は、冒頭の /anatomy を $anatomy に置き換えてください。
-
日本語プロンプト（コピーしてAgentセッションで送信）：
/anatomy 具体的な機械装置を用いてトークンバケット・レートリミットアルゴリズムを解説してください：バケット容量は8トークン固定、注水・充填ポンプは毎秒2トークンの固定レートで補充、外部リクエスト到着時は1トークンを消費して物理的な動作をトリガーし、バケットが空のときは機構がインターロックしてリクエストを遮断します。単独で動作する build.mjs ビルドスクリプトと、ブラウザで直接開ける index.html 単一ページを出力してください。ライトテーマ、interactive仕様とし、回答内で実際に生成されたファイルの絶対パスとローカルプレビュー用コマンドを提示してください。 -
英語テンプレート：
/anatomy Explain a token bucket rate limiter using a concrete physical machine: fixed bucket capacity of 8 tokens, a pump replenishing at 2 tokens/sec, incoming requests spend 1 token to trigger an action, and an interlock blocks requests when empty. Output a standalone build.mjs script and an index.html file that opens directly in a browser, light theme, interactive. Please provide the exact output file paths and the local preview command in your response.
別の題材を扱う場合も、メカニズム、数値、出力形式を明確に伝えることで、アシスタントが保持すべきルールを把握できるようになります。例えばコネクションプールの場合は、容量、接続の貸出と返却、満杯時のキュー待機などを指定します。機械装置の場合は、どの部品が動き、その動きが何を変えるのかを伝えます。対話的な操作が必要なときは interactive を指定し、炎や水面などの特殊効果が欲しいときは WebGL を加え、部品を奥行き方向に回転させたいときは 3D（Beta）を選択します。
4. 生成結果を開き、動作と数値表示を検証する
生成が完了したら、実際に出力されたパスに従ってページを開きます：
- 出力された実際のファイルパスを確認する： アシスタントの返答にある実際のパスに従ってファイルを開きます。パスが提示されていない場合は、「生成されたファイルの絶対パスと、カレントディレクトリでプレビューを起動するコマンドを教えてください」と追加で尋ねます。
- ローカルの静的サーバーを起動してプレビューする：
作業ディレクトリで次のコマンドを実行し、ターミナルに表示されたURLとファイルパスからページを開きます：
npx serve . - 画面表示と動作を検証する：
- カードの四隅を確認：図番号、タイトル、操作のヒント、リアルタイムの数値表示が明確かチェックします。アニメーションが滑らかかを見るだけでなく、図中の指示に従って操作し、ルールが正しく守られているかを確認します。
- 残量があるときの消費を確認：トークンが回復するのを待ってからリクエストを送り、1回のリクエストでトークンが1個消費されるか、対応する部品が連動して動くか、数値表示が同期しているかを確認します。
- 枯渇時の遮断を確認：リクエストを素早く連打し、補充を上回るペースで消費させます。残量が底をついたとき、リクエストが遮断される必要があります。数値がゼロのまま止まっているのにパンチ機構だけが動き続けるような状態になっていないかを検証します。
- リクエスト停止後の回復を確認：トークンが毎秒2個のペースで補充され、8個に達したら増加が止まるかを観察します。利用可能なトークンが1個でも回復すれば、バケット全体が満杯になるのを待たずにリクエストが再び通過できる仕様になっているかを確認します。
- 自己診断の失敗やサンドボックス制限のトラブルシューティング：
- ジオメトリ監査は
kit/audit.mjsを組み込んだビルドスクリプト内で実行されます。スクリーンショットやライン検証などのブラウザチェックにのみ Chrome が必要です。Agent に実際に実行したコマンド、ファイルパス、検査結果を出力させてください。 - 検査がサンドボックス環境によってブロックされた場合は、まずブラウザで直接ページを確認してください（自動検査は未完了の状態です）。
- 対処法：特定の検査コマンドについて実行環境が提供する承認プロンプトを利用するか、通常のターミナルで確認済みの検査スクリプトを実行します。
- ジオメトリ監査は
5. 具体的な問題点を指摘して追加修正する
まずは初稿を動かしてみてから、具体的な問題点を伝えます。以下の2組の修正用テンプレートを必要に応じて使い分けてください。各組の日本語・英語のいずれかを選択できます。
画面が平坦で、パーツが浮いているように見える場合：
-
日本語プロンプト：
初稿の基本機能は動作していますが、ベースプレートと機構中央部が平坦すぎて何もないように見えます。Anatomyの4×監査基準に従ってディテールを作り込んでください：ベースプレートに面取りエッジ、インセット溝、四隅の固定ネジを追加し、スライドレールにはボールブッシュ、ストロークのリミットストッパー、目盛り線を追加してください。各層の実体パーツが隙間なく重なり合い、宙に浮いた面が一切ないようにしてください。 -
英語テンプレート：
The baseline mechanics work, but the baseplate and central carriage look too bare and flat. Please refine it to meet Anatomy's 4× audit standard: add beveled edges, inset grooves, and corner screws to the plate; add ball bushings, travel stops, and tick scales to the rails; ensure every part rests solidly on another part with zero floating surfaces.
数値は変わっているのに、機構の動きが同期していない場合：
-
日本語プロンプト：
四隅の数値表示と物理パーツの動きにズレが生じています。下層の状態モデルを見直し、右下の数値文字列と主要部品の変位を駆動する物理量が、まったく同一の純粋関数による状態を共有するようにしてください。UI層で非同期のタイマーを個別に走らせるのは避けてください。 -
英語テンプレート：
The corner readout is currently out of sync with the physical motion. Please refactor the underlying math model so that both the readout string at the bottom right and the displacement of the moving parts read from the exact same pure state function, without independent UI timers.
別の題材：コネクションプール、ブンゼンバーナー、エスプレッソマシンのバイリンガルプロンプト
データベースコネクションプール：Reactコンポーネントと静的プレビューの出力
-
日本語プロンプト：
/anatomy 私たちのNext.jsドキュメント向けにデータベースコネクションプールを解説する図を作成してください：容量10の接続プールがあり、リクエストが接続を1つ借りて完了時に返却します。10個の接続すべてがビジーのときは新規リクエストがキューで待機します。Reactコンポーネントと静的HTMLプレビューを出力し、ダークテーマにしてください。 -
英語プロンプト：
/anatomy a figure for our Next.js docs on database connection pooling: a pool of 10 connections, requests borrow one and give it back, and when all 10 are busy new requests wait in a queue. A React component plus a static HTML preview, dark theme.
ブンゼンバーナー：WebGLによる炎の表現
-
日本語プロンプト：
/anatomy 実験台の上のブンゼンバーナー：空気調節リングを回すと、弱々しい黄色い炎が唸りを上げる青い円錐形の炎へと変化します。炎にはWebGLを使用し、単一HTMLファイル、ダークテーマで作成してください。 -
英語プロンプト：
/anatomy a Bunsen burner on a lab bench: opening the air collar turns the lazy yellow flame into a roaring blue cone. WebGL for the flame, one HTML file, dark theme.
エスプレッソマシン：内部構造と水流の可視化
-
日本語プロンプト：
/anatomy サイドパネルを外した熱交換式エスプレッソマシン：ボイラー、熱交換チューブ、グループヘッド、ポンプ、スチームワンド、圧力計を含みます。エスプレッソを抽出する際の水流の流れを示してください。単独のHTML、ライトテーマで作成してください。 -
英語プロンプト：
/anatomy a heat-exchanger espresso machine with the side panel off: boiler, heat-exchanger tube, group head, pump, steam wand and gauge. Show the water flowing when you pull a shot. Standalone HTML, light theme.
まずは完成した図解を触り、次に作るメカニズムを選ぶ
仕組みを体験してみたいだけであれば、ツールのインストールは不要です。以下の装置を切り替え、案内に従って操作してみてください。ショートカットキーを使う場合は、図の内側を一度クリックしてフォーカスを当ててください。
6つの装置 · メカニズムを触って体感
ダイヤルゲージ · dial-indicator
操作方法：図を一度クリックし、Homeキー・Endキーでスライド位置を切り替えます。図内でマウスを水平に動かすことも可能です。
着目点：厚みの異なるブロックゲージが測定子を通過する際、測定子の高さ・指針・右下の数値が連動して変化します。数値はモデルの高さをpxで示しています。
図内のラベルは英語です。装置を選択後、図内を一度クリックしてからショートカットキーを使用してください。タッチ端末では画面上のUIを直接操作するか、個別リンクを開いて操作できます。
機械式時計、エンジン、アルゴリズムから着想を得る
機械式時計のゼンマイを巻き、エネルギーが脱進機へどう伝わるかを観察する。スロットルをドラッグして、3つのローターの回転と推力がどう変化するかを見る。日付を変更して、地軸の傾きが南北両半球の受光状態にどう影響するかを確かめる。アルゴリズムも同じように直感的に探究できます。本にアクセスしてキャッシュの並べ替えを発生させたり、パンチを長押ししてトークンがどのように消費・補充されるかを観察したりできます。
Anatomy Collection オンラインコレクション には、直接操作できる図解が全52種類公開されており、33件の主要事例と19件の初期探索事例が含まれています。さまざまなメカニズムを体験したい場合はここから選べます。また、実際にコードを実行して改造してみたい場合は、リポジトリに含まれる8つの完全なプロジェクトを利用できます。
画像をクリックして拡大表示。下部のリンクから図解を開いて実際に操作できます。
機械式時計：連続的な動力を計時のビートへと変換する。 リューズを巻き上げることでゼンマイにエネルギーが蓄えられ、輪列（歯車群）が動力を脱進機へと伝達します。モデル内のテンプは 4 Hz で振動し、アンクルがガンギ車を交互に停止・解放します。1回の動作で半歯ピッチを解放し、1秒間に 8 回発生します。そのため、秒針が刻一刻と進む様子を見るとき、「エネルギーの蓄積 → 伝達 → 調速脱進」という因果の流れを辿って理解でき、単に歯車が回っているだけという以上の実感を伴います。
トークンバケット：一時的なバーストと持続的な流量制限の共存。 タンク内の気体残量がトークンに対応し、ポンプは毎秒 2 個の補充レート、リリーフバルブは最大 8 個までの蓄積制限に対応します。リクエストが到着すると、パンチ動作がトークンを1つ消費します。枯渇すると、インターロック機構がパンチを物理的にブロックします。蓄積されたクォータによって短時間の突発的なバーストが許容され、固定の補充レートによって長期的なスループットが制御されます。利用可能なトークンが1個でも再蓄積されればすぐにリクエストを通すことができ、上限まで完全に回復するのを待つ必要はありません。
四季：地軸の向きは変わらず、光を受ける関係が変化する。 三球儀では中央のランプを太陽に見立て、歯車機構によって地球儀がランプの周りを公転する間も 23.4° の地軸の傾きと、ほぼ一定の向きを維持します。公転位置が変わることで、北半球と南半球が交互に光源を向くようになります。このプロセスを追うことで、地軸の傾き、太陽光の入射角、そして季節の移り変わりを結びつけて理解でき、単に「地球は太陽の周りを回っている」という知識にとどまらない納得感が得られます。
コードの修正を試したい場合、ダイヤルゲージのプロジェクト から始めるのが最も手軽です。その他のプロジェクトも目的に応じて選択できます：入力と画面描画の連動を見るなら レトロPC、コイン投入信号の伝達を見るなら アーケード筐体、部品の分解と噴流の表現を見るなら ラプターエンジン、波動の干渉を見るなら リップルタンク、3D回転を見るなら ダイヤル錠 が適しています。また、スプリングテストベンチ と スポットプレート という2つのReactプロジェクトもあり、これらはフロントエンド環境および kit/react/ との連携が必要で、単体のHTMLファイルとしては開けません。
発展編：ローカルでのコード修正と既存Webページへの組み込み
改造可能なダイヤルゲージをローカルで動かす
この手順には Node.js 20.10 以上と Python 3 が必要ですが、AIモデルの呼び出しは行いません：
- リポジトリをローカルのテスト用ディレクトリにクローンする：
git clone https://github.com/wheresryan22/anatomy.git anatomy-examples cd anatomy-examples - 軽量ビルドスクリプトを実行する：
最小サンプルであるダイヤルゲージ（
dial-indicator）を実行し、--lightオプションを付けてライトテーマの単一ページをビルドします：補足：このスクリプトは Node.js の標準モジュールのみを使用しているため（Node.js >= 20.10 が必要）、追加のnode examples/dial-indicator/build.mjs --lightnpm installは不要です。ビルドが完了すると、同じディレクトリ内にexamples/dial-indicator/dial-indicator-light.htmlが出力されます。 - ローカルの静的HTTPサーバーを起動する：
リポジトリのルートディレクトリで静的サーバーを起動します：
python3 -m http.server 8000 - ブラウザで指定のアドレスにアクセスする：
起動した Python サーバーを実行したまま、ブラウザのアドレスバーに次のように入力します：
http://localhost:8000/examples/dial-indicator/dial-indicator-light.html - 操作と連動の確認：スライド台の上でマウスを左右にホバー・移動させるか、キーボードの矢印キー（
←/→）、Home、Endキーを押して厚みの異なるブロックゲージを切り替えます。ダイヤルゲージの測定子が押し込まれ、指針が回転し、右下の px 単位の高さ表示がリアルタイムに連動することを確認してください。 - 修正して再ビルドする：
examples/dial-indicator/build.mjs内のパーツ寸法やストロークを変更し、再度ビルドを実行してブラウザをリロードします。
既存のWebページに図解を組み込む
既存のフロントエンドプロジェクトに図解コンポーネントをインストールします：
npm install anatomy-figures
- React（>=18）または Next.js プロジェクトでのインポート：
コンポーネント名で直接インポートします：あるいは、未使用の他モデルのコードがバンドルされるのを防ぐため、パスを指定して個別にインポートすることもできます：
import { Watch } from "anatomy-figures"; export default function Page() { return <Watch theme="light" />; }import Watch from "anatomy-figures/watch";
発展：カスタムテーマの設定と非React環境での利用
- テーマとトークンの設定：
主要な図解には5種類のテーマ（
dark、light、paper、blueprint、sepia）が用意されています（初期の事例は各固有のライト・ダーク配色を維持）。トークンを使って色を上書きすることが可能です：また、<Watch theme="light" tokens={{ "--anatomy-card": "#ffffff", "--anatomy-lit": "#e5484d", }} /><AnatomyTheme>を使用してコンポーネントツリー全体に共通のテーマやアクセントカラーを一括設定することもできます：import { AnatomyTheme, Turbofan, Watch } from "anatomy-figures"; <AnatomyTheme theme="paper" tokens={{ "--anatomy-lit": "#e5484d" }}> <Watch /> <Turbofan /> </AnatomyTheme> - 非ReactのWebページでの Custom Element の利用：
コンポーネントライブラリは、各図解に対応するカスタムWebコンポーネント（Custom Element）を提供しています：となります。ブラウザ単体でそのまま動く静的スクリプトとしては使用できません。また、
<script type="module"> import { define } from "anatomy-figures/element/watch"; define(); </script> <anatomy-watch theme="light"></anatomy-watch>spot-plateやpress-and-pullといった初期事例の Custom Element を利用する場合、内部で React のレンダリングに依存しているため、プロジェクト側にreactおよびreact-domも併せてインストールする必要があります。
Skill および図解コンポーネントは MIT ライセンスを採用しており、利用および再配布にあたっては元の著作権表示および許諾表示を保持する必要があります。
図解が本当に原理を正しく説明できているかを見極めるには
キャッシュの順序と追い出しルールで検証する
「動きがルールを正しく伝えているか」を検証するために、容量 4 の LRU キャッシュを例に取ります。以下は本記事のために作成した簡略化学習モデルです：
- 最近使用された項目の順序変更：データキーをクリックした際、対応するスライドブロックがすでに本棚にある場合は、引き抜かれて最も左側の最新スロットへと移動し、他のブロックは右へとシフトします。
- 満杯時の追い出し：4つのスロットがすべて埋まっている状態でキャッシュにない新しいデータにアクセスすると、最も右側にある最も長く使われていないブロックがスロット外へ押し出され（エビクション）、新しいブロックのためのスペースが空けられます。
最近使用 → 最も長く未使用：A → B → C → D
初期キャッシュに A、B、C、D が格納されています。既存の項目にアクセスすると先頭に移動し、満杯時に新しい項目へアクセスすると最も長く使われていない末尾の項目が追い出されます。
動作と数値表示にまったく同一の計算結果を使用する
Anatomy は、まず状態モデルを構築し、その後にジオメトリとインタラクションを生成します。SKILL.md がビルドパイプラインを規定し、kit/ がカメラや描画ツールを提供し、references/ が実装アプローチを補足し、scripts/ が検証を担い、examples/ が実行可能なプロジェクトを提供します。描画は、寸法設定、状態定義、パーツ配置、遮蔽計算、インタラクション、自己診断など10のステップに沿って進行します。
リップルタンクの状態モデル（examples/ripple-tank/model.mjs）では、次のような計算が行われています：
- モデル内には、水深 6 mm（0.006 m）、重力加速度、表面張力などの物理定数が固定値として定義されています。
- ユーザーが周波数を調整すると、システムは重力・表面張力・水深を含む分散関係式から対応する波数を解き、水波の波長を算出します。
- 算出された状態オブジェクト（
stateOf）は、グラフィック描画関数（patternOf）とテキスト表示関数（readoutOf）の両方へ同時に渡されます。波紋パターンは波の間隔や節線を描画し、数値表示パネルはリアルタイムの周波数、波長、節線の数をフォーマットして出力します。
周波数を変更すると、波紋の間隔と波長の数値表示が同時に変化します。キャッシュモデルにおいても、アクセスごとに順序の入れ替えと追い出しの数値表示が完全に連動します。このように状態を同期させることで、視覚表現と数値の乖離を防ぐことができますが、モデルそのものの正しさは別途検証が必要です。
レイヤーの干渉（クリッピング）が発生した場合は、遮蔽とジオメトリを確認する
メイン構造はSVGで描画し、火・水・光などの表現にはWebGLを用い、両者は同一のカメラ視点を共有します。パーツを奥行き方向に回転させる必要がある場合にのみ、3Dモードがフレームごとに再投影を行います。配管がフレームを貫通するような構造では、前後の遮蔽関係を慎重に確認する必要があります：
- レイヤー分割とスライス：入れ子状の構造部品（例えば支柱を取り巻くスプリングや、スライダを包むフレーム）を描画する際、デザイン仕様では外側の部品を手動で前後の半身にスライスし、遮蔽チェーンの異なるレイヤーに分けて配置することが求められます。
- 深度測定（
A.settle）：オフラインビルド時に、レイキャスティング計算を用いて各パーツが重なり合う位置の相対深度を算出し、描画順序を決定します。 - ジオメトリ監査（
--audit）：ソースコードに記録された幾何形状、配管の取り回し、サンプリング状態に基づき、パーツ同士の衝突、クリアランス（隙間）、宙に浮いた端点、深度順序を自動検証します。この検査はあくまで定義された形状とサンプリング状態をチェックするものであり、概念の説明が正しいか、パラメータが適切かどうかは人間による確認が必要です。
まずは小さなメカニズムから、複雑な図解は時間をかけて磨き上げる
最初は、シンプルな動きで説明できるメカニズムを選び、interactive を指定して動く初稿を作ることから始めましょう。Figureクラスは約40〜80個のパーツで構成され、所要時間は固定されていません。Heroクラスは約80〜150個のパーツで、想定作業時間は約2〜4時間です。さらに大規模なEpicクラスは通常6時間以上を要するため、まずはアシスタントと相談してスコープを絞り込めないか検討してください。
複雑な図解のアクティブ開発時間はかなり長くなることがあります。実際の制作記録によると、機械式時計は約1時間54分、ラプターエンジンは約10時間33分、ターボファンエンジンは約14時間となっています。これらは個別の制作事例の記録です。3Dモードは依然としてBeta版であり、複雑なシーンではフレームレートが低下することがあります。通常の等角投影SVGで十分に説明できる場合は、まずSVGから始めるのが確実です。