Diagram Designとは？
Diagram Design は、Cathryn Lavery が自身の会社 LittleMight の名義で公開しているエージェントスキルで、平易な言葉の依頼を、インライン SVG を含む 1 つの HTML ファイルとして書かれた図に変えます。アーキテクチャ図、フローチャート、シーケンス図、状態遷移図から、4 象限図、ツリーマップ、分解したアクソノメトリック図まで 45 種類の図に対応し、それぞれに minimal light、minimal dark、full-editorial のバリエーションがあります。スタイルは固定されています。1px の細線、影なし、重要な 1 つか 2 つの要素だけに使うアクセントカラー 1 色、そしてすべての座標が 4px グリッド上にあります。
ウェブサイトへのオンボーディングを頼むと、エージェントはトップページを取得し、配色とフォントの組み合わせを抽出し、WCAG AA のコントラストを確認して、以降のすべての図が参照するスタイルガイドにトークンを書き込みます。名前付きのプロファイルで、複数の顧客のブランドを分けて管理できます。既存の draw.io、Mermaid、Excalidraw のファイルを描き直すこともでき、Figma 用の SVG やスライド用の PNG をエクスポートできます。
`npx skills add cathrynlavery/diagram-design` で任意の Agent Skills ホストにインストールできるほか、Claude Code、Codex、GitHub Copilot、Factory Droid、Qoder、Pi、Claude Cowork のプラグインとしても使えます。
Diagram Designは使う価値があるか？
公開する予定のものであれば、Diagram Design は越えるべき基準となる図のスキルです。その理由は、機能一覧よりもギャラリーを見れば分かります。リポジトリは 2026 年 4 月に作成され、GitHub のスターは約 62,200 です。skills.sh は CLI 経由のインストールを 21,200 と数えていますが、これにはプラグインのマーケットプレイスは含まれません。タグ付きのリリースは ありませんが、毎日メンテナンスされており、プラグインのマニフェストは 2026 年 10 月 27 日にバージョン 2.6.136 に達しました。
効いているのはデザインのルールです。Lavery の前提は、モデルは内容をすでに理解しており、欠けているのはセンスだけだというもので、スキルはそのセンスを書き出しています。目標の密度は 10 段階の 4、予約されたアクセントカラー、4px グリッドで、要素の重なりや切れを CI で確認します。ブランドのオンボーディングは、見た目以上に重要です。それ以降のすべての図が、サイトの背景、行動喚起ボタンの色、フォントを使い、ブランドカラーが 9 から 12px のラベルサイズでコントラストの基準を満たさないときは、コントラストチェックがより暗い値を提案します。
古い図を抱えるチームにとって実用的な利点は、取り込みのコマンドです。draw.io、Mermaid、Excalidraw のファイルは 3 段階の詳細度（faithful は 24 ノードまで、balanced は 12 まで、simplified は 7 まで）のいずれかで描き直され、取り込みのたびに、何を統合し何を落としたかの台帳が最後に出力されます。README はコストについて率直です。出力はモデルに依存し、同じプロンプトでも 2 回でレイアウトが変わることがあり、プルリクエストでレビューできる編集可能なソースはありません。スプリントごとに変わるアーキテクチャのドキュメントには、README 自身が言うとおり、今も Mermaid の方が適しています。
組み込まれた摩擦もあります。初回のゲートで、新しいプロジェクトごとにオンボーディングについて尋ねるために一時停止します。人には合っていますが、無人の実行を止めてしまいます（issue #262 で回避策が提案されています）。PNG のエクスポートには Playwright と Chromium が必要で、図はデフォルトで Google Fonts からフォントを読み込みます。システムフォントを指定しない限り、これが図の行う唯一のネットワークリクエストです。技術的なアーキテクチャ図を対象とする fireworks-tech-graph と比べると、Diagram Design ははるかに多くの種類を扱い、ブランドに合わせられます。anatomy は、アイソメトリックでインタラクティブな 1 つの形式をより深く掘り下げています。
真価を発揮する場面
毎週会社のブログを書く創業者
ありきたりの角丸の箱ではなく、サイトの他の部分と調和する図を記事に加える
ブログの URL に対してオンボーディングを一度実行し、記事ごとに 4 象限図やピラミッド図を依頼して、HTML かエクスポートした SVG を埋め込みます。費用はモデルのトークンだけで、Lavery が述べる 30 分の Figma 作業の代わりになります。
複数の顧客を担当するコンサルティング会社のソリューションアーキテクト
各顧客の古い draw.io の図を、その顧客の色でスライドにする
顧客ごとにプロファイルを保存し、各プロジェクトに `.diagram-design` マーカーを置いて、`/diagram-design:import-drawio file.drawio --size=slide-16x9 --detail=simplified --audience=executive` を実行します。忠実度の台帳に何がまとめられたかが載るので、顧客に見せる前に確認する価値があります。
エンジニアリングハンドブック向けにシステムを文書化するプラットフォームチームのリーダー
公開するハンドブックのページ用に、仕上がりの良いアーキテクチャ図を作る
平易な言葉でアーキテクチャ図かシーケンス図を依頼し、`/export-diagram --svg-only` で SVG をエクスポートします。チームがスプリントごとに編集する図は Mermaid のソースのままにしておいてください。再生成するとレイアウトが変わることがあり、差分を取れるものがありません。
導入前に確認すること
- 導入
- 任意の Agent Skills ホストでは `npx skills add cathrynlavery/diagram-design`。Claude Code でスラッシュコマンドと更新を使うには、`/plugin marketplace add cathrynlavery/diagram-design` の後に `/plugin install diagram-design@diagram-design` を実行します。PNG のエクスポートには `pip install playwright && playwright install chromium` が必要です。
- 連携
- Claude Code、Codex、GitHub Copilot、Cursor、Factory Droid、Qoder、Pi、Gemini CLI、Cline、Windsurf、Amp、Kiro、OpenCode、Claude Cowork。draw.io、Mermaid、Excalidraw を取り込み、スライド、文書、SNS、印刷のサイズで HTML、SVG、PNG をエクスポートします。
- データとプライバシー
- プライバシーポリシーによると、サーバー、アカウント、分析、テレメトリはありません。生成されたファイルはデフォルトで Google Fonts を読み込むため、閲覧者の IP アドレスが Google に送られます。システムフォントのオプションを使えば、ネットワークリクエストはすべてなくなります。ブランドのオンボーディングは、指定したサイトだけを取得します。MIT ライセンスです。
- 大規模利用時のコスト
- チームの規模を問わず無料です。費用は図の作成と描き直しのたびにかかるモデルのトークンです。これを標準として採用するチームも、すでに持っているエージェントのシート以外に支払うものはありません。
- 制限
- 未解決の issue とプルリクエストは約 45 件で、大半は新しい図の種類と、Mermaid のインポーターやレイアウトの検証機能の修正です。出力の質はモデルに依存し、インストールしたスタイルガイドへの編集は、保存したプロファイルや編集可能なクローンを使わない限り、更新で上書きされることがあります。
良い点
- 一貫した編集品質のスタイルで 45 種類の図
- ウェブサイトから配色とフォントを取り込み、コントラストも確認
- draw.io、Mermaid、Excalidraw のファイルを描き直せる
- アクセシブルな SVG を含む自己完結した HTML。MIT ライセンス
気になる点
- 差分を取ったりドラッグしたりできる編集可能なソースがない
- 同じプロンプトでも異なるレイアウトになることがある
- 初回のスタイルのゲートが無人の実行を中断する
- PNG のエクスポートには Playwright と Chromium が必要
おすすめの人
記事、スライド資料、ドキュメントで図を公開し、それを自分のブランドに合わせたいライター、創業者、エンジニア。
Diagram Designの代替
Diagram Design：よくある質問
- Diagram Designは使う価値があるか？
- Diagram Design はエージェントに欠けているセンスを与え、その図は生成されたものではなく出版物のように見えます。その代償として、出力は差分を取ることもドラッグして動かすこともできません。 評価は5点満点中4.3点です。
- Diagram Designの料金は？
- 無料のオープンソース（MIT）です。費用はエージェントのモデル利用料だけです。
- Diagram Designの欠点は？
- 差分を取ったりドラッグしたりできる編集可能なソースがない; 同じプロンプトでも異なるレイアウトになることがある; 初回のスタイルのゲートが無人の実行を中断する; PNG のエクスポートには Playwright と Chromium が必要.
- Diagram Designは誰に向いているか？
- 記事、スライド資料、ドキュメントで図を公開し、それを自分のブランドに合わせたいライター、創業者、エンジニア。
- チームや本番環境でDiagram Designを使うと費用はいくらか？
- チームの規模を問わず無料です。費用は図の作成と描き直しのたびにかかるモデルのトークンです。これを標準として採用するチームも、すでに持っているエージェントのシート以外に支払うものはありません。
- Diagram Designは企業データを扱っても安全か？
- プライバシーポリシーによると、サーバー、アカウント、分析、テレメトリはありません。生成されたファイルはデフォルトで Google Fonts を読み込むため、閲覧者の IP アドレスが Google に送られます。システムフォントのオプションを使えば、ネットワークリクエストはすべてなくなります。ブランドのオンボーディングは、指定したサイトだけを取得します。MIT ライセンスです。
- Diagram Designの代わりになるものは？
- 当サイトでレビューした中で最も近い代替はfireworks-tech-graph, Anatomy 、 Anthropic Skillsです。
回答確認日：2026年10月28日