Claude CodeにArchifyを入れて小さなAWS構成図を作ってみた

Claude Code向けArchifyを実際に動かしてみる

前回は、Claude Codeで使える図生成Skillの Archify を調べました。そのときはインストールせず、次は小さな図を一つ作るところで終えています。

今回は、その続きを実際に進めました。API Gateway、Lambda、DynamoDBだけの仮想構成を描き、検証と画面確認まで行います。

今回描く構成

最初から実際のリポジトリを読ませるのは避けました。コードの読み取りと図の見た目を同時に確認すると、問題の切り分けが難しくなるためです。

図にする経路は次の一つだけです。

利用者
  ↓ HTTPS
API Gateway
  ↓ 同期呼び出し
AWS Lambda
  ↓ PutItem
Amazon DynamoDB

利用者からAPI Gatewayまでは HTTPS です。API GatewayはLambdaを同期で呼び出します。LambdaからDynamoDBへは PutItem でデータを保存する想定にしました。

認証方式、VPC、エラー経路は入れていません。指定していない構成を補わない点も確認したかったためです。

Claude Code向けにArchifyを入れる

前回の記事に書いたコマンドを、プロジェクトのルートで実行しました。

npx -y skills add tt-a1i/archify \
  --skill archify \
  --agent claude-code \
  --copy \
  --yes

インストール先は次の場所です。

.claude/skills/archify/

ここで想定と違ったことがありました。

前回調べた時点では v2.16.0 を見ていましたが、今回取得されたのは 2.17.0-dev.1 でした。

上のコマンドはバージョンを固定していません。2026年9月7日時点の Archify README でも、v2.17.0-dev.1 は開発版と記載されています。

まず doctor を実行します。

node .claude/skills/archify/bin/archify.mjs doctor

私の環境では、Node.js、各図のrenderer、schema validator、表示確認用のruntimeがすべて ok になりました。

図の元になるJSONを作る

Archifyは、構成を直接HTMLへ書きません。最初に、構成要素と接続関係をJSONで定義します。

今回は architecture を選びました。構成要素は4個、接続は3本です。品質設定は showcase にしています。

{
  "schema_version": 1,
  "diagram_type": "architecture",
  "meta": {
    "title": "小さなサーバーレスAPI構成",
    "quality_profile": "showcase"
  },
  "connections": [
    {
      "from": "client",
      "to": "apiGateway",
      "label": "HTTPS"
    },
    {
      "from": "apiGateway",
      "to": "lambda",
      "label": "同期呼び出し"
    },
    {
      "from": "lambda",
      "to": "dynamoDb",
      "label": "PutItem"
    }
  ]
}

実際のJSONには、各要素の種類、配置、AWS Cloudの境界も記載しています。

全文は articles/diagrams/20260907-archify-small-aws.architecture.json に残しました。

検証してHTMLへ変換する

JSONを作ったら、先に検証します。

node .claude/skills/archify/bin/archify.mjs validate \
  architecture \
  articles/diagrams/20260907-archify-small-aws.architecture.json \
  --quality showcase \
  --json

最初の検証で9項目すべて通りました。線の交差、ラベルと線の重なり、短すぎる線分は0件でした。エラーと警告もありません。

次に deliver でHTMLへ変換します。

node .claude/skills/archify/bin/archify.mjs deliver \
  architecture \
  articles/diagrams/20260907-archify-small-aws.architecture.json \
  articles/diagrams/20260907-archify-small-aws.html \
  --quality showcase \
  --json

生成されたHTMLは約703KBでした。JavaScriptやSVGを含む単一ファイルなので、そのままブラウザで開けます。

生成された図

実際に生成された図がこちらです。

利用者からDynamoDBまで、意図した順番で並びました。API GatewayからDynamoDBまでが AWS Cloud の境界に入り、利用者は外側にあります。

今回の範囲にない認証やVPCも増えていません。

小さな構成ですが、入力と図を見比べやすいので、最初の確認としてはちょうどよいと感じました。

Chromeの表示確認で一度止まった

HTML生成後は、Archifyの visual-check も実行しました。

node .claude/skills/archify/bin/archify.mjs visual-check \
  articles/diagrams/20260907-archify-small-aws.html \
  --json

ここで一度詰まりました。

最初はChromeが SIGABRT で終了し、画面確認が失敗しました。

原因は図ではなく、実行環境からChromeを起動する権限でした。GUIを起動できる状態で同じコマンドを再実行すると通りました。

確認された画面サイズは、次の4種類です。

• 1440×900
• 1600×1000
• 1920×1080
• 2048×1320

横方向と縦方向のはみ出しは、すべてありませんでした。明るいテーマと暗いテーマのスクリーンショットも確認しました。

最初の表示は下側の余白が大きく見えました。

構成要素を増やすのではなく、viewBox と縦位置だけを一度調整しています。情報を足して空白を埋めなかったのは、仮想構成の前提を変えたくなかったためです。

日本語の図でも操作部分は英語だった

前回の記事で気になっていた言語表示も確認できました。

タイトル、構成要素、補足カードには日本語を使えます。

一方で、Legend、Light、Present、Export など、Viewerが持つ操作部分は英語でした。

日本語を指定すれば画面全体が日本語になるわけではありません。

小さく始めたことで確認しやすかった

今回は、構成要素を4個に絞りました。そのため、入力した接続関係と生成結果を一本ずつ確認できました。

showcase の検証が通ったことは、線やラベルの配置に問題がないことを示しています。

一方で、構成自体が正しいことを証明するものではありません。

今回は私が決めた仮想構成なので、その違いも分かりやすく確認できました。

参考

• Archify README
• Archify Skill
• Claude Code Skills

ここまで読んでいただき、ありがとうございます。もしこの記事の技術や考え方に少しでも興味を持っていただけたら、ネクストのエンジニアと気軽に話してみませんか。

• 選考ではありません
• 履歴書不要
• 技術の話が中心
• 所要時間30分程度
• オンラインOK

エンジニアと話してみる