Claude Codeの図解プラグイン diagram-design を実際に動かした

Mermaidで構成図を出したはいいものの、そのまま設計書に貼るのはためらう。

線は斜めに走るし、箱は全部同じ形だし、どう見ても「ツールが自動で並べた図」に見えるからです。

diagram-designはそこを正面から潰しにきたプラグインで、GitHubのスターは執筆時点で23,373。

実際にClaude Codeへ入れて図を出させたら、返ってきたHTMLが想像よりだいぶ真面目でした。

Mermaidの図を、そのまま資料に貼れない

Mermaidが弱いのはレイアウトです。

ノードとエッジを書けば向こうが並べてくれるので書くのは速いんですが、並び方に意図が乗らない。

階層も強調も出ないので、箱が等間隔に並んで斜めの線が飛び交う、あの見慣れた絵になります。

diagram-designのリポジトリ説明文は、そこを名指しで書いています。

38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.

影なし、Mermaidの雑な出力なし。

ここまで言い切るなら中身は確かめておきたくなります。

diagram-designとは 38種類を単一HTMLで出す図解プラグイン

正体は、エージェントに図解の作法を叩き込むスキル集です。

アーキテクチャ、フローチャート、シーケンス、状態遷移、ER、タイムライン、スイムレーン、四象限、レーダー、ツリー、組織図、レイヤースタック、ベン図、ガント、Sankey、フィッシュボーン、Wardleyマップ、カンバン、ユーザージャーニー、依存グラフ、UMLクラス、DBスキーマ。

ここまでで22。

全部で38種類あります。

リポジトリは2026年4月にできたばかりで、ライセンスはMIT、フォークは1,436。

対応先はClaude Codeだけでなく、Codex、Factory Droid、Piまで含みます。

GitHub - cathrynlavery/diagram-design: 38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.

38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop. - cathrynlavery/diagram-design

github.com

Claude Codeへの導入は2行です。

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

入れたあとは「アーキテクチャ図を作って。フロント、バックエンド、DB、Redisキャッシュ」のように日本語で頼むだけです。

出てくるのは単一の.htmlファイルで、CSSは埋め込み、SVGはインライン。

外部から読むのはGoogle Fontsだけなので、ビルドもJSも要らずブラウザで開けばそのまま表示されます。

作者はBestSelf.coを創業し、littlemight.comで執筆しているキャサリン・レイヴァリー（Cathryn Lavery）さん。

デザインの文法がここまで細かいのは、その出自が効いていそうです。

出てきた図が手描きに見えるのは、座標が全部4の倍数だから

スキル本体を読んで一番面白かったのが、グリッドの規定でした。

フォントサイズは8、12、16、20、24、28、32、40のみ。

座標もノードの幅もギャップも、すべて4の倍数と決められています。

念押しの一文がこれです。

if a coordinate ends in 1, 2, 3, 5, 6, 7, 9 — fix it

座標の末尾が半端な数字なら直せ、と。

手で図を描く人は無意識にキリのいい位置へ吸着させますが、AIはそれをやりません。

4の倍数に丸めるだけで「自動生成された感じ」がかなり消えます。

結線のルールはさらに細かく、6本が必須指定になっています。

1. 直交結線が必須。角は半径8以上のクォーターアークで曲げる。斜めの線は自動的に不合格
2. 矢印ラベルは不透明マスクの上に置き、線との間に6〜10pxの隙間を常に空ける
3. 線同士を重ねない。交差はブリッジで飛び越え、平行に走る線は12px以上離す
4. 同じ辺に複数の線が入るなら、接続点を12px以上ずつずらして扇状に散らす
5. 終点ではない箱の裏を線が通らない
6. ラベルのマスクが、あとから描かれるノードに被らない

書体も役割で固定されています。

タイトルはInstrument Serif、ノード名はGeist sans、ポートやURLといった技術情報だけGeist Mono。

「Monoは技術的な内容にだけ使うもので、開発者っぽさを出すために全面採用するものではない」と明記されていて、ここは刺さりました。

やってはいけない例の一覧も用意されていて、その先頭が「ダークモード + シアンやパープルのグロー」です。

これがAI slop indicator、つまりAI生成物の目印として扱われています。

ここまで規定が細かいと「毎回律儀に守るのか」が気になりますが、python3 scripts/verify-geometry.py で幾何のチェックが機械的に入ります。

守らせる側の仕組みまでセットになっているのが、このプラグインで一番良いところです。

描く前に型を決めさせる3段ルーティング

図を頼むと、エージェントはいきなり描き始めません。

3段階で型を決めます。

意味が挙動や状態、ガバナンスに依存する場合は、まず7つのセマンティックパターンを読みにいきます。

どれにも当てはまらなければ、38種類から直接選びます。

そして描き始める前に、選んだ型、サイズ、削った要素を1メッセージで宣言していったん止まる。

ここで違うと思えば型ごと差し替えられるので、出来上がってから作り直す往復が消えます。

出力直前のチェックリストで効くのは、この項目です。

Would a table/paragraph work instead? (If yes, don't draw.)

表か段落で足りるなら描くな、と。

図解ツールが自分で「描かない」判断を持っているのは珍しいと思います。

同じ場所には「消せるノードはないか」「統合できる2つはないか」「消せる矢印はないか」「消せるラベルはないか」という削り込みの問いも並んでいます。

ノード9個という上限が、図を読めるものにしている

複雑さには数値の予算が切られています。

超えたら分割です。

全体像と詳細の2枚に割る、というルールになっています。

人が手で描くときは、面倒なので勝手にノードが減ります。

AIは面倒がないので、渡した情報を全部描いてしまう。

上限を先に固定してあるのは、そこへの対策として合理的です。

draw.ioとMermaidの図は、変換ではなく描き直す

手元に既存の図がある場合、読み込ませて描き直させられます。

/diagram-design:import-mermaid README.md --diagram=all
/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified

方針はRedraw — Never Convert。

専用スクリプトでノードとエッジ、コンテナといった構造だけを抽出して、元の座標や色、フォントは捨てます。

残すのは中身の関係だけです。

出力は4つのダイヤルで調整します。

フォーマット、サイズ、詳細度、そして読み手です。

詳細度はsimplifiedが7ノード以下、balancedが12以下、インポート時のみ使えるfaithfulが24以下。

読み手をexecutiveにすると用語の選び方だけが変わります。

さらに、何をまとめて何を落としたかを最後に報告してきます。

省略が起きるインポートで、省略の内訳が残るのは助かるところです。

配色を自社ブランドに寄せたい場合は、URLを渡すだけです。

onboard diagram-design to https://yoursite.com

トップページから主要な配色と書体を抜き出し、背景、文字、アクセント、リンクといった役割に割り当てて、コントラストがWCAG AAを満たすかまで確認してくれます。

抽出結果は~/.diagram-design/profiles/に名前を付けて保存でき、案件のディレクトリ直下に.diagram-designというマーカーファイルを置けばプロジェクトごとに配色が切り替わります。

受託で複数のブランドを行き来する人には、ここが一番効きます。

注意点はエクスポートです。

PNGとSVGの書き出しにはPlaywrightが要るので、pip install playwright && playwright install chromium を先に通しておく必要があります。

HTMLをそのままブラウザで開いてスクリーンショットを撮るなら不要です。

入れたあと最初にやるなら、手元の設計書で説明にいちばん困っている箇所を1つ選んで、そのまま図にしてくれと頼むのが早いです。

型はあちらが選んでくるので、こちらは何を伝えたいかだけ言えば済みます。