まず、基本的には以下のことに留意したプロンプトを心がける。

1. 具体例を示す:「〇〇のような図」と参考を伝える
2. 段階的に改善:最初の出力を見て「もっと〇〇にして」と調整
3. 用途を明確化:プレゼン用か、ドキュメント用か、学習用かで最適な詳細度が変わる
4. 制約条件:「A4横向きに収まるように」「色数は3色まで」など

また、LLMに対して論理的かつ正確な図解を求める場合、画像生成を依頼するのではなく、「Mermaid.js記法によるコード生成」を指示するのが最適である。
理由は単純で、画像生成モデルは文字の描画や複雑な因果関係の矢印の配置において、ハルシネーションを起こすが、コード生成であれば論理構造が厳密に保持されるから。

しかし、claudeのようなプレビュー機能があるaiにおいてはsvgやReactを出力形式として指定することが適切だと思う。その際の推奨される出力形式についての表を（見にくいが）csv形式で示す。

図の種類,推奨形式,特徴
フローチャート、シーケンス図、ER図,Mermaid,構造化された図に最適、編集しやすい
概念図、関係図、カスタムレイアウト,SVG,自由度が高い、位置調整が柔軟
インタラクティブな図、アニメーション,React (JSX),動的な要素、ホバー効果など
シンプルな説明図,HTML/CSS,軽量で汎用的

「使用したプロンプト」にはテンプレートを貼付し、以下には具体的なプロンプト例をいくつか記す。

## 図解リクエスト: Webアプリケーションアーキテクチャ

### 目的
開発チーム向けにシステム全体像を説明するアーキテクチャ図

### 要素
- フロントエンド: Next.js (Vercel)
- API: Django REST Framework
- データベース: PostgreSQL
- キャッシュ: Redis
- 外部サービス: Stripe, SendGrid

### 関係
- フロントエンド → API: REST API呼び出し
- API → データベース: ORM経由
- API → キャッシュ: セッション管理
- API → 外部サービス: Webhook/API

### 出力形式
Mermaid flowchart (方向: LR)

### スタイル
- カラフルな配色（レイヤーごとに色分け）
- 日本語ラベル
- サブグラフでレイヤーを分離

## 図解リクエスト: 機械学習パイプライン概念図

### 目的
非技術者向けにMLパイプラインの流れを視覚的に説明

### 要素と流れ
1. データ収集 → 2. 前処理 → 3. 特徴量エンジニアリング → 4. モデル訓練 → 5. 評価 → 6. デプロイ

### 各ステップの補足
- データ収集: 複数ソースからの統合
- 前処理: クリーニング、正規化
- 評価: 精度、再現率などの指標

### 出力形式
SVG (800x400px, レスポンシブ対応)

### スタイル
- パステルカラー
- 角丸の矩形
- アイコン付き（各ステップを象徴）
- 矢印は曲線で柔らかく
- 下部に凡例

## 図解リクエスト: 注文ステータス状態遷移図

### 目的
ECサイトの注文ステータス管理ロジックを開発者向けに図示

### 状態
- pending: 注文受付
- confirmed: 確認済み
- processing: 処理中
- shipped: 発送済み
- delivered: 配達完了
- cancelled: キャンセル
- refunded: 返金済み

### 遷移
- pending → confirmed: 在庫確認OK
- pending → cancelled: 在庫切れ/ユーザーキャンセル
- confirmed → processing: 決済完了
- processing → shipped: 出荷処理完了
- shipped → delivered: 配達完了
- delivered → refunded: 返品処理
- confirmed → cancelled: キャンセル申請

### 出力形式
Mermaid stateDiagram-v2

### 追加要件
- 正常フローと異常フローを色分け
- 各遷移にトリガーイベントを記載

具体例ではないが、汎用的な短縮プロンプト。

【図解依頼】
■ 種類: [フローチャート/概念図/シーケンス図/ER図/状態遷移図]
■ 形式: [Mermaid/SVG/React]
■ 内容: [説明したい内容を簡潔に]
■ 要素: [主要な要素をカンマ区切りで]
■ スタイル: [シンプル/詳細/カラフル/モノクロ]
■ 言語: [日本語/英語]