Archify入門：コードやアイデアを、たどって読める構成図にする

構成図を見ても、「この矢印の先で何が起きるのか」「どのファイルが根拠なのか」が分からないことがあるで。図を説明の入口にして、必要な部分をたどれると理解を進めやすくなるで。

tt-a1i/archify は説明文やコードベースから、探索できるHTML図解を作るAIエージェント向けスキルやで。この記事は公式READMEとライセンスを確認した紹介で、実機での性能評価やないで。

Archifyでできること

既存コードの引き継ぎ、設計レビュー、学習メモの共有に向いてるで。文章で説明するだけでも始められ、リポジトリを読ませて根拠付きの構成図を作る使い方もREADMEで案内されてるで。

生成図は設計の正しさを自動証明するものやないで。実在する構成と説明上の仮定を区別し、重要な接続はソースや仕様に戻って確認する必要があるで。

できた図を触ると何が見える？

まず完成形を見たい人は、公式のギャラリーやWebアプリのサンプルが参考になるで。2026年10月27日に公式リポジトリのサンプルHTMLを手元で開き、「API Server」をクリックして確認したところ、詳細欄に次の関係が表示されたで。

API Server — FastAPI :8000
出る接続: Redis（read-through）、PostgreSQL（SQL）、SQS（enqueue）
入る接続: Auth Provider（verify JWT）、Load Balancer

これは公式の架空サンプルの内容を日本語で整理したもので、あなたのシステムを解析した結果やないで。静止図を別資料と見比べる場合は、APIに関わる線や説明を自分で探す必要がある。詳細付きの図では対象を選んで関連する接続をたどれるのが利点や。ただし入力に誤りがあれば、見やすい図でも誤った関係を示すで。

下の架空の練習なら、確認したい答えは「通常はAPIがRedisを参照し、キャッシュになければPostgreSQLへ進む」の2経路や。詳細を開いてその条件が書かれているか、矢印の向きは合うか、勝手なサービスが増えてへんかを確認してな。コードベースから作る場合は、図の各接続について実際のファイルや行に戻り、確認できない線を未確認として残すんや。

公式READMEによると、対応する版には更新案内のための固定URLへの確認通信がある。不要なら環境変数ARCHIFY_UPDATE_CHECK_DISABLED=1で無効にできるで。AIサービスへの入力送信や、スキルのダウンロードとは別の通信や。詳細は公式の更新確認の説明を見てな。

今回のゴールと環境

キャッシュのあるAPIの図を作り、ノードの詳細と分岐を確認する。

確認した範囲：2026年10月24日に公式READMEや導入資料を読み直して、以下の手順を具体化したで。2026年10月27日に公式サンプルのHTMLを開いて操作したで。以下のClaude Codeへの導入と生成は実行してへん。成功の目安は、手元で試すときのチェックとして使ってな。

準備

ここではWindows 11 x64とPowerShellで進めるで。スタートで「PowerShell」を検索して開いてな。Node.js公式ダウンロードで24系LTS・Windows・x64のInstaller（.msi）を選び、ダウンロードしたファイルを開いて画面に沿って入れてな。入れ終わったらPowerShellを開き直すんや。

node --version
npm.cmd --version

両方にバージョンが出たら準備OKや。以下ではWindowsのスクリプト実行ポリシーで止まりにくいnpm.cmdとnpx.cmdを使うで。インストール済みなら入れ直す必要はないで。

Git公式のWindows用ページからx64 Setupをダウンロードし、インストーラーの案内に沿って入れてな。PowerShellを開き直し、git --versionでバージョンが出ることを確認するんや。

今回はClaude Codeを使うで。使えるプランやAPIの支払いは別に必要やから、公式の準備・ログイン案内を先に確認してな。PowerShellで次を実行し、インストール後は新しいPowerShellを開いてな。

winget install Anthropic.ClaudeCode

WinGetがないときは、WindowsのMicrosoft Storeで「アプリ インストーラー」を入れるか更新してからやり直してな。次の確認でバージョンが出たら準備OKや。実際にclaudeを起動するんは、下の練習フォルダーを作ってからやで。初回起動は画面の案内でブラウザーにログインし、戻って入力欄が使えることを確かめてな。

claude --version

PowerShell用のコマンドと、Claude Codeの入力欄へ送る文は別やで。「Claude Codeで入力」と書いたブロックをPowerShellへ貼らんようにしてな。AIにファイルを読ませると、その内容が利用するサービスへ送られることがあるで。最初は以下の架空例だけで試そか。

New-Item -ItemType Directory -Force "$env:USERPROFILE\github-practice\archify" | Out-Null
Set-Location "$env:USERPROFILE\github-practice\archify"

使い方

@'
<!doctype html><html lang="ja"><meta charset="utf-8"><title>練習フォーム</title><form><label>名前 <input name="name"></label><button>確認</button></form></html>
'@ | Set-Content index.html -Encoding UTF8

練習用のindex.htmlを作ったで。プラグインの導入場所は次の案内を守ってな。

PowerShellで入力：

npx.cmd skills add tt-a1i/archify -g

archifyとClaude Codeを選んで導入してな。-gは今回のフォルダーだけやなく、ユーザー側に入れる指定や。導入先を確認するで。

Claude Codeが開いてるときは/exitで閉じ、PowerShellで同じフォルダーからclaudeを起動し直すで。フォルダーを信頼するか聞かれたら、今作った練習用の場所か確認してな。

Claude Codeで入力：

Archifyで、ブラウザー→API→Redis、キャッシュにないときだけAPI→PostgreSQLへ進む架空構成を描いて。archify-demo.htmlとしてこのフォルダーに保存して。APIの詳細を開くと役割と2つの分岐を読めるようにして。外部素材や実際の秘密情報は使わんといて。

成功の目安：archify-demo.htmlを開き、APIの詳細とキャッシュがない場合の経路を確認できることや。実際のRedisやDBを立てる練習ではないで。

仕組みとデータの流れ

トラブルシューティング

終了と再開

Claude Codeは入力中ならEscで作業を止め、/exitで終了できるで。続けるときは同じ練習フォルダーでclaudeを実行するんや。保存したHTMLはエクスプローラーからダブルクリックして表示を確認してな。

公式READMEと最新の導入案内も確認してな。配布版や外部サービスの変更で、手順が変わることがあるで。

図からの理解

引き継ぎでは、すべての依存を一枚に並べるより、最初に知りたい処理経路から確認する進め方が考えられるで。追加の問いで図を更新し、未確認部分を残すことも大切やで。

ソースとの照合

AIが推測した依存関係や、古いコードに基づく説明が混ざることがあるで。社外にHTMLを共有する前に、内部URL、ファイルパス、引用コード、機密情報が含まれていないか点検してな。

READMEは公式サイトと第三者のオンラインサービスを区別してるで。導入先が公式配布元か確認してな。レビュー資料として残すときは、対象コミットや確認日を併記すると更新時に照合しやすくなるで。

公式資料と利用条件

Archify本体はMITライセンスやで。外部AIサービスや取り込む資料の利用条件まで許可するものやないで。

• 公式GitHub・README
• LICENSE
• 公式サイト

確認日：2026年10月23日。本文は公式情報をもとに独自に構成し、図解は本記事用に制作したで。公式の画像・動画やREADMEの長文転載は使ってへんで。記事中の利用例・改善の比較は想定例であり、性能や成果の保証やないで。