Claude Code向けに編集品質の図を13種類そろえたテンプレート集。HTMLとSVGだけで自己完結し、ビルド不要でブラウザから直接開ける。
収録されているのは、アーキテクチャ図、フローチャート、シーケンス、ステートマシン、ER図、タイムライン、スイムレーン、クワドラント、ネスト図、ツリー、レイヤースタック、ベン図、ピラミッド／ファネル。Mermaidが出しがちなジェネリックな見た目を避け、読んで伝わる図に仕上げることを狙っている。
各タイプに minimal light、minimal dark、full editorial の3バリアントが用意されている。自分のサイトから色とフォントを抜き出して、ブランドに合わせた図を60秒で組み立てられる、という流れを想定した作り。
フォントはタイトルに Instrument Serif、ノードラベルに Geist sans、技術的なサブラベルに Geist Mono。座標やギャップを4の倍数にそろえて、AI生成特有のずれた印象を消している。アクセントカラーは1〜2要素だけに使う、削除こそ最高品質、という方針が全体を貫く。
インストールは git clone で ~/.claude/skills/diagram-design に配置するか、プラグインとして入れる。
