ネット上では「也无风雨也雾晴」と名乗り、本名は涂少坤。専科に進学し、2年間兵役に就いた後、専科からの編入で重慶郵電大学に進みました。就職活動では、学歴を理由にバックグラウンドチェックで不採用になった経験もあります。その後、オープンソース作品で自分の力を証明する道を選びました。彼が開発したArchifyは、一言の指示からクリックできるアーキテクチャ図を作成できます。
Archifyは無料です。費用がかかるのは、背後で使うモデルです。安定した図を描くなら、APIYIのclaude-opus-5-5がおすすめです。
このチュートリアルの概要：
- 目標：Claude CodeにArchifyをインストールし、中国語で一言指示するだけでWebサイトのリクエストフローを示すインタラクティブなアーキテクチャ図を作成し、さらに一言で図を編集します。
- 所要時間の目安：20〜30分（登録とチャージの時間を除く）。
- 前提条件：Claude CodeやCursorなどを使ったことがあり、Node.js（
npxの実行に必要）がインストールされたパソコン、ブラウザー、APIYIのアカウントがあること。 - 難易度：入門レベル。コードを書く必要も、設定ファイルを手作業で編集する必要もありません。
也無風雨也霧晴とArchify：押さえておきたいポイント
| ポイント | 説明 |
| 作者 | 涂少坤。ハンドルネームは「也無風雨也霧晴」。専門学校を卒業後、兵役を経て、大学編入を果たした |
| Archifyとは | オープンソースで無料のAgentスキル。ライセンスはMIT |
| 費用がかかる部分 | スキルを実行するAgentが使うモデル |
| おすすめモデル | APIYIで利用できるclaude-opus-5-5 |
| 生成物 | 単体のHTMLファイル。ブラウザーで開けば操作できる |
涂少坤とは：専門学校、兵役を経て、オープンソースで自分を証明
以下の経歴は、主に本人が2026年7月15日にXへ投稿した長文に基づいています。2018年の大学入試後、彼はコンピューター応用技術を学ぶ専門学校へ進学しました。最初の1年はかなり無気力に過ごしたといいます。その後、兵役に就き、2年間部隊で過ごしました。入隊したばかりの頃は体重が約53kgで、こなせない訓練も多かったそうです。通信の専門分野に配属されてからは、所属部隊を代表して集団軍の通信競技会に参加し、1位を獲得しました。
除隊後は学校に戻り、大学への編入を目指しました。70人以上の受験者から合格者はわずか6人。退役軍人枠で1位となり、重慶郵電大学のソフトウェア工学科に進学しました。卒業時には同年代より3歳年上でした。オンライン講座で1か月あまりフロントエンドを学んだ後、インターン先を探し始めます。その後、ByteDanceのFeishuを受けて2回の面接を通過しましたが、身元調査の段階で大学編入の経歴が理由となり、採用には至りませんでした。秋採用で重慶の懂車帝を受けた際には、人事面接で自ら大学編入について話し、その後連絡はありませんでした。後日、一次面接の面接官から「申し訳ありません」と一言届いたそうです。その夜、彼は外に出て5km走りました。
彼は、失敗するたびに学歴のせいにしたわけではありません。猿輔導の4回目の面接では問題を解けず、不採用になっても仕方がないと、自ら書いています。その後、杭州の西湖大学でインターンをした際、また人事から学歴について聞かれました。彼は「生まれが恵まれないことは恥ではない」と答え、そのときは選考を通過しました。Manusの面接では、学歴で不利な人も作品やオープンソースプロジェクトで自分を証明できる、という話が出ました。彼はその時点ですでに同じことを考えていたそうです。本人の言葉を借りれば、オープンソースを始めた当初の目的は、特別立派なものではなく、履歴書に自分を証明できるものを加えたかったからでした。Archifyのリポジトリが作成されたのは2026年4月15日です。
量子位が2026年9月に掲載したインタビューでは、16歳で学校を辞め、自動車修理を学び、工場で働いた経験も紹介されています。この部分はインタビューによるもので、本人の長文投稿には書かれていません。本人はBilibiliにも「学校を辞めて工場に入ってからGitHubランキング1位になるまで、AIが私の人生を変えた！」という動画を投稿しています。公開日は2026年9月14日で、URLはhttps://www.bilibili.com/video/BV1cGe56cEHo/です。こちらで確認したのはタイトル、投稿日、投稿者、タグのみで、動画全編を細かく確認したわけではありません。タイトルにある「GitHubランキング1位」は、2026年9月1日に本人がXへ投稿したスクリーンショットに対応しています。GitHub Trendingの全言語週間ランキングで1位になったときの画像であり、現在も1位であることを示すものではありません。
以下は動画の再生ページです。ページには再生回数12.3万回、いいね1700件以上と表示されています。再生回数が十数万回に達しており、本人が投稿したこの動画はかなり話題になっています。
彼の経歴から、私たちが伝えたいことは3つです。
- 学歴は変えられません。彼がその後にしたのは、誰もが開いて使える作品として、自分の能力を形にすることでした。
- 彼は失敗をすべて学歴のせいにはしていません。問題を解けなかったときは、自分が解けなかったと認めています。
- 話題になることと、実際に使われることは別です。彼が気にかけているのは、自分の作ったものを誰かが使っているかどうかです。
Archifyとは？
公式の中国語READMEによると、Archifyはオープンソースで無料のAgentスキルです。アイデアや質問、計画をAI Agentに伝えると、クリックして操作したり、共有したりできるインタラクティブなHTMLを生成します。事前にコードリポジトリを用意する必要はありません。Agentにリポジトリを読み込ませれば、ソースコードを根拠として示すアーキテクチャ図も作れます。ノードに「SRC」ラベルを付けたり、特定のコミットに固定したりすることも可能です。図のほかに「explainer」と呼ばれる成果物もあります。まず結論を示し、質問ごとにパネルを分けた1ページで、表や手順、図などを含められます。
一方で、Archifyが対応しないことも明確です。汎用的な図の編集ツールでも、Mermaidのテーマでもありません。Mermaidの自動解析、汎用的な自動レイアウト、ホスティング型の共有サービス、WYSIWYGエディターは、現時点では製品の対象外です。モデルの販売やAPIキーの発行も行っていません。公式は、第三者が提供する有料プランはArchifyとは無関係だと明記しています。現在の安定版はv3.2.0です。skills.shのインストール数バッジには「130K+」と表示されていますが、これはプロジェクト側が公表している数字で、こちらでは実測していません。
プロジェクト側は、宣伝用の画像も作成しています。中央にはリポジトリtt-a1i/archifyがあり、隅には「今週のGitHub Trendingで1位」、その下には「ひと言で、インタラクティブなアーキテクチャ図を生成」と書かれています。画像に記載された順位やStar数は、画像内に書かれた情報にすぎません。当時の宣伝として見るべきで、現在も1位であることを示すものではありません。
仕組みを簡単に説明すると、まずAgentが決まった形式のJSONを書き、検証します。検証に通ったものだけがHTMLとして出力されます。図を修正するときは、関連する部分だけを変更し、図全体を作り直すことはありません。図に表示される上流・下流の関係や経路は、図に記述した関係に基づきます。操作できるからといって、実際のトポロジーが自動で作られるわけではありません。つまり、「図の上でたどれる」ことは「本番環境でも実際にそのように動いている」ことを意味しません。
Archifyの10種類の図、どう選ぶ？
| 図の種類 | 向いている内容 | 例 |
|---|---|---|
| Architecture | コンポーネント、サービス、ストレージ、システム境界 | 自社サイトがどのようなサービスで構成されているか |
| Workflow | プロセス、承認、ツール呼び出し | 経費申請から振り込みまでの流れ |
| Sequence | 1回の呼び出しの順序 | ログイン時、フロントエンド・バックエンド・データベースのどれが先に動くか |
| Data Flow | データの流れ | 注文データが注文からレポート作成までどう流れるか |
| Lifecycle | 状態、再試行、最終状態 | タスクがキューに入ってから成功または失敗するまで |
| ERD | テーブルとフィールド | ユーザーテーブルと注文テーブルの関係 |
| Class | クラスとインターフェース | 決済モジュールにどのようなクラスがあるか |
| Tree | 親が1つの階層構造 | 会社の組織図 |
| Timeline | 時系列 | 3か月間のプロジェクトのマイルストーン |
| Waterfall | 1回のリクエストにかかった時間 | APIのどの処理に時間がかかっているか |
後半の5種類は、バージョン3.1から追加されました。TimelineとWaterfallの公式サンプルには、説明用のデータが使われているものもあります。ログや分散トレーシングのデータに基づいている場合に限り、図に表示された時間を実際の所要時間として扱えます。
Archifyの使い方：5ステップ
- Agentで使うモデルを設定します。この記事では、APIYIのclaude-opus-5-5をClaude Codeに接続します。
- コマンド1つでArchifyをインストールします。
- 描きたいものを、自分の言葉でAgentに伝えます。
- 生成されたHTMLをブラウザーで開きます。
- 会話を続けながら図を修正し、納得できたら画像またはPDFとして書き出します。
Archify クイックスタート：claude-opus-5-5 を接続して、最初のインタラクティブなアーキテクチャ図を作る
ステップ 1：Archify 用の APIYI トークンを用意する
まず、トークンがどこで消費されるのかを確認しておきましょう。Archify のリポジトリ自体にモデル利用料はかかりません。トークンを消費するのは、この Skill を実行する Agent です。リポジトリの読み込み、JSON の作成、検証に失敗したあとの修正などに、Agent に設定したモデルが使われます。つまり、用意するのは Archify の会員登録ではなく、モデルの利用枠です。
APIYI のコンソールを開き、新しいトークンを作成します。利用可能なモデルとして claude-opus-5-5 を選び、トークンをコピーしてください。まだ利用枠を購入しておらず、まず Opus を試してみたい場合は、記事末尾の「関連記事」にあるお試し利用の案内をご覧ください。
完了の目安：トークン一覧に新しいトークンが追加され、利用可能なモデルに claude-opus-5-5 が表示されている。トークン文字列もコピー済み。
ステップ 2：Claude Code にトークンを接続する（magpie のチュートリアルを参照）
APIキーを接続する手順は、この記事では繰り返し説明しません。公開済みの以下の図解チュートリアルに沿って設定してください：手順を追って解説：1つのキーであらゆる Agent を接続。オープンソースの magpie で API ゲートウェイをまとめて設定（Claude Code、Codex、Pi、Hermes を例に）。
設定時に覚えておく値は2つだけです。1つ目は、Claude Code で使う Anthropic 互換のエンドポイントが https://api.apiyi.com であること。末尾に /v1 は付けないでください。2つ目は、モデル名が claude-opus-5-5 であること。1文字でも間違えると model not found エラーになります。Codex などのツールでは OpenAI 互換のエンドポイント https://api.apiyi.com/v1 を使いますが、この記事では詳しく扱いません。Cursor を使っていて、Cursor 独自のサブスクリプションを利用している場合は、APIYI のトークンが必要ないこともあります。Archify の利用に APIYI が必須というわけではありません。
チュートリアルの手順を終えたら、Archify のインストールに進みましょう。
完了の目安：Claude Code で「こんにちは」と聞くと、401 や model not found のエラーが出ず、正常に返答がある。
ステップ 3：Archify Skill をインストールする
ターミナルを開き、次の公式コマンドを実行します。
npx skills add tt-a1i/archify -g
-g はグローバルインストールを意味します。インストール後は、どのプロジェクトディレクトリからでも利用できます。主な対応 Agent は Cursor、Claude Code、Codex CLI、OpenCode ですが、この記事では Claude Code を使います。インストールが終わったら、現在の Claude Code セッションを終了して、新しいセッションを開いてください。
完了の目安：コマンドが赤いエラーを出さずに終了する。新しいセッションで「Archify は使えますか」と尋ねると、Claude Code がこの Skill を認識する。
ステップ 4：Archify に一言伝えて、Webサイトのリクエストフローを描く
公式のサンプルをそのまま Claude Code に送ります。
Archify で Web サイトのリクエストフローを描いてください。ブラウザーから API にリクエストし、API はまず Redis を参照します。キャッシュにない場合は PostgreSQL に問い合わせ、結果をキャッシュに書き戻します。
Claude Code はまず JSON を作成し、次に検証を行い、最後に HTML ファイルを生成します。コードを会話に貼り付けるだけでファイルに保存しない場合は、「HTML を現在のディレクトリに保存してください」と追加で伝えましょう。生成された .html ファイルを見つけて、ダブルクリックするかブラウザーにドラッグして開きます。
完了の目安：ブラウザーに図が表示され、ブラウザー、API、Redis、PostgreSQL のノードが線でつながっている。ノードをクリックすると、その前後の関係を確認できる。
ステップ 5：一言で Archify のアーキテクチャ図を変更し、エクスポートする
図全体を説明し直す必要はありません。続けて一言伝えるだけです。
認証を追加し、キャッシュミスの経路を強調して、ライトテーマに切り替えてください。
Archify は関連する部分だけを変更し、図を最初から描き直すことはありません。変更後は、ライトとダークを含む4種類のスタイルに切り替えられます。また、PNG、WebP、JPG の縦長画像としてエクスポートしたり、PDF に印刷したりできます。HTML を同僚にそのまま共有すれば、相手も操作できます。ただし、図に外部サイトや地図へのリンクがある場合、それらを開くにはインターネット接続が必要です。
完了の目安：同じ図に認証関連のノードが追加され、キャッシュミスの経路が強調されている。全体がライトテーマに変わっている。
🎯 技術的なアドバイス：初めて使うときは、まず公式サンプルを実行して動作を確認し、そのあとで自分の業務内容に置き換えるのがおすすめです。問題が起きた場合に、環境設定が原因なのか、説明が複雑すぎるのかを切り分けやすくなります。
Archify で使うモデルの料金
以下は、この記事を執筆した日に APIYI の公開価格 API で確認した数値です。倍率1は、100万トークンあたり2米ドルとして換算しています。実際の価格は、APIYI のコンソールに表示される当日の価格をご確認ください。グループによって実際の料金が異なる場合があります。
| モデル | 入力 | 出力 | キャッシュ読み込み | キャッシュ書き込み | おすすめの用途 |
|---|---|---|---|---|---|
| claude-opus-5-5 | 4米ドル | 20米ドル | 0.20米ドル | 5米ドル | 複雑な図、リポジトリの読み込み、長い HTML |
| claude-sonnet-5-5 | 2米ドル | 10米ドル | 0.10米ドル | 2.50米ドル | 小さな概念図、簡単な変更 |
いずれも100万トークンあたりの料金です。claude-opus-5-5-thinking もあり、倍率は同じです。図を1枚作るのにいくらかかるかは、実測していないため、ここでは金額を示していません。1回の生成で消費するトークン数は、図の規模、リポジトリを読む必要があるか、検証に失敗して何回修正するかによって変わります。
Opus 5.5 を使わなくてもよいケース
公式が Claude Opus 5.5 の使用を必須としているわけではありません。Opus をおすすめしているのは、あくまでこちらの見解です。Archify は構造化 JSON や長い HTML を作成し、ときにはリポジトリ全体を読む必要もあるため、最上位のコーディングモデルのほうが形式のミスを起こしにくいからです。次のような場合は、claude-sonnet-5-5 など、より安価なモデルで十分なことが多いでしょう。
- 3、4個の枠で構成される小さな概念図で、関係が単純で、読み込むリポジトリもない。
- JSON がすでにできていて、スタイルを変えて再度エクスポートするだけ。
図が大きくなった場合や、リポジトリを読む必要がある場合、検証に何度も失敗する場合は、Opus に戻しましょう。2つのモデルをどう使い分けるかは、「関連記事」にある比較記事で詳しく紹介しています。
Archify のトラブルシューティング
| 症状 | よくある原因 | 対処方法 |
|---|---|---|
| インストール後、Agent が Archify を認識しない | 古いセッションを使っている。-g を付けていない。Node.js が正しくインストールされていない |
Claude Code を再起動する。-g を付けて再インストールする。ターミナルで node -v を実行し、バージョンが表示されるか確認する |
| HTML が開かない、または真っ白になる | コードが貼り付けられただけでファイルに保存されていない。ファイルが不完全。外部リンクにはインターネット接続が必要 | Agent に HTML をファイルとして保存するよう依頼する。ブラウザーで直接開く。ネットワークを確認する |
| 検証に失敗したと表示される | 説明が複雑すぎる、または関係に矛盾がある | 公式のエラーメッセージで問題箇所を確認し、修正は最大2回に絞る。それでも解決しない場合は、図を2つに分けるか、説明をより具体的にする |
| model not found | モデル名の入力ミス。エンドポイントの末尾に /v1 を付けている |
モデル名を claude-opus-5-5 にする。Anthropic のエンドポイント末尾から /v1 を削除する |
| 401 エラー、または利用枠不足の表示 | トークンのコピー間違い、無効化、残高不足 | APIYI のコンソールでトークンの状態と残高を確認する。トークンをコピーし直し、magpie のチュートリアルに沿って更新する |
Archify よくある質問
Q1：Archify は有料ですか？
Archify 自体は無料で、MIT ライセンスのオープンソースソフトウェアです。料金がかかるのは、Agent の背後で動くモデルのトークン利用分です。Claude Code に設定したモデルの料金が適用されます。
Q2：Opus や APIYI の利用は必須ですか？
どちらも必須ではありません。公式は特定のモデルを指定していません。claude-opus-5-5 をおすすめしているのは、こちらの見解です。小さな図なら Sonnet でも問題ありません。また、Archify の公式が APIYI と連携しているわけではありません。Cursor に付属するサブスクリプションを使っている場合は、APIYI のトークンがまったく必要ないこともあります。
Q3：コードリポジトリがなくても Archify を使えますか？
はい。日本語で説明するだけで使えます。リポジトリがある場合は、Agent に先に読み込ませて、ソースコードを根拠とする図を作成できます。その場合、ノードには SRC と表示されます。ただし、トークンの消費量は増えます。
Q4：HTML をほかの人に送っても、図を操作できますか？
はい。単独で動作する HTML ファイルなので、インタラクティブ機能もファイルに含まれています。図に含まれる外部サイトや地図へのリンクを開く場合のみ、インターネット接続が必要です。
Q5：図の経路をクリックしてたどれたら、実際の本番システムもそのとおりに動いているということですか？
いいえ。図の経路は、入力した関係に基づいています。実際の本番システムの動作を検証するものではありません。Waterfall などの図に表示される処理時間も、ログや分散トレーシングのデータに基づいている場合にのみ信頼できます。
まとめ：風雨も霧も晴れも乗り越えたArchifyが教えてくれること
涂少坤さんは学歴を変えることはできませんでした。そこで、自分の能力を誰でもインストールして使えるツールにしました。実際に使う際のポイントは次のとおりです。
- Archifyとは：オープンソースで無料のAgent Skillです。一言で指示するだけで、操作できるHTML図を生成できます。
- 費用がかかるのはどこ？：費用がかかるのはAgentの背後で動くモデルです。Archifyの会員登録は必要ありません。
- APIキーの設定方法：APIYIで新しいトークンを作成し、モデルにclaude-opus-5-5を選びます。Magpieのチュートリアルに沿ってClaude Codeに接続してください。接続先のURLに
/v1を付けないようにしましょう。 - インストール方法：
npx skills add tt-a1i/archify -gのコマンドを1つ実行するだけです。 - 使い方：自然な言葉で指示して図を作り、続けて一言指示して修正します。その後、PNGまたはPDFで書き出せます。
- 節約のコツ：小さな図の作成や再書き出しにはSonnetを使い、複雑な図を作るときだけOpusを使いましょう。
すぐに試してみたい方は、APIYI（apiyi.com）のコンソールで新しいトークンを作成し、公式のサンプル文を使って最初の図を生成してみてください。
この記事では複数の情報源を参照しています。情報の信頼性は、それぞれ異なります。
| 情報 | 出典 | 備考 |
|---|---|---|
| 機能、バージョン、10種類の図、インストール数130K+ | 公式README | プロジェクト側の発表 |
| 週間ランキング1位 | 作者が2026-09-01にXへ投稿したスクリーンショット | 当時のスクリーンショットであり、リアルタイムの順位ではありません |
| 専門学校、兵役、大学編入、就職活動の経験 | 作者が2026-07-15に投稿したXの長文 | 作者本人による説明 |
| 16歳での中退、自動車修理、工場勤務 | 量子位による2026年9月のインタビュー | メディアによるまとめ |
| モデルの料金 | APIYIの公開価格APIを記事執筆当日に確認 | コンソールの価格ページに当日表示されている金額が基準です |
任意：更新チェックとリポジトリのコマンド（一般の読者は読み飛ばして構いません）
Archifyは新しいバージョンを自動でインストールしません。更新通知を受け取りたい場合は、GitHubのリポジトリページで「Watch」→「Custom」→「Releases」の順に選択してください。インストール後のSkillは、頻度を抑えて更新をチェックします。チェックに失敗してもエラーにはならず、通知だけが表示され、自動でダウンロードされることはありません。アクセス先は`archify.si/skill-updates/archify/stable.json`だけで、ローカルのバージョン、プロジェクトの内容、ユーザー入力、APIキーがアップロードされることはありません。無効にするには、環境変数`ARCHIFY_UPDATE_CHECK_DISABLED=1`を設定してください。
リポジトリには`node bin/archify.mjs`のようなコマンドもありますが、主にコントリビューターがデバッグに使うものです。一般の読者が実行する必要はありません。詳しい使い方はリポジトリのREADMEを確認してください。
参考資料
- Archify公式リポジトリ（中国語README）：機能、インストール方法、対象範囲に関する説明
- リンク：
github.com/tt-a1i/archify - 備考：この記事の機能・バージョン情報は、こちらを基準にしています
- Archify公式サイト：プロジェクトのホームページ
- リンク：
archify.si - 作者のX投稿（2026-07-15）：作者本人による経験談
- リンク：
x.com/t20000622yy/status/2077425261856096720 - 作者のBilibili動画：「中退して工場に入ってからGitHubのトレンドで首位になるまで、AIが私の人生を変えた！」作者本人が公開
- リンク：
www.bilibili.com/video/BV1cGe56cEHo/ - 作者によるBilibiliのプロジェクト紹介動画：「目が覚めたら、自作のオープンソースプロジェクトがGitHub Trendingで世界1位になっていた」
- リンク：
www.bilibili.com/video/BV16MhA6pEMb/ - 量子位による2026年9月の記事：プロジェクトと開発者に関する記事。本文では一文のみを出典を明記して引用しています
- APIYIの公開価格API：記事執筆当日に確認
- リンク：
api.apiyi.com/api/pricing
