提案資料やシステムの仕様書に構成図を載せるとき、draw.ioやFigmaを開いて四角と線を延々と引く作業に時間を取られていませんか。Archifyの使い方を押さえると、いま使っているClaude Codeに「このリポジトリの構成を図にして」と日本語で頼むだけで、アーキテクチャ図やフロー図が自己完結型のHTMLとして生成され、PNGやSVGで書き出せます。ArchifyはClaude Skillとして配布されるオープンソースのスキルで、Claude CodeやCodex CLI、Cursorなどに図解担当を1人足す感覚で使えます。この記事では、Archifyが何ができるツールか、Claude Codeへのインストール手順、自然言語で構成図を生成する使い方、手書きのMermaidやdraw.ioと何が違うか、そして筆者がサイト制作の提案資料づくりや自社ツールのドキュメント整備でどう使っているかまで、コマンド例つきでまとめます。
この記事の要点
- ArchifyはオープンソースのClaude Skillで、リポジトリや自然言語の説明から、アーキテクチャ・ワークフロー・シーケンス・データフロー・ライフサイクルの5種類の図を自己完結型HTMLで生成します。ライセンスはMITです。
- Claude Codeへは
npx skills add tt-a1i/archify -gで導入でき、~/.claude/skills/に入ります。以降は「このリポジトリの構成を図にして」とチャットで頼むだけで図が出ます。 - PNG（クリップボード）やSVG、共有カードで書き出せます。筆者は引き継いだサイトの構成を提案資料に起こす用途と、自社ツールのドキュメント自動化で使い分けています。
01Archifyとは｜Claude Codeで作れる5種類の図
Archifyとは、コードベースやシステムの説明から、対話しながら図を起こせるオープンソースのスキル（Claude Skill）です。GitHubのtt-a1i/archifyで公開されており、Claude CodeやCodex CLI、Cursorなどのエージェントに追加すると、会話の中で構成を説明するだけで、対話しながら仕上げられるインタラクティブな技術図が出力されます。生成物は1つのHTMLファイルにまとまった自己完結型で、そのままブラウザで開けます。
作れるのはアーキテクチャ図など5種類
Archifyが対応する図は、公式リポジトリによると次の5種類です。用途に応じて描き分けられるため、システム構成からAPIの呼び出し順、状態遷移まで1つのスキルでまかなえます。
| 図の種類 | 何を表すか | 使う場面の例 |
|---|---|---|
| Architecture（アーキテクチャ図） | システム構成・コンポーネントの関係 | クラウド構成、サービス全体像 |
| Workflow（ワークフロー図） | 処理の流れ | CI/CD、リクエストの流れ |
| Sequence（シーケンス図） | 時系列のやり取り | API呼び出し、認証フロー |
| Data Flow（データフロー図） | データの流れ・変換 | ETL/ELT、データ処理 |
| Lifecycle（ライフサイクル図） | 状態の遷移 | ジョブの状態、注文ステータス |
出力は自己完結HTML・PNGやSVGで書き出せる
Archifyが生成する図は、そのままブラウザで開けるインタラクティブな自己完結型HTMLです。公式リポジトリによると、PNG（クリップボードへコピー）やSVG、動きを含む形式、1200×630の共有カードとして書き出せます。画像は高解像度で出力できるため、資料に貼っても粗くなりにくいのが特徴です。すでにMermaidで書いた図があれば、それを渡して整えさせることもできます。
対応するエージェント・ツール
Archifyは特定のエディタ専用ではありません。公式リポジトリによると、Cursor・Claude Code・Codex CLI・opencode・Raven・Claude.ai（Skillsのアップロード）に対応し、コミュニティ経由でDeepSeek Harnessでも動きます。手元のAIコーディング環境に合わせて選べます。Claude Skillそのものの仕組みはClaude Skills API 使い方｜スキルの作成・バージョン管理を解説で整理しています。
02Archifyの導入方法｜Claude Codeへのインストール
導入はコマンド1つで終わります。ここからは、Claude Codeに入れる手順と、手動で配置する方法を紹介します。
npx skillsでインストールする
Claude Codeに入れるときは、次のコマンドを実行します。Node.jsが必要です。
npx skills add tt-a1i/archify -gこれでArchifyが~/.claude/skills/に追加されます。-gはグローバル（ユーザー全体）への追加です。公式リポジトリによると、配置先は~/.claude/skills/のほかプロジェクト直下の.claude/skills/でも認識されます。Codex CLIに入れる場合も同じコマンドで、配置先が~/.agents/skills/になります。
Cursorに入れるときのコマンド
Cursorを使っている場合は、エージェントを明示して追加します。
npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yesコマンドを使いたくない場合は、配布されているスキルのフォルダを~/.claude/skills/のようなスキルディレクトリへ手で置く方法もあります。いずれの場合も、置き場所さえ合っていれば認識されます。
うまく認識されないときの確認
追加したのにArchifyが呼ばれないときは、配置先がそのエージェントの読むスキルディレクトリと一致しているかをまず確認します。Claude Codeなら~/.claude/skills/archify、Codex CLIなら~/.agents/skills/archifyという形でフォルダができているかを見ます。グローバルとプロジェクトのどちらに入れたかで読み先が変わる点にも注意します。
03Archifyの使い方｜自然言語で構成図を生成する
インストールが終われば、あとは会話で頼むだけです。専用の記法を覚える必要はありません。
リポジトリから構成図を起こす
いちばん手早いのは、対象のリポジトリを開いた状態で、Archifyを名指しして図を頼む方法です。たとえば次のように指示します。
Use archify to map this repository's runtime architecture.日本語で「archifyを使って、このリポジトリの構成をアーキテクチャ図にして」と頼んでも通じます。Archifyがコードを読み、コンポーネントの関係を図に起こしてHTMLで出力します。
図の種類を指定して仕上げる
「データの流れを見たい」「API呼び出しの順番を見たい」といった目的があるときは、図の種類を指定します。「このETL処理をデータフロー図にして」「ログイン処理をシーケンス図にして」のように頼むと、その形式で描き分けてくれます。出来上がった図に対して「この部分をまとめて」「色を分けて」と対話で直せるのが、手書きにはない利点です。
画像やSVGでエクスポートする
生成されたHTMLを開くと、PNGやSVGとして書き出すボタンがあります。資料に貼るならSVG、チャットやスライドに素早く載せるならPNGが向いています。共有カード（1200×630）で出せば、そのままOGP画像のようなサムネイルにも使えます。
04手書きMermaidやdraw.ioとの違い【比較表】
これまで構成図は、draw.ioやFigmaで手で描くか、Mermaidの記法を書いて生成するのが一般的でした。Archifyの最大の違いは、図を「描く」のではなく、コードや説明から「生成させる」点にあります。まず3つの方法を並べて整理します。
| 項目 | draw.io・Figmaで手描き | Mermaidを手で記述 | Archify |
|---|---|---|---|
| 作り方 | 四角と線を手で配置 | 専用記法を書く | 自然言語・リポジトリから生成 |
| 修正 | 手で描き直す | 記法を書き換える | チャットで対話修正 |
| 出力 | 画像・独自形式 | 静的な図 | インタラクティブHTML＋PNG/SVG |
| コードとの同期 | 手作業で更新 | 手作業で更新 | リポジトリを読ませて再生成 |
| 前提 | 作図ツール | Mermaid対応環境 | Claude Codeなどのエージェント＋Node.js |
この違いでアウトプットがどう変わると想定されるか
手描きやMermaidは、図の見た目を細かく作り込める代わりに、線を引く・記法を覚える手間が図の数だけ積み上がります。Archifyは説明やコードから図を起こすため、想定として、構成図を用意する工程の大半が「図を描く時間」から「出てきた図を確認して直す時間」に置き換わると考えられます。とくにコードが更新されるたびに図を作り直す運用では、リポジトリを読ませて再生成できる分、図と実装がずれたまま放置されにくくなると見込めます。筆者が提案資料の構成図を起こす作業では、下描きが数分で出てくるため、白紙から線を引くより着手のハードルが下がりました。
05サイト制作・提案資料でArchifyを使う【実践】
制作会社の実務では、引き継いだサイトや既存システムの構成を、クライアント向けの提案資料や仕様書に図として載せる場面が多くあります。筆者はこの下描きにArchifyを使っています。手順はシンプルです。
- 対象のリポジトリをClaude Codeで開く。
- 「archifyを使って、このサイトの構成をアーキテクチャ図にして、SVGで書き出せる形にして」と頼む。
- 出てきた図を確認し、「この外部連携をまとめて」「フロントとバックを色分けして」と対話で整える。
- SVGで書き出し、提案資料や仕様書に貼る。
白紙のキャンバスに線を引く代わりに、まず下描きが出てくるため、構成図に取りかかる心理的なハードルが下がります。仕様が固まっていない初期の打ち合わせでも、たたき台の図をその場で直しながら見せられるのが利点です。Web制作で使うMCPサーバーの選び方はweb制作のMCPサーバーおすすめ5選｜工程別の選び方でまとめています。
06自社ツール開発のドキュメント自動化に使う【実践】
自社の効率化ツールを開発していると、スクリプト群やAPI連携の全体像を説明する図を、更新し続けるのが負担になります。この記事では、この図の生成をArchifyに任せています。処理の流れが変わったら、リポジトリを読ませて図を作り直し、READMEや社内ドキュメントに貼り替えるだけです。
データフロー図をドキュメントに組み込む
たとえば、複数のAPIをつなぐ自動化スクリプトの流れを図にするなら、次のように頼みます。
Use archify to draw a data flow diagram of the scripts in this repo, and export as SVG.出てきたデータフロー図をSVGで書き出し、リポジトリのdocs/に置いてREADMEから参照します。処理を変えたら同じ指示で作り直せるため、図と実装のずれが起きにくくなります。定期実行の仕組みづくりや社内ツールの土台は、MCPサーバーの自作｜Python/TS SDKで独自ツールを作る手順とあわせて設計すると、連携部分まで一枚の図で共有できます。
状態遷移はライフサイクル図で共有する
ジョブの状態や注文ステータスのように「状態がどう移るか」を伝えたいときは、ライフサイクル図を頼みます。文章で状態遷移を説明するより、図にした方が認識のずれが減ります。社内向けのツールなら、この図を仕様の入り口に置いておくと、あとから触る人が全体像をつかみやすくなります。
07Archifyを使うときの注意点
便利な一方で、使う前に前提をいくつか押さえておきましょう。まず、ArchifyはNode.jsが動く環境が必要で、対応するエージェント（Claude Code・Codex CLI・Cursorなど）の上で使う設計です。単体のアプリではないため、まずこれらのAIコーディング環境を用意します。
次に、生成される図はコードや説明の読み取りに基づくため、そのまま完成品として使うのではなく、内容が正しいかを人が確認する前提で使います。とくに複雑なシステムでは、細部の関係が意図とずれることもあるので、対話で直して仕上げます。最後に、公開資料に載せるときは、図に社外へ出せない内部の名称や認証情報が含まれていないかを確認してから書き出してください。オープンソースのMITライセンスで配布されている点も、社内利用の可否を判断するときに押さえておくとよい情報です。
FAQよくある質問
Archifyは無料で使えますか？
はい。ArchifyはMITライセンスのオープンソースとして公開されており、スキル自体は無料で使えます。動かすためにClaude CodeなどのエージェントとNode.jsの環境が必要です。
ArchifyはClaude Code以外でも使えますか？
使えます。公式リポジトリによると、Cursor・Claude Code・Codex CLI・opencode・Raven・Claude.ai（Skillsのアップロード）に対応しています。手元のAIコーディング環境に合わせて選べます。
Archifyでは何種類の図が作れますか？
アーキテクチャ・ワークフロー・シーケンス・データフロー・ライフサイクルの5種類です。システム構成から状態遷移まで、目的に応じて描き分けられます。
作った図はどの形式で書き出せますか？
PNG（クリップボードへコピー）やSVG、動きを含む形式、1200×630の共有カードで書き出せます。資料に貼るならSVG、素早く共有するならPNGが向いています。
すでにあるMermaidの図は使えますか？
使えます。Mermaidの記法で書いた図を渡して、Archifyで整えさせることができます。ゼロから作るだけでなく、既存の図の作り直しにも使えます。
08まとめ：Archifyを使うかの判断基準
Archifyを入れるかは、「構成図を手で描く時間を、確認して直す時間に置き換えたいか」で決まります。提案資料やドキュメントに図を載せる機会が多いなら、npx skills add tt-a1i/archify -gで入れて、手元のリポジトリを1つ図にしてみるのが失敗しない進め方です。まずはアーキテクチャ図を1枚生成し、対話で直す感触が自分の作業に合うか確かめてください。図解を含むスキルの仕組みはClaude Skills API 使い方、Web制作でのツール選びはweb制作のMCPサーバーおすすめ5選でまとめています。
09出典
- tt-a1i「archify（GitHubリポジトリ・README）」https://github.com/tt-a1i/archify
- Archify 公式サイトhttps://tt-a1i.github.io/archify/