diagram-design：エージェントがブランドに沿って描く44種の編集級ダイアグラム
diagram-design は、Claude Code、Codex、Copilot、Cursor などで、図を自己完結した HTML と SVG の1ファイルとして自社ブランドで描くエージェントスキルである。44種類の図を備え、影も Mermaid も使わない。サイトから配色とフォントを取り込み、draw.io や Excalidraw から読み込み、PNG と SVG に書き出せる。MIT ライセンス。
開発者がコーディングエージェントに「アーキテクチャ図を描いて」と頼むと、多くの場合は Mermaid のコードが返り、影付きで灰色の箱とばらばらのフォントで描画される。cathrynlavery/diagram-design は、この小さいが現実的な不満に狙いを定めたリポジトリである。これはエージェントスキル（Agent Skill）であり、エージェントに図を自己完結した HTML と SVG の1ファイルとして描かせる。ダブルクリックで開け、利用者自身のブランドに従う。プロジェクトは44種類の図を備えると述べ、標語は率直で、影なし、Mermaid 的な粗い出力なし、である。README には Trendshift のバッジもあり、開発者の間で注目されていることがうかがえる。
使い方は意図的に軽い。利用者は自然な言葉で頼む。たとえば「フロントエンド、バックエンド、データベース、Redis キャッシュを含むアーキテクチャ図」や、「第2四半期の案件を影響と労力で並べた四象限図」である。エージェントが図の種類を選び、計画を述べ、.html ファイルを1つ書く。導入も npx skills add cathrynlavery/diagram-design の1行で済む。対象は Agent Skills を読める環境すべてで、README は Cursor、Claude Code、Codex、GitHub Copilot、Gemini CLI、Cline、Windsurf、Amp を挙げている。特定の1社に縛られない設計であることが、注目すべき第一の理由である。
第二の理由はブランドの取り込みである。利用者がエージェントに「diagram-design を自分のサイトに合わせて」と伝えると、スキルがそのサイトの配色とフォントを取得し、以後に生成するすべての図がサイトと揃う。これにより、図のスタイルは会話ごとの使い捨てのプロンプトから、再利用できる恒常的な設定に変わる。コンテンツ担当やデザイン担当にとって、色の指定を毎回プロンプトに書くよりはるかに確実である。README は draw.io、Mermaid、Excalidraw からの取り込みと、PNG と SVG への書き出しも案内している。古い資産を捨てずに済み、完成した図を文書やスライドに載せられる。 配布方法にも注目したい。Claude Code ではプラグインマーケットプレイス経由で入れると、更新と /export-diagram、/import-mermaid、/profile、/doctor といったスラッシュコマンドが使える。skills CLI による単独導入は Agent Skill 本体のみで、これらのコマンドは含まれず、更新は npx skills update diagram-design を手動で実行する。選んだ環境のディレクトリが複数になる場合、CLI はシンボリックリンクを勧める。正本を1つ置き各ディレクトリへリンクするので、1回の更新ですべてに届く。--copy を付ければ環境ごとの独立した複製になる。開発者モードを使えない Windows のようにリンクが使えない環境では、複製に切り替えて結果を報告する。複数環境で最も起きやすいバージョンのずれを、作者が考えて設計したことがわかる。
信頼と出所についての README の書きぶりは控えめである。公式ビルドはこのリポジトリからのみ提供される。プラグインディレクトリの掲載を行うのは作者 Cathryn Lavery 氏の会社 LittleMight であり、他の名前での掲載は非公式の複製だと明記している。PRIVACY.md には、スキルがネットワークへ送る内容が一覧になっている。ライセンスは MIT で、継続的インテグレーションとバージョンのバッジも付く。エージェントがコードベース内で実行するスキルである以上、出所の表明とネットワーク動作の開示は、企業が導入前に必ず確認すべき最低限の条件である。 私たちの評価はこうである。diagram-design の価値は、作図ツールがもう1つ増えたことではない。設計上の制約を、エージェントが呼び出せるスキルとして包んだ点にある。出力は HTML と SVG の1ファイルなので、バージョン管理に載せ、差分をレビューでき、外部の描画サービスにも依存しない。リスクも明確である。44種類の実際の品質は、利用者がプロジェクトのギャラリーで自ら判断する必要がある。ブランドの取り込みは、対象サイトのスタイルが整っているかに左右される。スキルのエコシステムは変化が速く、環境ごとの挙動が完全に同じとは限らない。まずはアーキテクチャ図やシーケンス図のような最もよく使う二、三種類を描き、現行の Mermaid の流れと比べてから、全体への展開を決めることを勧める。
Sources
FAQ
diagram-design とは何で、Mermaid とどう違うのか。
独立した作図アプリではなく、エージェントスキルである。エージェントがスキルを読み、自己完結した HTML と SVG の1ファイルを書き出す。ダブルクリックで開ける。影を使わずブランドに合わせる点を強調し、既定の Mermaid 風の出力を避ける対象と位置づけている。Mermaid からの取り込み経路もあり、既存の図を移せる。
どのエージェント環境に対応し、どう導入するのか。
README は、Agent Skills を読める環境ならどれでも使えるとし、Cursor、Claude Code、Codex、GitHub Copilot、Gemini CLI、Cline、Windsurf、Amp を挙げている。共通のコマンドは npx skills add cathrynlavery/diagram-design である。Claude Code ではプラグインマーケットプレイスからも入れられ、更新とスラッシュコマンドを使える。
チームが採用前に確かめるべき点は何か。
まず出所とプライバシーを見る。公式ビルドはこのリポジトリのみで、PRIVACY.md にスキルがネットワークへ送る内容が書かれている。次に、構成図やシーケンス図など二、三種類を現行の手順と比べる。44種類の品質は、プロジェクトのギャラリーで自分で判断する。