archifyとは何か JSON IRで図解を「検証可能」にするエージェントスキル
GitHub Trending JavaScriptで1位を獲得したarchify（tt-a1i/archify）を解説。エージェントがJSON中間表現を出力し、決定論的にHTML/SVGへコンパイルする仕組み、インストール方法、Mermaid・draw.io・Excalidrawとの違いを整理する。
archifyとは何か
archify（tt-a1i/archify）は、Cursor・Claude Code・Codex CLI・OpenCodeといったAIコーディングエージェント向けの「エージェントスキル」として配布されているNode.js製ツールで、AIエージェントが出力した型付きJSON中間表現（IR）を、決定論的な処理で自己完結HTMLのアーキテクチャ図・ワークフロー図・シーケンス図・データフロー図・ライフサイクル図に変換する。
何ができるか
対応する図の種類はアーキテクチャ図・ワークフロー図・シーケンス図・データフロー図・ライフサイクル図の5種類。出力はダーク/ライトテーマ対応・モーション付きの自己完結HTMLで、PNG（クリップボードコピー含む）・SVG・WebM・1200×630のシェアカードとしてもエクスポートできる。
- 対応図種: アーキテクチャ / ワークフロー / シーケンス / データフロー / ライフサイクル
- 出力形式: 自己完結HTML（ダーク/ライト・モーション付き）、PNG、SVG、WebM、1200×630シェアカード
- 対応クライアント: Cursor / Claude Code / Codex CLI / OpenCode
- 操作: ノード検索（/）、上流/下流のリーチ探索、ルート検証（R）、役割比較（L）、ガイド付きストーリー再生（P）
なぜ注目されたのか
archifyは2026年8月29日、GitHub TrendingのJavaScriptカテゴリで1位を獲得した。週間で約1万8,000スターを獲得し、本レポート作成時点（2026年8月31日）で累計スター数は約3万5,000に達している。生成AIエージェントが自律的にコードベースを読み、そのまま図を吐き出す用途と噛み合い、短期間で急速に採用が広がった形だ。
アーキテクチャ: なぜ「JSON IR→決定論的コンパイル」なのか
archifyの設計上の要点は、LLMに直接SVGやHTMLのマークアップを描かせない点にある。エージェントはあくまで型付きJSON IR（ノード・エッジ・役割・根拠などを構造化したデータ）を生成し、それをarchify本体（Node.jsのレンダリングエンジン）が決定論的にHTML/SVGへコンパイルする。LLMに直接描画コードを書かせる方式は、同じ入力でも出力のレイアウトや構文が毎回微妙に揺れ、崩れたSVGやリンク切れ、座標の重なりといった再現性のない不具合が起きやすい。JSON IRを間に挟むことで、入力データに対する出力を一意に固定でき、スキーマ・レイアウト・HTML/SVG構文・ルート・クリアランス（要素の重なりや余白）を機械的に検証できるようになる。
インストール / 料金
archifyはMITライセンスのオープンソースソフトウェアで、無料で利用・改変・再配布できる。README記載の標準インストールはグローバルインストールで、Cursorに明示的に導入する専用コマンドも用意されている。インストールせずに一度だけ試すコマンドもある。なお執筆時点でコア本体が要求するNode.jsのベースラインバージョンはREADMEに明記されておらず、コミュニティ連携（DeepSeek Harness経由の利用）ではNode ^22.19.0 || >=24.0.0 が必要と記載されている。
# グローバルインストール（推奨）
npx skills add tt-a1i/archify -g
# Cursorへの明示的な導入
npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes
# インストールせずに一度だけ試す（Codex CLIの例）
npx skills use tt-a1i/archify@archify --agent codex使い方 — 最短手順
Claude CodeやCursorでの最短ルートは、グローバルインストール後にチャット内でそのまま指示するだけだ。リポジトリを開いている必要はなく、システム構成を自然文で伝えれば、エージェントがJSON IRを生成し、archifyがそれをHTMLへコンパイルする。スキルのインストール自体はClaude Code の diagram-design スキルと同様、エージェントスキルの配布・実行という共通の仕組みに乗っている。
"Use Archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback."特徴的な機能
- source-evidence（根拠付きノード）: アーキテクチャ図のノードに SRC n という参照が付き、公開されたGitコミットに紐づく実ファイルへ飛べる
- architecture-delta（差分比較）: 検証済みの2つのスナップショットをBefore/Delta/Afterとして比較し、追加・削除・変更・移動・再配線を機械的な記録として提示する
- 決定論的な検証: スキーマ・レイアウト・HTML/SVG構文・ルート・クリアランスをチェックし、機械可読な修復レシートを出力する
既存ツールとの違い
図解ツールとしてはMermaid・draw.io・Excalidrawが広く使われており、Claude CodeのプラグインではClaude Code の diagram-design スキルもエディトリアルな図解生成を担う。archifyのREADMEは自らを「汎用の作図エディタでもMermaidのテーマでもない」と位置づけており、検証可能性とGit連携に重心を置く点が他ツールとの主な違いになる。
| ツール | 誰が描くか | 出力形式 | 検証の有無 | バージョン管理との相性 | 日本語ラベル | 学習コスト |
|---|---|---|---|---|---|---|
| archify | エージェントがJSON IRを生成、本体が決定論的にコンパイル | 自己完結HTML/SVG/PNG/WebM/シェアカード | あり（スキーマ・レイアウト・構文・ルート・クリアランス） | 高い（source-evidenceでGitコミットに直接ひも付け） | README未確認（要検証） | エージェント経由が前提でコマンド操作は最小限 |
| Mermaid | 人間がテキスト記法を手書き、または生成AIが記法を出力 | Markdown埋め込み用SVG中心 | なし（構文エラー以外は目視確認） | 低い（コミットとの自動ひも付けなし） | 対応（フォント依存で崩れる場合あり） | 記法の習得が必要 |
| draw.io | 人間がGUIで手作業配置 | 独自XML／PNG／SVG | なし | 低い（バイナリ的な差分になりがち） | 対応 | GUI操作に慣れが必要 |
| Excalidraw | 人間が手描き風にGUIで作図 | 独自形式／PNG／SVG | なし | 低い | 対応 | 直感的だが構造化データにはならない |
| diagram-design（Claudeスキル） | エージェントが生成しClaude側でエディトリアルなHTML/SVGに整形 | HTML/SVG/PNG | 目視ベース（ブランド・体裁のレビュー中心） | 中程度 | 対応 | Claude Codeでの導入が前提 |
向いているケース / 向かないケース
archifyが向いているのは、コードベースやシステム構成を機械的に検証しながら図として残したい場面だ。逆にデザイナーが自由に手を加えたい場合や、archify自身が明言する通り汎用の作図エディタとしての用途には向かない。
- 向いている: エージェントにコードベースを読ませてアーキテクチャ図を自動生成したい／Gitコミットと図の根拠を紐づけたい／構成変更のBefore/Afterを機械的に比較したい
- 向かない: 完全に自由なレイアウトで手描き調に仕上げたい／Mermaidのように文書内へテキストで手軽に埋め込みたい／エージェント環境を使わずGUIだけで完結させたい
実務での使いどころ
中小企業のシステム開発文脈では、社内システムの構成図をエージェントに自動生成させて引き継ぎ資料に添付する、要件定義の合意形成でBefore/Afterの構成差分を提示する、といった使い方が考えられる。source-evidenceでノードが実ファイルのコミットに紐づくため、口頭説明だけでは伝わりにくい「この図の根拠はどこか」を関係者と共有しやすい。
注意点・制約
archifyはスター数が短期間で急増した直後のツールであり、破壊的変更やコマンド体系の見直しが今後入る可能性がある。導入前にREADMEの最新版を必ず確認したい。また、エージェントスキルという性質上、外部から取り込むスキル自体の安全性を確認する視点も欠かせない。この点はNVIDIA SkillSpector（エージェントスキルのセキュリティ）で扱われているような、スキル配布のセキュリティ検証の議論とも関係が深い。スキルの配布・実行形式そのものについてはAgent Plugins 1.0 標準の動向もあわせて確認しておくと理解が深まる。
FAQ
archifyは無料で使えますか。
はい。MITライセンスのオープンソースソフトウェアで、無料で利用・改変・再配布できます。
archifyを使うにはリポジトリを手元に用意する必要がありますか。
必須ではありません。READMEのクイックスタート例では、グローバルインストール後にチャットで構成を自然文で伝えるだけで図を生成できるとされています。
どのAIエージェント環境で使えますか。
README記載の対応クライアントはCursor・Claude Code・Codex CLI・OpenCodeです。
Mermaidと何が違いますか。
archifyはREADMEで自らを『汎用の作図エディタでもMermaidのテーマでもない』と位置づけています。エージェントが生成したJSON中間表現を決定論的にコンパイルし、スキーマやレイアウトを機械的に検証できる点が異なります。
図の根拠（source-evidence）とは何ですか。
アーキテクチャ図のノードにSRC nという参照が付き、公開されたGitコミットに紐づく実ファイルを開ける機能です。
構成変更の差分を確認する機能はありますか。
architecture-deltaという機能で、検証済みの2つのスナップショットをBefore/Delta/Afterとして比較し、追加・削除・変更・移動・再配線を提示します。
導入前に注意すべき点はありますか。
スター数が短期間で急増した直後のツールであり、コマンド体系や仕様が今後変わる可能性があります。導入前に最新のREADMEを確認することを推奨します。
この記事に関連する無料ツール（登録不要・その場で結果）
お気軽にご相談ください
お問い合わせ