cathrynlavery/diagram-design

Claude Code や Codex などのコーディングエージェントに読ませるスキル（作業のやり方を書いた手引き書）で、中身は「図をどう描くか」の決まりごとと、図の型の見本帳。構成図・フローチャート・シーケンス図・状態遷移・データモデル・年表・四象限・組織図・サンキー図・ウォードレーマップなど、40種近い型が入っている（README は39と書き、スキル本体は40と書いている）。エージェントに「フロントとバックエンドとDBとキャッシュの構成図を作って」と頼むと、エージェントが型を選び、画像やスクリプトを外から読み込まない1枚の HTML（中身は SVG。書体だけは Google Fonts から読む）を書き出す。ビルドもスクリプトも要らず、ブラウザで開けばそのまま見られる。

効いているのは見本より決まりごとの厳しさのほう。影は付けない、角丸の箱を並べて済ませない、強調色は1色で1〜2か所だけ、書体は見出し・ラベル・技術的な注記の3種類、寸法は4pxの倍数、といった制約が決めてあり、「いちばん質の高い一手はたいてい削ることだ」という方針が冒頭に置かれている。さらに「そもそも図にすべきか」の判断も含まれていて、箇条書きや表で足りるもの、前後の比較、箱ひとつで終わるものは図にしないよう書かれている。

読み込み方にも工夫がある。エージェントが最初に見るのはスキルの名前と説明だけで、図を頼まれたら選び方の手引きを読み、型が決まったらその型の説明1つだけを追加で読む。全種類ぶんの説明を毎回読ませないので、エージェントの作業用の記憶を圧迫しない。ほかに、自分のサイトの URL を渡して色と書体を取り込ませる機能（文字が読める濃さかも自動で確かめる）、draw.io・Mermaid・Excalidraw で描いた既存の図を描き直す機能、PNG や SVG への書き出し機能が付いている。

資料や記事に載せる図を、AIに任せても見劣りしない形で出したいとき

AIに図を頼むと、影付きの角丸の箱が並んだ、どこかで見た感じの図になりやすい。型と制約が先に決まっているので、毎回の色選びや配置の手直しを減らせる。サイトの色と書体を取り込んでおけば、何枚描いても同じ見た目でそろう。

昔 draw.io や Mermaid で描いた図を、読める形に描き直したいとき

継ぎ足しで込み入った既存の図を読み込ませ、細かさ（ほぼそのまま／半分程度／ざっくり）と読み手（技術者向け／経営層向けなど）を指定して描き直せる。何をまとめ、何を落としたかの一覧も付くので、描き直しで情報が消えていないかを確かめられる。

好みがはっきりした道具である。 影なし・強調色1色・装飾を削る、という方向の美意識が決め打ちされている。にぎやかな図や、会社で決まった図の書式に合わせたい場合は、スキルの決まりごとを自分で書き換える前提になる。更新しても残ると README が明記しているのは、保存したサイトの色と書体の設定だけで、書き換えた決まりごとは、更新で上書きされることがあると書かれている。

書体は外部から読み込む。 既定の書体は Google Fonts のもので、読み込めない環境では別の書体に置き換わる。日本語の書体についての記述は README には無く、日本語の図でどう見えるかは導入前に試しておきたい。

PNG への書き出しは別の準備が要る。 画像への変換にはブラウザ自動操作の Playwright を使うため、HTML を出すだけのときより環境の用意が増える。

リポジトリの説明文は「38種」、README の一覧は39種と数が食い違っている。型は追加され続けているようなので、数は目安と考えたほうがいい。

ライセンスは MIT。