diagram-design

Diagram Designは、39種類のエディトリアル品質のダイアグラムタイプを自己完結型のHTMLおよびSVGファイルとして提供するコレクションで、Claude Code、Codex、GitHub Copilot、Factory Droid、Pi、Kiro、OpenCodeなどのAIコーディングアシスタント向けのスキルまたはプラグインとして設計されています。このプロジェクトの核となる哲学は、ダイアグラムが周囲のコンテンツの視覚品質に一致し、一般的な角丸ボックステンプレートのように見えないようにすることです。 各ダイアグラムタイプは、ミニマルライト、ミニマルダーク、フルエディトリアルの3つの静的バリアントで提供されます。すべての出力は自己完結型で、ビルドステップ、JavaScript、外部画像依存関係はありません。39のタイプは、アーキテクチャ図、フローチャート、シーケンス図、状態機械、ER/データモデル、タイムライン、スイムレーン、象限、レーダーチャート、ループ/フライホイール、ネスト階層、ツリー、組織図、レイヤースタック、ベン図、ピラミッド/ファネル、棒グラフ、ツリーマップ、折れ線グラフ、ガントチャート、散布図、高レベルスタック、プロセス、メダリオンアーキテクチャ、データフロー、データプラットフォーム統合、セキュリティマトリックス、サンキーダイアグラム、フィッシュボーンダイアグラム、ウォードリーマップ、かんばんボード、ユーザージャーニー、デプロイメント図、依存関係グラフ、UMLクラス図、ストーリーマップ、データベーススキーマ、極座標チャート、ウォーターフォールチャートなど、幅広いユースケースをカバーしています。 主な差別化要因は、ブランドマッチングのオンボーディングフローです。このスキルは、ウェブサイトのホームページを取得し、主要なカラーパレットとフォントスタックを抽出し、検出された値をセマンティックロール（紙、インク、ミュート、アクセント、リンク）にマッピングし、すべてのダイアグラムに適用できます。WCAG AAのコントラストチェックを自動的に実行し、サンプリングされたURL、正確な色ロール、フォントファミリー、およびフォールバックを文書化した忠実度レシートを出力します。プロファイルは、`.diagram-design`マーカーファイルを使用して、複数のクライアントプロジェクト間で保存および共有できます。 このツールは、draw.io、Mermaid、またはExcalidrawから既存のダイアグラムをインポートし、選択した形式、サイズ、詳細レベルでDiagram Designシステムに再描画することもサポートしています。セマンティックパターンは、レイアウトとは別に動作を記述するため、キュー、ポリシートレース、トラストバウンダリなどの概念は、タイプ数を増やさずに最も近い既存タイプを使用できます。順序付き説明にはオプションのアクセシブルモーションが利用可能で、モーション削減のサポートと静的デフォルトを備えています。 アクセシビリティはデフォルトで組み込まれており、各SVGには`role="img"`、`aria-labelledby`、およびダイアグラムごとのIDプレフィックスを持つtitle/desc要素が含まれ、複数のダイアグラムが1ページにインライン化された場合の競合を防ぎます。 インストールは、各ホストのネイティブプラグインマーケットプレイス、または編集可能なインストール用の直接Gitクローンを通じて利用可能です。共有スキルは`skills/diagram-design/`にあり、サポートされているすべてのAgent Skillsホストと互換性があります。