Diagram Design
技術・プロダクト情報を、自己完結HTML内のインラインSVGとCSSで図解する。
文章や表より図の方が関係、順序、構造を理解しやすい場合にだけ使う。
作成手順
- 図が文章や表より適切か判断する。単純な一覧、前後比較、一要素だけの図には使わない。
- 状態、制御、リスクが主題なら、先に意味上のパターンを選ぶ。
- 主軸に合う図の型を一つ選ぶ。型を混ぜず、必要なら概要図と詳細図へ分割する。
- 出力先に応じてサイズ、詳細度、対象読者、形式を決める。
- 描画前に、図の型、サイズ、複雑さを抑えるために省く内容を短く示す。
- 静的な自己完結HTMLを既定とし、動きが理解を助ける場合だけアニメーションを使う。
- 出力前に、接続線、ラベル、アクセシビリティ、境界からのはみ出しを検査する。
対応する図
- アーキテクチャ、IT現状、フローチャート、シーケンス、状態遷移
- ER・データモデル、タイムライン、スイムレーン、組織図、ツリー
- 四象限、レーダー、ループ、入れ子、レイヤー、ベン図、ピラミッド
- 棒、折れ線、ガント、散布図、ツリーマップ
- データフロー、メダリオン、データ基盤統合、セキュリティマトリクス
編集規則
- 一つのノードは一つの明確な概念を表す。
- 強調色は焦点となる一、二要素だけに使う。
- 影を使わず、境界線と余白で階層を表す。
- ノードが同じ軸上にない接続は、斜線ではなく角丸の直交線にする。
- 複数の線を重ねず、同じ辺へ接続するときは接点を分散する。
- 接続ラベルと線の間に余白を取り、ラベルがノードへ重ならないようにする。
- 図の密度は低めに保ち、九ノードを超える場合は分割を検討する。
- SVGには解決可能なタイトルと説明を付ける。動きを使う場合も静的な完成状態を提供する。
既存図の再描画
draw.ioとMermaidは座標や配色をそのまま変換せず、要素、関係、グループ、方向を保って描き直す。
詳細度は、忠実、標準、簡略から選び、統合または省略した要素を最後に記録する。
公式パッケージ
完全な型別リファレンス、テンプレート、検査スクリプト、サンプルは公式パッケージを使う。
# Claude Code
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
# Codex
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design出典
[cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) の公開スキルv2.4、commit 5f1b6ddc66036554dd68701798bd12aa5e3ef3f9をもとに再構成した。
ライセンスはMIT。