cathrynlavery/diagram-design

Diagram Design – AIエージェント駆動型の編集用図表

概要 – Diagram Design は、再利用可能な Agent Skill（Claude Code、Codex、GitHub Copilot、Factory Droid、Pi、Kiro、OpenCodeなどと互換性あり）であり、自然言語によるリクエストを 自己完結型のHTML + SVG 図表セットに変換します。このスキルには、30種類以上の編集スタイル図表（アーキテクチャ図、フローチャート、サンキー図、ウォードリーマップ、カンバンなど）が3つの視覚バリエーション（ミニマルライト、ミニマルダーク、フルエディトリアル）で用意されています。図表はJavaScript、外部画像、影を使用せずにレンダリングされるため、ブラウザで即座に表示したり、Markdownに埋め込んだりすることが可能です。

---

主な機能（READMEより）

• 広範な図表カタログ – アーキテクチャ、プロセス、データ、グラフ、プロジェクト管理ビューを網羅する30種類の静的図表文法。バージョン2.5.10で追加された新しいタイプには、サンキー図、フィッシュボーン図、ウォードリーマップ、カンバン、ユーザー体験マップ、デプロイメント図、依存関係グラフ、UMLクラス図、ストーリーマップ、データベーススキーマが含まれます。
• 3つの視覚バリエーション – 各図表は、ミニマルライト、ミニマルダーク、またはフルエディトリアルスタイルでレンダリング可能です。すべてのバリエーションは純粋なSVG/HTMLファイルであり、ブラウザで直接開くことができます。
• ブランドオンボーディング – ワンクリックの「onboard diagram-design to 」フローにより、ホームページを取得して主要なカラーパレットとフォントスタックを抽出し、それらをセマンティックトークン（紙、インク、アクセントなど）にマッピングして references/style-guide.md に書き込みます。その後、このスキルは以降のすべての図表でこれらのトークンを使用し、ブランドカラーとタイポグラフィの一貫性を保証します。
• アクセシビリティの組み込み – すべてのSVGには適切な role= が含まれています