diagram-designスキルで、エージェントが作る構成図・フロー図を「影なし・色少なめ」の編集的なデザインにする
Claude Code や Codex が出す「角丸の箱と色だらけの矢印」の図を、デザインの原則を教えるスキルで直す。
どんな問題を解決するか / いつ使うか
技術ブログ、ドキュメント、スライド、製品デモに載せる構成図・フローチャート・シーケンス図・ガントチャートを、エージェントに作らせると一目でAI製と分かる見た目になる。そのまま人に見せられる図にしたいときに使う。
やり方
- 導入：
npx skills add cathrynlavery/diagram-design - 普通に頼む（例：「フロントエンド、バックエンド、DB、Redisキャッシュの構成図を作って」）。エージェントがレイアウトを計画し、SVGを埋め込んだ単体のHTMLを出す。SVG・PNGへの書き出しもできる。
- 便利な使い方：
- ブランド合わせ：自社サイトのURLを渡すと、図の色と書体をブランドに合わせる。
- 作り直し：既存のMermaid・draw.io・Excalidrawの図を渡すと、情報を保ったままレイアウトを組み直す。
- スキルが教える原則は「色は控えめに、余白をそろえ、きちんと整列し、不要な影や飾りを足さず、大事なものだけ目立たせる」。
注意点
- Gitでずっと保守する図ならMermaidのほうが向く。編集し続けたい構成図なら、draw.ioのXMLを出させるやり方（紹介者が以前に取り上げた next-ai-draw-io のMCP）もある。
- 対応する図は40種類以上（リポジトリの説明では45種類）。