箱を描くのはやめて、コンセプトを動かそう
これまで使ってきた図解ツールは、どれも箱と矢印を描くものでした。「Anatomy」と呼ばれるこの新しいAIスキルには、「それをしてはいけない」という一つのルールがあります。その核となる考え方は、従来の図解が「何が存在するか」を示すのに対し、物理的な機械は「メカニズムがどう振る舞うか」を示せるという点にあります。
Anatomyは、あなたのコンセプトを反映したメカニズムを持つ物理的な機械をAIに考案させます。キャッシュキーは「ピンタンブラー錠」となり、正しい鍵がピンを揃えて扉を開けます。TCPハンドシェイクはロープで渡される手紙となり、LRUキャッシュは実行に伴う状態変化を実演します。
これらは静止画ではありません。Anatomyは、触ったり突いたりできる「インタラクティブな機械」をレンダリングします。これは、Mermaid、D2、Excalidrawといった他のアーキテクチャ図解スキルとは一線を画す重要な違いです。
それらのツールはトポロジーを描き、システム全体で何が何とつながっているかをマッピングします。一方、Anatomyは「一つのメカニズム」を説明します。つまり、単一の事象がどのように振る舞うかを解説するのです。システム全体のアーキテクチャをマッピングするのではなく、その特定のプロセスを解明するための精密で小さなモデルを構築します。
賢い部分は描画の前に起こる
Anatomyの真の天才性は、「Truth First（真実第一）」のアプローチにあります。AIエージェントは単に描画を始めるのではなく、まずすべてのルールと値を収集し、コンセプトの振る舞いを表す小さく純粋な「数学的モデル」を構築します。この厳密なモデリングを経て初めて、視覚的な計画と描画が行われます。
つまり、画面上のインタラクティブな表示は、単なる偽物ではなく、基礎となるモデルに直接接続されています。Anatomyの図でコントロールを操作しても、それは装飾的なアニメーションをトリガーしているのではなく、モデルの計算に基づいて実際のデモンストレーション状態を更新しているのです。
ジオメトリの自己チェック機能も組み込まれています。システムは、パーツ同士が重なっていないか、接続が正しい位置にあるかを確認できます。また、適切なアイソメトリック（等角投影）のZオーダーも保証します。
ただし、重要な「検証の境界線」が存在します。これらのチェックは「絵」を検証するものであり、「事実」を検証するものではありません。エージェントはジオメトリが正しいことは確認できますが、事実やメタファーそのものが正確であるとまでは保証できません。説明の真実性は、その例え話の正確さに依存します。そのため、図を信頼する前に必ずメタファーの内容を確認してください。
コネクションプールからロケットエンジンまで
では、実際にどのように使うのでしょうか？コンセプトとその振る舞いをエージェントにプロンプトし、「インタラクティブ」といった指示を加えます。例えば、ビデオのデモでは、10個の接続を持つ「データベースコネクションプール」をモデル化し、それらが借り出され、返却され、すべてが使用中の場合にキューイングされる様子を示しています。
Anatomyには、その範囲を示すいくつかの組み込み例が付属しています。シンプルなダイヤルインジケーター、画面上でタイピングできるインタラクティブなコンピューター、そしてWebGLの排気プルームを伴い11個のアセンブリに分解される詳細な「Raptorロケットエンジン」などがあります。これは、基本的なデバイスから複雑なシステムまで、どのようにスケールするかを示しています。
Anatomyは、Claude Code、OpenAI Codex、OpenCode、Antigravityといった互換性のあるコーディングエージェント向けの「オープンソースエージェントスキル」です。npxを使用するか、リポジトリをクローンすることでインストールできます。詳細については、GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrations を確認してください。
出力はスタンドアロンのHTML/SVGファイルまたはReactコンポーネントで、dark modeやWebGLといったオプションで制御可能です。これにより、開発者はこれらの動的なビジュアルをドキュメント、ブログ記事、ランディングページに簡単に埋め込み、抽象的な概念を真にインタラクティブなものにすることができます。
この記事が気に入ったら、毎朝同じようなものをメールで受け取れます。
1日1通 · 2クリックで解除 · サードパーティのトラッキングなし
素晴らしい解説ツール—ただしトークン消費には注意
Anatomyによる優れた解説にはコストがかかります。インタラクティブな図の生成は、ホワイトボードでの簡単なスケッチとは異なります。かなりの時間とトークン消費を想定してください。「標準的な」図でも30分から90分かかることがあり、「Epic」なレンダリングでは2〜4時間、非常に複雑な設計であれば48時間以上かかることもあります。見積もりには大きな幅があるため、従量課金プランでは予算を適切に管理してください。
このツールは、ユニークでインタラクティブな解説が労力に見合う特定のユースケースで真価を発揮します。以下のような用途を検討してください：
- 技術ドキュメント
- 複雑な概念の教育
- 製品ランディングページ
- 魅力的なブログ記事
出力結果には常に批判的な目を向けてください。基礎となる物理的なメタファーを検証し、それが本当に正確かどうかを確認してください。実際に操作してテストを行い、修正のための予算も確保してください。AIの自己チェックは幾何学的な整合性を検証するものであり、アナロジーの事実としての正確性を保証するものではありません。視覚的な監査は、厳密な専門家によるレビューの代わりにはなりません。
よくある質問
Anatomy AIスキルとは何ですか？
Anatomyは、技術的な概念の仕組みを説明するために、インタラクティブな図解マシンを作成するオープンソースのエージェントスキルです。
AnatomyはMermaidダイアグラムとどう違いますか？
Mermaidはコンポーネントと接続をマッピングしますが、Anatomyは一つのメカニズムをモデル化した物理的なメタファーを構築し、インタラクションに応答できるようにします。
Anatomyは何を生成しますか？
SVGビジュアルを含むスタンドアロンのHTMLページ、またはWebGLや実験的な3Dオプションを備えた埋め込み可能なReactコンポーネントを生成できます。
Anatomyは高速、または安価に使用できますか？
必ずしもそうではありません。複雑な図の作成にはエージェントの長時間実行と多額のトークンが必要になる場合があるため、開始前に範囲とコストを確認してください。
Anatomyは自分の説明が正しいことを検証できますか？
幾何学やインタラクションの側面をテストすることはできますが、それらのチェックは、選択されたメタファーや技術的な説明が正確であることを証明するものではありません。