設計書に説明を足すほど、かえって全体像が分かりにくくなることがあるで。必要なのは箱を増やすことより、何と何の関係を伝えるか決めることやで。
cathrynlavery/diagram-design はAIエージェントに図解制作の指針を与え、HTMLとSVGのファイルを作るためのスキルやで。この記事は公式READMEとライセンスを確認した紹介で、実機での性能評価やないで。
図解の種類と見た目
システム構成図、比較図、業務フローなどを作る開発者や資料制作者に向いてるで。READMEでは複数の図の型を用意し、ブランドの色やフォントに合わせる流れも案内してるで。
独立した図形編集アプリやなくて、Agent Skillsを読めるAIツールで使う仕組みやで。出来上がる図の正確さは、入力する情報と確認作業にも左右されるで。
どんな図を頼んで、何を確認するん？
たとえば、架空の読書メモを保存するWebアプリを説明したいとするで。図解前に次の事実を決めておくんや。
- 利用者のPC内：ブラウザー。ここでメモを入力する。
- PCの外：Web/APIサーバーとデータベース。APIがメモを保存する。
- ブラウザーからAPIへメモを送り、APIからブラウザーへ保存結果を返す。APIとDBの間には保存と結果の往復がある。
下の手順のように図の種類、境界、矢印の意味を依頼すると、完成後に「ブラウザーからDBへ直接つながってへんか」「戻りの矢印が抜けてへんか」を点検できるで。上の文章は図の入力例であって、製品の実行結果やない。図の箱や色は生成のたびに変わることもあるで。
毎回白紙から手で描く場合も同じ確認は必要や。スキルを使うと、AIに図の型や見た目の指針を渡し、HTMLとSVGの図の下書きを依頼できるのが違いやで。速さや正確さが上がるかは測ってへん。関係そのものは入力と実資料を見比べ、人が判断してな。
公式READMEは、生成物の点検用にpython3 skills/diagram-design/scripts/self_check.py <file> --offlineを案内してるで。これはスキルのリポジトリを作業フォルダーに置いた場合の例や。設置場所やPythonの呼び方は環境に合わせて読み替えてな。自動検査が通っても、矢印の意味や実際の構成が正しいことまでは保証せえへん。この記事では生成と検査コマンドの実行は試してへんで。
今回のゴールと環境
架空のWebアプリの構成図をHTMLとして保存し、ブラウザーで読む。
確認した範囲：2026年10月24日に公式READMEや導入資料を読み直して、以下の手順を具体化したで。この改訂でアプリのインストールから最終結果までを実機で通したわけやない。成功の目安は、手元で試すときのチェックとして使ってな。
準備
ここではWindows 11 x64とPowerShellで進めるで。スタートで「PowerShell」を検索して開いてな。Node.js公式ダウンロードで24系LTS・Windows・x64のInstaller（.msi）を選び、ダウンロードしたファイルを開いて画面に沿って入れてな。入れ終わったらPowerShellを開き直すんや。
node --version
npm.cmd --version両方にバージョンが出たら準備OKや。以下ではWindowsのスクリプト実行ポリシーで止まりにくいnpm.cmdとnpx.cmdを使うで。インストール済みなら入れ直す必要はないで。
Git公式のWindows用ページからx64 Setupをダウンロードし、インストーラーの案内に沿って入れてな。PowerShellを開き直し、git --versionでバージョンが出ることを確認するんや。
今回はClaude Codeを使うで。使えるプランやAPIの支払いは別に必要やから、公式の準備・ログイン案内を先に確認してな。PowerShellで次を実行し、インストール後は新しいPowerShellを開いてな。
winget install Anthropic.ClaudeCodeWinGetがないときは、WindowsのMicrosoft Storeで「アプリ インストーラー」を入れるか更新してからやり直してな。次の確認でバージョンが出たら準備OKや。実際にclaudeを起動するんは、下の練習フォルダーを作ってからやで。初回起動は画面の案内でブラウザーにログインし、戻って入力欄が使えることを確かめてな。
claude --versionPowerShell用のコマンドと、Claude Codeの入力欄へ送る文は別やで。「Claude Codeで入力」と書いたブロックをPowerShellへ貼らんようにしてな。AIにファイルを読ませると、その内容が利用するサービスへ送られることがあるで。最初は以下の架空例だけで試そか。
New-Item -ItemType Directory -Force "$env:USERPROFILE\github-practice\diagram-design" | Out-Null
Set-Location "$env:USERPROFILE\github-practice\diagram-design"使い方
@'
<!doctype html><html lang="ja"><meta charset="utf-8"><title>練習フォーム</title><form><label>名前 <input name="name"></label><button>確認</button></form></html>
'@ | Set-Content index.html -Encoding UTF8練習用のindex.htmlを作ったで。プラグインの導入場所は次の案内を守ってな。
PowerShellで入力：
npx.cmd skills add cathrynlavery/diagram-designインストーラーではdiagram-designとClaude Codeを選び、今回は練習プロジェクトへのコピーとして入れるで。別のマーケットプレイス版を同時に入れんといてな。
Claude Codeが開いてるときは/exitで閉じ、PowerShellで同じフォルダーからclaudeを起動し直すで。フォルダーを信頼するか聞かれたら、今作った練習用の場所か確認してな。
Claude Codeで入力：
diagram-designを使い、利用者→Web画面→API→DBの構成図を作って。diagram.htmlとしてこのフォルダーに保存して。PC内と外部サービスの境界、矢印の向き、送るデータと返るデータを明記して。外部画像・フォントは使わず、単体で開けるHTMLにして。成功の目安：diagram.htmlを開いて4つの要素と矢印が見え、APIとDBの向きが依頼どおりか確認できることや。今回はindex.htmlは練習用の置き場で、図の入力は上の文章を使うで。
仕組みとデータの流れ
トラブルシューティング
| 困ったこと | 確認すること |
|---|---|
| 導入した機能が出ない | Claude Codeを再起動し、導入時に選んだ対象と保存先を確認してな。/pluginで使うプラグインの状態も確認するんや。 |
| 想定外のファイルを変えようとする | 実行前の提案を読み、練習フォルダーだけに対象を絞ってな。既存の仕事用ファイルにはそのまま適用せんといてな。 |
終了と再開
Claude Codeは入力中ならEscで作業を止め、/exitで終了できるで。続けるときは同じ練習フォルダーでclaudeを実行するんや。保存したHTMLはエクスプローラーからダブルクリックして表示を確認してな。
公式READMEと最新の導入案内も確認してな。配布版や外部サービスの変更で、手順が変わることがあるで。
接続関係の確認
下書きの段階で要素名と関係を確定させれば、見た目を調整するときに内容まで変わってしまう問題を減らす工夫になるで。
| これまでの作業 | 導入後に目指せる進め方 |
|---|---|
| 毎回ゼロから箱を配置し、資料ごとに色や文字の基準が変わる。 | 図の目的と見た目の条件を共有し、内容と表示を分けて確認する。 |
機密情報と外部通信
ブランド情報の取り込みや補助処理で何が送られるかは、公式PRIVACY.mdを確認してな。社内構成図を作るときは、ホスト名、認証情報、非公開の接続先をそのまま入力しないようにするで。
図には、事実、仮説、将来構想を混ぜないことが重要やで。元資料にない接続やサービスが増えていないかを確認し、配布用ファイルでは必要なフォントや画像への依存も点検してな。
公式資料と利用条件
本体はMITライセンスやで。既存のブランド素材やフォント、取り込む図の権利は別に確認してな。
確認日：2026年10月23日。本文は公式情報をもとに独自に構成し、図解は本記事用に制作したで。公式の画像・動画やREADMEの長文転載は使ってへんで。記事中の利用例・改善の比較は想定例であり、性能や成果の保証やないで。