Archifyとは
2026年9月6日時点の情報。Archifyは開発が活発なので、インストール方法や対応機能は今後変更される可能性がある。
Archifyは、Claude CodeやCodex、CursorなどのAIエージェントから利用できるエージェントスキルで、コードや自然言語の説明からシステム構成図や処理フロー図を自動生成するためのツールである。
GitHubのスター数が5万を超え、GitHubTrending世界1位を4日連続で獲得したという、現在非常に注目されているスキル。
https://github.com/tt-a1i/archify
公式には以下のように説明されている。
- コードベースやシステムの説明から図を作る
- AIが構造を解析する
- HTML/SVGとして描画する
- インタラクティブに図を確認できる
- PNGやSVGなどへ書き出せる
単純に「AIに画像として図を描かせる」というより、
AIにシステム構造を理解させて、その結果を専用レンダラーで図にするのがポイント。
2026年9月時点では、CHANGELOG上の最新安定版はv2.16.0、開発中バージョンはv2.17.0-dev.1となっている。
何が描けるのか
現在Archifyでは5種類の図を扱える。
| 種類 | 用途 |
|---|---|
| Architecture | システム構成図 |
| Workflow | 処理や業務の流れ |
| Sequence | APIなどの呼び出し順 |
| Data Flow | データの流れ |
| Lifecycle | 状態遷移やライフサイクル |
Archify公式では、実際のプロジェクト、リポジトリを開いてAIに解析させ、構成図を作成する使い方が紹介されている。
図を直接描いているわけではない
Archifyの大まかな流れは以下。
自然言語・コード
↓
AI
↓
Typed JSON IR
↓
Archify Renderer
↓
HTML / SVG
つまりAIが直接SVGを書いているわけではなく、まずAIが
{
"components": [
{
"id": "frontend",
"label": "Frontend"
},
{
"id": "api",
"label": "API"
}
]
}
のようなJSON形式の中間データ（IR）をで作り、それをArchify側のレンダラーで図にする。
結果として生成AIにありがちな揺らぎもなく、同じJSONからは同じ結果が出力される。
また、生成AIにSVGやHTMLを直接作らせると、存在しない要素をAIが勝手に追加したりと余計なことをしがちだが、ArchifyではJSONスキーマによる検証やレンダリング後のチェックを挟むことで、そうした問題を減らす仕組みになっている。
これらのチェック機能が現状ではバージョンを更新するごとに強化されており、注目のツールと言える。
出力の種類
Archifyで生成される基本成果物はHTML。単なる画像ではなく、ブラウザで開いて操作できる。
現在は、
- ダーク / ライトテーマ
- ノード検索
- Upstream / Downstream表示
- 経路追跡
- ズーム
- ガイド表示
- PNG出力
- SVG出力
- WebM出力
- 1200×630のShare Card
などが用意されている。
例えば以下の構成があった場合
Frontend → API → Database
「FrontendからDatabaseまでどの経路を通るのか」をを図上で追跡できる。
マニュアル等に貼るだけならSVGなどの画像にしてもいいし、誰かに説明するならHTMLをそのまま開いて見せてもいい。このあたりは普通の画像生成AIに図を描かせる場合との大きな違いと言える。
Codexで使ってみる
Archifyは現在、
- Cursor
- Claude Code
- Codex CLI
- OpenCode
などへの対応が案内されている。公式の基本インストールは以下。
npx skills add tt-a1i/archify -g
インストールせず一時的にCodexで試す方法もある。
npx skills use tt-a1i/archify@archify --agent codex
Codex Desktopでも使える？
Archify公式READMEの対応表には、現時点ではCodex CLIと記載されており、各社エージェントのCLI版で使うのが想定されているが、Desktop版でも利用可能。
とりあえず試すなら、Archifyをプロジェクトの
.agents/skills/archify/
へ配置して、そのプロジェクトをCodex Desktopで開く方法が分かりやすい。あとはCodexに、
Archifyを使用してこのプロジェクトの構成図を作って
と頼むだけでいい。
自作アプリの構成図を作成
こちらは自作の画像縮小・減色・色調整のできるアプリである。これの構成図を作らせてみた。
6分半ほどかけて以下の出力となった。（もっと複雑な構成だと何往復もするケースがあるらしい）
htmlなので拡大したり検索したりとSVGやPNGなどでは不可能な操作が可能。
Before / After 比較もできる
Archifyにはアーキテクチャの変更比較機能も存在する。
2つの構成を、Before / Delta / After として比較し、
- Added
- Removed
- Changed
- Moved
- Rerouted
といった変更を整理できる。大きくコードを変更したときなど、
変更前と現在を比較して、構造がどう変化したかArchifyで可視化してください。
といった使い方が考えられる。
Evidence機能
図の中のノードなどひとつひとつが元コードに紐付けられていて、それを確認することができる。AIが想像で描いたハルシネーションではなく実コードからの裏付けを証明できるようになっている。
Mermaidとの違い
図をコードから作るツールとしてはMermaidが有名。
これ↑はMermaidによる作図。
以下に差をまとめる。
| Mermaid | Archify | |
|---|---|---|
| 主な入力 | Mermaid記法 | 自然言語 / コードベース |
| 構造の理解 | 人間 | AI |
| 描画 | Mermaid | Archify Renderer |
| 修正 | 記法を書き換える | AIへ自然言語で指示 |
| コード解析 | 基本しない | AIエージェントが担当 |
| インタラクション | 比較的シンプル | 経路探索などあり |
Mermaidは、人間が図の構造を決めてコードで書くものだが、Archifyは、AIに構造そのものを考えさせて図にするもの、と言える。
また、Marmaidは自由記述なため内容が間違っていてもそのまま反映されるが、ArchifyはJSONを土台にして検証を重ねた上で描画しているので機械的に正しさが担保されている。
誰かに見せる場合などは共有先のサービスによって使い分けるのがいいだろう。
まとめ
Archifyは、Mermaidのようなコードによる作図と、AIエージェントによるコード理解を分離させたうえに組み合わせることで正確かつ便利な機構を実現したツールと言える。
既存コードの構成を整理したり、処理順を可視化したり、変更点の比較などいろいろなユースケースが考えられる。
ちなみに容量は数MB程度で導入コストがほぼゼロ。AIエージェントによる開発をしている人はぜひ試してみるのがいいだろう。
エージェントスキルは当然コードを書くためのものが多いが、今後はAIのやっていることを人間が理解するためのスキルも増えていきそうだ。