Anatomy とは？Claude Codeスキルで技術概念をSVG/WebGLインタラクティブ図に変換
Anatomy とは？Claude Codeスキルで技術概念をSVG/WebGLインタラクティブ図に変換
Claude CodeスキルのAnatomyを使って技術概念をSVG/WebGLインタラクティブ図に変換する方法を解説します。インストールから使い方まで日本語で紹介します。
GitHubで急上昇中の wheresryan22/anatomy をご紹介します。 スター数 8835★ を獲得し、DevTool分野で注目されているツールです。
Anatomy Claude Code スキルとは？
wheresryan22/Anatomyは、Claude Codeのエージェントスキルとして2026年10月にリリースされた技術図解生成ツールです。「トークンバケットのレート制限はどう動くか」と伝えるだけで、AIがその概念を「ピン錠」として具現化し、動くアイソメトリック図を生成します。SVGをベースに、WebGLシェーダー（炎・水・排気）や3Dモード（ベータ）もサポート。Claude Code以外にOpenCode・Codex・Antigravityにも対応し、生成した図はコミュニティギャラリーへ公開できます。
8名以上のコントリビューターが参加し、v1.1.0（2026年10月12日）では図のコミュニティギャラリー公開機能が追加されました。ゼロ依存（Node.js組み込みモジュールのみ使用）でAPIキー不要という手軽さも、急速な普及の一因です。
こんな人におすすめ:
- エンジニア向け: 技術ブログ・ドキュメントの執筆者やフロントエンドエンジニアが、コードの動作原理を視覚的に説明するために使用できます
- 非エンジニア向け: プログラミング知識が必要なため、エンジニア専用ツールです
主な機能・特徴
Anatomyは以下の主要機能を提供します。
- テキストプロンプトだけで精密なアイソメトリックSVG図を自動生成する — 「説明したい概念」を伝えるだけでAIが適切な物体を設計・描画します
- WebGLシェーダーで火炎・水流・光効果をSVGと同一カメラで描画する — 静的なSVGでは表現できない流体・光学効果をWebGLと組み合わせ実現します
- 3Dモード（ベータ）でダイヤルやターンテーブルを真の3Dで回転させる — ドラッグ操作で立体的に見る実験的な3Dレンダリングに対応します
- 生成図のジオメトリを自動検証する —
--auditオプションで部品の干渉・接合部の正確性を自動証明します - Claude Code・OpenCode・Codex・Antigravityの4エージェントに対応する — 主要なAIコーディングエージェントで同一のスキルとして動作します
Claude Code インタラクティブSVG 使い方：インストールと基本操作
インストール方法
インストールは1コマンドで完了します。Node.js 20.10以上が必要ですが、npm installは不要です。
npx skills add wheresryan22/anatomy -g -a claude-code
OpenCode、Codex、Antigravityにも対応しています。
# OpenCode
npx skills add wheresryan22/anatomy -g -a opencode
# Codex
npx skills add wheresryan22/anatomy -g -a codex
基本的な使い方
Claude Code内で /anatomy コマンドを使います。
/anatomy explain how a token bucket rate limiter works, interactive
その他のプロンプト例として、DB接続プールの可視化も可能です。
/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.
生成された図はスタンドアロンHTMLページ、単独SVGファイル、またはReact/Next.jsコンポーネントとして出力されます。
図のコミュニティギャラリーへの公開
v1.1.0の新機能として、生成した図をコミュニティへ公開できます。
"publish this figure to the Anatomy community gallery"
エージェントがタイトル・ID・GitHubユーザー名を確認後、自動でプルリクエストを開きます。git操作なしで誰でも公開できます。
活用事例
フロントエンドエンジニア向け：技術ドキュメントの強化
フロントエンドエンジニアがNext.jsドキュメントのDB接続プールを「10本のコネクションプール」として可視化し、チームの理解を促進できます。「a pool of 10 connections, requests borrow one and give it back」と指示するだけで、ブラウザで動作するインタラクティブな図が生成されます。Reactコンポーネントとして出力することで、既存のドキュメントサイトへの組み込みも容易です。
テックライター向け：技術ブログの視覚化
テックライターがCDNエッジキャッシュのキャッシュヒット/ミスの仕組みをSVGアイソメトリック図で作成し、技術ブログの読了率を高めることができます。WebGLオプションを使えば、データフローをアニメーションとして表現することも可能です。ランディングページやブログの差別化にも効果的です。
Mermaid・D3.jsとの違い：なぜ今Anatomyなのか
MermaidやD3.jsは「グラフの種類と構造を指定する」ことで図を描くツールです。一方Anatomyは「説明したいコンセプト」を自然言語で伝えるだけで、AIが「どんな物体でそのコンセプトを表現するか」を設計します。
例えばキャッシュの仕組みを説明したい場合、Mermaidではフローチャートの矢印とノードを手動で定義しますが、Anatomyでは「CDNエッジキャッシュのキャッシュヒット/ミスを説明して」と伝えるだけです。
GitHubで急上昇している背景には、AIコーディングエージェントの普及があります。Claude Codeなどのエージェントが技術ドキュメント作成を担うシーンで、従来の静的な図では不十分だという需要に応えています。また、draw.ioのような手動作業ツールと比べ、AIが自動設計することで制作時間を大幅に短縮できます。
こんな人に向いている
フロントエンドエンジニア
技術仕様の共有時に、コードだけでなく動作原理を視覚化したいフロントエンドエンジニアに最適です。Reactコンポーネントとして出力できるため、既存のドキュメントサイトへの組み込みも容易です。図の自動検証機能により、品質保証された図を短時間で作成できます。
テクニカルライター・ドキュメントエンジニア
複雑なシステムアーキテクチャや処理フローを図で説明する必要があるテクニカルライターに有用です。APIキー不要でClaude Code上で即座に使い始められます。「説明を書く」から「動く図で見せる」へのパラダイムシフトを実現します。
MLエンジニア・バックエンドエンジニア
分散システム・キャッシュ機構・ネットワークプロトコルなど、アルゴリズムやインフラの動作原理を可視化したいMLエンジニアやバックエンドエンジニアにも活用シーンがあります。WebGLで流体や光を表現できるため、機械学習モデルのデータフロー可視化にも応用できます。
使う前に知っておきたいこと
技術的な制限
- チャートライブラリではない: グラフの軸・データプロット・シリーズ表示には対応していません
- 機械・道具・家具の描画に特化: 人物や地図には対応しておらず、「仕組み」のない概念は弱くなります
- 処理時間が長い: 1つの図の生成に長時間かかります（Raptorエンジンの例では数分、3D軌道検証は15〜20分）
- WebGLが必要なシェーダー: WebGL非対応環境ではSVGのみ表示されます（機能的には問題なし）
- 3Dモードはベータ: 本番環境での使用は限定的。380パーツのストレステストで20fps程度
環境要件
Node.js 20.10以上が必要です。Chrome/Chromiumは検証スクリプト（capture.mjsなど）使用時に必要です。React 18+はReactコンポーネント出力時のみ必要です。
ライセンス
MITライセンスです。商用利用・改変・再配布が可能ですが、著作権表示（© 2026 Ryan）は維持してください。
関連ツール・おすすめサービス
Vercel — Anatomyが生成したHTMLページやReactコンポーネントを無料でホスティング・デプロイできるプラットフォーム
- DigitalOcean — 開発者向けクラウド。App Platformで生成した図をかんたんにデプロイできます
まとめ
AnatomyはClaude Codeを使った技術図解の新しいパラダイムです。「説明を書く」から「動く図で見せる」へのシフトを実現し、技術ライターやフロントエンドエンジニアに特に有用なツールです。
MITライセンスで商用利用可能、APIキー不要で即座に使い始められる点も魅力です。スター数8835を超え、v1.1.0でコミュニティギャラリー機能も追加。技術ドキュメントの品質を高めたいエンジニアにぜひ試してほしいツールです。
この技術を学ぶ
DevToolに興味を持った方には、Udemyのオンラインコースもおすすめです。
- 🎓 関連するDevToolコース一覧 — セール時（最大90%OFF）を狙うとお得です
関連記事
この記事が役に立ったらシェアしてください