オープンソース「Anatomy」：一言でAIが操作可能な機械図解を生成

Anatomyは、抽象的な技術概念を一言入力するだけで、実際に動作する等角投影図（アイソメトリック）のインタラクティブな機械として視覚化するオープンソースのAIエージェントスキルです。

従来の四角と矢印で結ぶフローチャートの代わりに、Anatomyは概念そのものを数十個の精密部品からなる物理機械に置き換えます。例えばキャッシュヒットの仕組みはすべてのピンが揃わないと回らないシリンダー錠になり、接続プールは一定数の部品を行き来させる装置として表現されます。

生成できる図解の種類

Anatomyが生成する図解は、統一されたアイソメトリックカメラと光影ルールに基づき、3つの形式をサポートしています。

基本となるのは純粋なSVGです。4段階の陰影を持つ立体的なパーツが奥から手前へと描画され、数値表示カードと滑らかなイージングアニメーションを備えています。単一のHTMLファイル、スタイルが埋め込まれたSVG単体、あるいはReactやNext.jsコンポーネントとして出力できます。

ラインだけでは表現できない炎、排気、水流、焦散光などの流体表現には、SVGとWebGLシェーダーの組み合わせが使われます。前後のSVGレイヤーの間にWebGLキャンバスを挟み込むことで、破綻のない立体感を再現します。

さらに現在ベータ版として、ダイヤル回転やパーツの脱落などをフレームごとに再投影・再シェーディングする本格的な3Dモードも用意されています。

インストールと使い方

Anatomyは標準的なエージェントスキル仕様で構成されており、Node.jsの標準モジュールのみで動作します。外部APIキーや重いnpmパッケージの追加は不要です。

導入はコマンド一行で完了します。npx skills add wheresryan22/anatomy -g を実行するか、リポジトリを各エージェントのスキル用フォルダにクローンするだけです。Claude Code、Antigravity、OpenCode、Codex、MiniMax Codeに対応しています。リポジトリ全体の容量は約10MBで、Node.js 22.20以上が必要です。

インストール後は、チャット欄で /anatomy と打ち込み、レート制限の仕組みやCDNキャッシュの動作など、説明したい概念と数値を伝えるだけで、エージェントがコード生成からパーツの干渉チェックまで自動で行います。

なぜ重要か

技術解説やドキュメント作成において、Anatomyのアプローチは極めて実用的で賢い試みです。これまでインタラクティブな3D図解を作るには専用ツールによる長時間のモデリングが必要でしたが、LLMのコード生成能力と物理メタファーを組み合わせることで、開発者が短時間で直感的な解説教材を量産できるようになります。

技術ブログや製品ドキュメントを執筆するエンジニアにとって、今すぐ試す価値のあるツールです。ただし、Codexなどサンドボックス環境が厳しいエージェントでは、自動キャプチャ検証用のヘッドレスブラウザがブロックされる場合があるため、一時的なパーミッション設定が必要になる点には留意してください。