Diagram Design ── 本物のデザインシステムを備えたエージェントスキル

AI が生成する図は、どれも同じ顔をしている。あの見た目だ。角の丸い箱、どこかに紫から青のグラデーション、全部にドロップシャドウ、箱の縁からわずかに浮いた矢印、そして「デフォルトです」と叫んでいるフォント。プレスリリースの視覚版である。理屈の上では伝わる。だが、誰も読みたくない。

Diagram Design は Cathryn Lavery によるエージェントスキルで、その見た目への正面切った攻撃だ。README のキャッチコピーは珍しいほど率直である。自己完結した HTML + SVG ファイル 1 枚、あなたのブランドで、45 種類の図、影なし、Mermaid のいい加減さなし。

最後の一言がこの記事の主張だ。このプロジェクトは図の生成を賢くしようとしているのではない。出力を、センスのある人間が作ったように見せようとしている。

実際に何が出てくるのか

欲しい図を説明すると、エージェントがインライン SVG を埋め込んだ HTML ファイルを 1 枚書き、あなたはそれをダブルクリックする。ビルド工程も、レンダリングパイプラインも、サービスへの依存もない。ファイルはオフラインで開き、5 年後も同じ見た目でいる。

収録範囲は本当に広い。アーキテクチャ図とアーキテクチャ差分図、デプロイ図、依存関係グラフ、UML クラス図、データベーススキーマ、フローチャート、シーケンス図、状態機械、スイムレーン、データフロー。さらにチャート一式（棒、折れ線、散布、ツリーマップ、レーダー、極座標、ウォーターフォール、ヒートマップ、サンキー）と、構造的な形式（ツリー、組織図、レイヤースタック、ベン図、ピラミッド、メダリオン）。戦略と計画には二次元象限チャート、ワードリーマップ、ガントチャート、タイムライン、カンバン、ストーリーマップ、ユーザージャーニー。空間表現のための分解軸測図まである。

どの種類にも 3 つの静的バリアントが付く。ミニマルライト、ミニマルダーク、そしてフルエディトリアル仕上げだ。小さな矛盾をひとつ指摘しておく。リポジトリのタイトルは 44 種類と言い、本文は 45 種類と言い、ギャラリーの番号は 01 から 44 まで振られている。自分のグリッドにここまで執着するプロジェクトに、誤字がある。そういうこともある。

これを成立させている部分、つまりルール

労力はデザインシステムに注がれていて、しかもそれは形容詞ではなく数字で語られる。

図 1 枚につきアクセントカラーは 1 色。アクセントは 1 つか 2 つの要素に注意を集めるために使う。それ以外はすべてインク、ペーパー、抑えたグレーだ。このルール 1 つで、AI の図を 2016 年のダッシュボードみたいに見せていた視覚的ノイズのほとんどが消える。

書体は 3 つ、それぞれに役割がある。タイトルとイタリックの注釈には Instrument Serif。ノード名には Geist のサンセリフ。ポート、URL、フィールド型といった技術的なサブラベルには Geist Mono。技術的な細部を等幅で組むというのは、現場のデザイナーが反射的にやることだが、ジェネレーターは決してやらないことだ。

4 ピクセルグリッド。座標、幅、間隔、パディングの値はすべて 4 で割り切れなければならない。作者はこれが「AI っぽくならない」ための鍵だと言う。その通りで、理由は微妙だ。ズレが証拠になるのである。箱の幅が 137 ピクセルだということには気づかない。何かがおかしいと感じるだけで、なぜとは言えない。

ヘアライン、影なし、角丸は 10px まで。影が普通やっている仕事をボーダーにやらせる。しかも図が面の上に置かれた物理的な物体であるかのようなふりをせずに。

情報密度の目標は 10 段階で 4。ほとんどのチームが抵抗し、ほとんどの読者が感謝するルールだ。掲げられている原則は、質が最も高い一手はたいてい削除だ、というもの。

アクセシビリティも後付けではない。SVG の出力には role="img"、aria-labelledby、title/description 要素が付き、動きを減らす設定が尊重され、WCAG AA のコントラスト（本文 4.5:1、重要なマークは 3:1）が CI で強制される。既定のパレットは、スモーキーホワイトの紙にジェットブラックとタンジェリン。

ブランドの取り込みは隠れた主役だ

ウェブサイトの URL を渡す。色とフォントを拾って、paper、ink、muted、accent、link という意味の役割に割り当てる。そして「忠実度のレシート」を渡してくる。何を推測し、どこで勘を働かせたかを書いたものだ。

後半のほうが、スクレイピングそのものよりずっと重要だ。ブランド抽出ツールはたいていパレットを渡して黙る。推論を見せてくれるからこそ、間違ったオレンジで 40 枚の図を作る前に直せる。

取り込み経路も用意されている。Mermaid、draw.io、Excalidraw のファイルを指定すれば、その図をこのデザインシステムで描き直す。つまみは 4 つ、フォーマット、サイズ、ディテール、読み手。それに忠実度の台帳が付く。Mermaid だらけの wiki を移行するというのは、まさにこれが作られた用途だ。

向いているところ、向いていないところ

インストールはわざと退屈にしてある。Agent Skills を読めるものなら何でも npx skills add cathrynlavery/diagram-design。Claude Code、Codex、GitHub Copilot、Factory Droid はプラグインマーケットプレイスのコマンド。Cursor、Cline、Gemini CLI、Windsurf、Amp、Zed、Kiro、OpenCode はシンボリックリンクかサブディレクトリのインポート。エクスポート、インポート、プロファイリング、doctor チェック用のスラッシュコマンドもある。

作者は限界について心地よいほど明確で、その限界は妥当な線を引いている。

品質はモデルに依存する。同じプロンプトでも 2 通りのレイアウトが出うる。手にしているのはテンプレートの穴埋めではなく、生成された幾何だからだ。編集できるソースはない。ドラッグできるキャンバスも、プルリクエストで diff を取れるテキストもない。毎週変わるドキュメントには Mermaid を勧めている。diff が取れて、GitHub がネイティブに描画する。それは美しさより価値がある。

さらに彼女は、もっと多くのツール作者がすべき問いを立てる。読み手はこの図から、1 段落から得るより多くを得られるだろうか。もし「図」がラベルの付いた箱 1 つなら、文を書けばいい。2 つのリストを比べているなら、表を使えばいい。ターミナル向けの ASCII アートが欲しいなら、これはその道具ではない。

出力はファイルであって、サービスではない

ここに、年を追うごとに賢く見える設計判断がある。成果物はインライン SVG を埋め込んだ HTML ファイル 1 枚で、オフラインで開く。アカウントも、埋め込みスクリプトも、来四半期に API を値上げしかねないベンダーへの依存もない。リポジトリに入れ、チケットに添付し、印刷し、ロックダウンされたノート PC を使うクライアントにメールで送ればいい。

図解 SaaS が買収されてから劣化していくのを見てきた人間にとって、これは小さな機能ではない。成果物とサブスクリプションの違いだ。

代償は、キャンバスを編集するようには編集できないことだ。ドラッグ＆ドロップも、レイヤーパネルも、undo スタックもない。レイアウトが違うなら、生成し直すか座標を手で直す。そしてすべてが 4px グリッドに載っているから、手直しは生き延びられる。自由形式のドキュメントならそうはいかない。

10 分で図のスキルを見極める方法

扱いにくい形のものを頼んでみる。明らかに重要なノードが 1 つ、それを支えるサービスが 3 つ、そして全員が忘れているデータベースが 1 つあるシステム。良い出力は、その唯一のアクセントで重要なノードを示し、残りを後ろに下げる。悪い出力は全部に色を塗る。優先順位がないとき、全部に色を塗るのがジェネレーターのすることだからだ。

次に、同じ図を 2 回頼む。出力が完全に同じなら、見ているのはテンプレートだ。違うなら、見ているのは生成で、そちらのほうが誠実であり、使うモデルが重要になる理由でもある。

最後に数字を見る。隙間を数える。4 の倍数でなければ、制約は無視されている。そして設計システムの残りもおそらく同じだ。

本当の論点

このプロジェクトには、スタイルプロンプトで終わっていた版もありえた。「エディトリアルな感じで、影なし、ミニマルに」。その版は一貫性のないゴミを生んだだろう。プロンプトは 40 ノードのアーキテクチャ図と接触したところで持ちこたえないからだ。

Diagram Design が面白いのは、センスを機械が検査できる制約として書いている点だ。4 で割り切れる、アクセントは 1 色、書体は 3 つ、コントラスト比、影なし。美学はモデルの中ではなく、仕様の中にある。

これはスキル自体より持ち運びのきく考え方だ。図でもスライドでも表紙でもサムネイルでも、ビジュアルを生成するものなら何を使っていても、「デザインされている」と読める出力と「生成された」と読める出力の差は、たいてい誰かが書き留めた短いルールのリストでしかない。