説明
Diagram Designは、自然言語のプロンプトから直接編集品質の図を生成するために設計された革新的なエージェントスキルです。Claude Code、Codex、Pi、GitHub Copilot、Cursor、Factory Droid、Qoderなどの人気のエージェントホストとシームレスに統合されており、ユーザーは既存の環境を離れることなく洗練されたビジュアルを作成できます。基本的な前提は、AIモデルに「味」を提供し、生成された図が内容的に正確であるだけでなく、美的にも魅力的でブランドに一貫性があることを保証することです。
続きを読む
このスキルは、アーキテクチャ、サンキー、ヒートマップ、爆発軸測図、データベーススキーマなど、45種類の異なる図タイプの包括的なライブラリを提供します。各タイプは独自の特定のルールに従い、視覚的な整合性を確保し、一般的な「丸みを帯びたボックス」の美学を避けます。重要な機能は、ユーザーのウェブサイトにブランドマッチした図を生成する能力です。スキルをURLに指し示すだけで、色、フォント、その他のスタイル要素を抽出し、約60秒以内に生成されるすべての図に適用します。これにより、すべてのビジュアルがユーザーの確立されたブランドアイデンティティに沿ったものになります。
図は自己完結型のHTML + SVGファイルとして生成され、ダブルクリックでオフラインで開くことができ、ビルドステップ、ダッシュボード、ホスティングは不要です。これにより、非常にポータブルで共有が容易になります。このツールは、draw.io、Mermaid、Excalidrawなどの人気フォーマットから既存の図をインポートして再描画することもサポートしています。単に変換するのではなく、Diagram Designはこれらのソースをインテリジェントに再描画し、希望のサイズ、詳細、対象に合わせて適用し、編集スタイルを適用します。
アクセシビリティは重要な考慮事項であり、図はスクリーンリーダーに優しいように設計されており、単なる空白の長方形ではなく、タイトルや説明を発表します。説明を強化するために、図にオプションのアクセシブルモーションを追加することができ、静的出力がデフォルトです。このスキルには、爆発ビューと平面レイアウト用の2つの新しい軸測図タイプや、明確さ、階層、クリーンな美学を優先する堅牢なデザインシステムが含まれており、色、タイポグラフィ、スペーシングに関する特定のルールがあります。
インストールは簡単で、通常はエージェントホスト内のコマンドラインインターフェースまたはマーケットプレイスを介してスキルを追加することを含みます。ユーザーは、複雑な構文や設定を必要とせず、平易な英語で希望する図を説明することで対話します。出力品質は基盤となるモデルに依存し、結果は従来のデザインファイルのような編集可能なソースフォーマットではありませんが、エージェントに再度依頼するか、SVGを直接編集することで図を再生成できます。スタイルガイドをカスタマイズする必要がある場合は、編集可能なインストールオプションが利用可能で、名前付きプロファイルを使用することで複数のクライアントブランドを効率的に管理できます。
- カテゴリーAIグラフィックデザインツール
- デプロイクラウド
- プラットフォームWeb
Diagram Designの主要機能
平易な英語の説明から図を生成
45種類の異なる編集図タイプをサポート
約60秒でウェブサイトの色とフォントにブランドマッチ
自己完結型のHTML + SVGファイルを出力
draw.io、Mermaid、Excalidrawファイルをインポートして再描画
デフォルトでスクリーンリーダーに対応
説明のためのオプションのアクセシブルモーション
複数のエージェントホスト（Claude Code、Codex、Pi、GitHub Copilot、Cursor、Factory Droid、Qoder）と統合
一貫した意見を持った編集デザインスタイルを提供
SVGおよびPNGフォーマットへのエクスポートをサポート
2つの新しい軸測図タイプ（爆発と平面）を提供
手動スタイルガイドのオーバーライドと複数ブランド用の名前付きプロファイルを許可
リッチな図のためのアイコンセットを含む
行動駆動型図のためのセマンティックパターンを特徴
ブランドマッチ中にWCAG AAコントラストチェックを自動的に実行
Diagram Designの使い方は？
スキルのインストール: 提供されたインストールコマンドまたはマーケットプレイスを使用して、Diagram Designを好みのエージェントホストに追加します。
ブランドのオンボーディング: スキルをウェブサイトに指し示して、自動的にブランドの色とフォントを図に抽出して適用します。
図の説明: エージェントに平易な英語で図を作成するように依頼し、必要なタイプと内容を指定します。
既存の図の再描画: draw.io、Mermaid、またはExcalidrawファイルを提供し、エージェントに編集スタイルで再描画するように依頼します。
出力のエクスポート: 生成された図をSVGまたはPNGフォーマットにエクスポートし、他のアプリケーションやプレゼンテーションで使用します。
プロファイルの管理: ブランド設定を名前付きプロファイルとして保存し、異なるクライアントスタイル間で簡単に切り替えます。
Diagram Designの使用例
- アーキテクチャ図
- フローチャートとプロセスマップ
- データモデルとER図
- 組織図
- タイムラインとガントチャート
- 爆発軸測図
- ブランドマッチしたビジュアル
- 編集コンテンツのイラスト
- プレゼンテーションスライド
- システムトポロジーの比較
