Claude Code diagram-design スキル解説｜図解を自動生成

diagram-design は、Claude Code のプラグイン（Agent Skill）として動く図解生成ツールです。開発者 Cathryn Lavery 氏が公開するオープンソースのスキルで、キャッチコピーは "Editorial diagrams your designer won't hate."（デザイナーに嫌われない図解）。「アーキテクチャ図を作って」と自然文で指示するだけで、Claude Code が単一の自己完結HTMLファイルをインラインSVG付きで生成します。外部依存はなく、ブラウザで開けばそのまま表示されます。

Claude Code の Agent Skills の仕組みで配布されるプラグインの一つですが、Mermaid のような「コードから図を起こす」ツールとは生成方式も見た目の思想もかなり異なります。

リポジトリ README と、スキル定義ファイル skills/diagram-design/SKILL.md には、いずれも28種類のビジュアルタイプが掲載されています（GitHub の About欄では27種類・29種類の表記揺れがありますが、本記事では README と SKILL.md 記載の28種類を採用します）。代表的なタイプの一部を紹介します。

Architecture（構成図）
Flowchart（フローチャート）
Sequence（シーケンス図）
State Machine（状態遷移図）
ER・Data Model（ER図）
Timeline（タイムライン）
Swimlane（スイムレーン）
Quadrant（4象限マトリクス）
Tree・Org Chart（ツリー・組織図）
Venn（ベン図）
Pyramid・Funnel（ピラミッド・ファネル）
Consultant 2×2
Radar・Spider（レーダーチャート）
Bar・Line・Gantt・Scatter（各種チャート）
Data Flow・Treemap ほか

出力は常に単一の自己完結 .html ファイルです。CSSは内部に埋め込まれ、外部リソースは Google Fonts のみ。ビルド・JS不要で静止状態でも正しく描画されます。バリアントは3種類（minimal light＝既定、minimal dark、full-editorial）です。

もう一つの特徴がブランド適用機能です。企業サイトのURLを渡すとカラーパレットとフォントスタックを抽出し、paper／ink／muted／accent／link という役割にマッピングします。適用前には必ず差分を提示する設計で、既定スキンのまま黙って確定させることはありません。既存の draw.io や Mermaid の図を同じデザインシステムで描き直させることも可能です。

Claude Code ではプラグインマーケットプレイス経由でインストールします。

Codex でも同様のマーケットプレイス機構でインストールできます。

Pi（別のエージェントCLI）の場合は GitHub の URL を直接指定してインストールします。

なお Claude Code 側の必要バージョンはリポジトリ上に明示されていません。プラグイン機構自体が Claude Code の比較的新しい機能なので、導入前に手元の Claude Code を最新化しておくのが無難です。

呼び出し方はシンプルで、「アーキテクチャ図を作って」のように自然文で頼むだけです。明示的に指定したい場合、Claude Code では /diagram-design: プレフィックスを、Pi では /skill:diagram-design を使います。

ブランドを適用したい場合は、依頼に自社サイトのURLを含めます。スキルはそこからカラーとフォントを抽出し、適用案（差分）を提示するので確認してから確定させる流れです。生成物は単一の .html ファイルなので、ブラウザで開く、社内wikiに貼る、静的サイトに置くだけで共有できます。図解生成を自前のワークフローに組み込みたい場合は、Agent SDK 経由でスキルを呼び出す構成も検討できます。

SKILL.md が最も力を入れているのが、AI生成の図にありがちな「量産感」を消すための設計ルールです。冒頭の原則は「最も質を上げる操作はたいてい削除である」（The highest-quality move is usually deletion）。すべてのノードが独立した意味を持ち、すべての接続が情報を運ぶべき、という考え方です。

興味深いのが、目標密度を10段階中4に設定している点です。凡例なしで理解でき、かつ技術的に正確な密度として定義されています。複雑さの上限は既定で1図あたり9ノード・12本の矢印まで。超える場合は概要図と詳細図に分割します。アクセントカラーは最大2箇所、fragmentは最大2、スイムレーンのレーンは最大5という制約もあります。

スタイル規約も徹底しています。アクセントは1色のみ、フォントは3種類まで、罫線は1pxのヘアライン、影なし、border-radiusは最大10px——極めつけが「すべての座標・幅・間隔が4で割り切れる」という制約です。SKILL.md はこれを「AI生成っぽさを消している」と明記しています。4の倍数グリッドに揃えることで、人間が手で作ったような整った印象になり、AI生成特有の微妙なズレが消えるためです。デザイントークンは style-guide.md に集約され、既定パレットは white-smoke・jet-black・atomic-tangerineの3色です。

タイプ選びにも指針があり、まず図の意味的パターンを選び、最も近いビジュアルタイプへ落とし込みます。「構成要素と接続」なら Architecture、「判断ロジック」なら Flowchart、「時系列のやり取り」なら Sequence、という具合です。これは Agent Skills の仕組み がルールベースの判断を組み込める好例です。

「Mermaidっぽさを避けたい」というのが diagram-design を選ぶ主な動機になるため、代表的な図解手段と比較してみます。

整理すると、Mermaid は「テキスト管理・更新に強い」代わりに見た目が画一的になりやすく、diagram-design は見た目の作り込みとブランド適合を自動化します。頻繁に更新する構成図は Mermaid、資料やブログに載せる1枚絵は diagram-design、というのが基本の使い分けです。他ツールとの比較は Claude Code / Codex / Cursor / Copilot の比較記事 も参考になります。

向く：ブログ記事やドキュメントに載せる説明用の1枚図
向く：提案資料・経営会議向けの2×2マトリクスやピラミッド図
向く：既存の draw.io や Mermaid の図を統一デザインで作り直すとき
向く：自社サイトのブランドカラー・フォントに合わせた図解を素早く作るとき
向かない：UMLの記法に厳密に準拠する必要がある設計書
向かない：コードと連動して自動更新され続ける大規模なシステム構成図（Mermaidの方が差分管理向き）
向かない：README内などコードと同じ場所に軽量なテキストとして埋め込みたいケース
向かない：Figmaレベルの精緻な調整やインタラクションを伴うプロダクトデザイン