external-diagram-visual-generate

external-diagram-visual-generate: Salesforce Visual AI Skill

テキスト図ではなくレンダリングされたビジュアルが必要な場合に、このスキルを使用します。対象は、ERD、UI モックアップ、アーキテクチャのイラスト、スライド用画像、Nano Banana Pro を使用した画像編集です。

対象範囲

対象:

• PNG / SVG 形式のレンダリング済み画像出力
• ビジュアル ERD とアーキテクチャ図
• LWC または Experience Cloud のモックアップ／ワイヤーフレーム
• 以前に生成したビジュアルの画像編集

対象外 — 代わりに以下へ引き継いでください:

• Mermaid またはテキストのみの図 → external-diagram-mermaid-generate
• ERD 用のオブジェクト／項目メタデータの調査 → platform-custom-object-generate または platform-custom-field-generate
• モックアップ承認後の LWC 実装 → experience-lwc-generate
• Apex のレビュー／実装 → platform-apex-generate

---

必須ゲート: まず前提条件を確認

このスキルを使用する前に、前提条件のチェックを実行します。

scripts/check-prerequisites.sh

前提条件を満たさない場合は中止し、以下のセットアップガイドを案内してください:

• references/gemini-cli-setup.md

---

必要な入力

生成前に、以下の情報を確認するか推測してください:

入力	指定がない場合のデフォルト
画像の種類	ERD
対象範囲と主要なエンティティ／システム	ユーザーに確認
目標品質	ドラフト（1K）
希望するスタイル	architect.salesforce.com の美的スタイル
アスペクト比	デフォルト（上書きなし）
クイックモードまたはインタビューモード	インタビューモード

---

インタビュー優先のワークフロー

ユーザーがクイック／シンプル／すぐに生成を求めていない限り、references/interview-questions.md の質問集を使って、まず確認事項を質問してください。

リクエストの種類	確認する内容
ERD／スキーマ	オブジェクト、ビジュアルスタイル、目的、追加要素
UI モックアップ	コンポーネントの種類、オブジェクト／コンテキスト、デバイス／レイアウト、スタイル
アーキテクチャ画像	システム、境界、プロトコル、強調点
画像編集	維持する内容、変更する内容、出力品質

クイックモードのデフォルト（「quick」「simple」「just generate」「fast」で起動）:

• プロフェッショナルなスタイル、1K ドラフト、凡例を含め、まず画像を 1 枚生成してから反復

---

推奨ワークフロー

1. 前提条件を確認する

scripts/check-prerequisites.sh を実行し、続行する前に必要なツールがすべて合格することを確認します。

2. 入力を集める

• オブジェクトリスト／メタデータ（必要に応じて platform-custom-object-generate／platform-custom-field-generate に引き継ぎます）
• 目的: ドラフト、プレゼンテーション、ドキュメントのいずれか
• 希望する美的スタイル — ERD については references/architect-aesthetic-guide.md を参照します
• アスペクト比／解像度

3. インタビューを実施するか、クイックモードのデフォルトを使用する

該当する質問セット（ERD、LWC、アーキテクチャ、コードレビュー）について、references/interview-questions.md を読み込みます。

4. 具体的なプロンプトを作成する

優れたプロンプトでは、対象、構図、色の扱い、ラベル／凡例、目標とする出力品質を指定します。

5. 1K で高速ドラフトを生成する

gemini --yolo "/generate 'Your prompt here'"

高解像度の生成に進む前に、結果を開いてレイアウトを確認します。

6. 編集を使って反復する

gemini --yolo "/edit 'Specific change instruction'"

細かな調整には /edit を使用します。再生成するより低コストです。references/iteration-workflow.md を参照してください。

7. Python スクリプトを使って 2K／4K の最終版を生成する

レイアウトが確定したら scripts/generate_image.py を実行します:

uv run scripts/generate_image.py -p "Refined prompt" -f "output.png" -r 4K

8. エラーからの復旧

• gemini --yolo が画像を返さない場合: もう一度実行します。再度失敗した場合は、Python スクリプトの方法に切り替えます。
• Python スクリプトが GEMINI_API_KEY not found で失敗した場合: シェルプロファイル（macOS/zsh では ~/.zshrc、Linux では ~/.bashrc）でキーがエクスポートされていることを確認し、ターミナルのセッションを更新します。
• 拡張機能が見つからない場合: gemini extensions install nanobanana を実行してから、前提条件のチェックを再実行します。

---

デフォルトのスタイルガイダンス

ERD では、ユーザーから別の指定がない限り、architect.salesforce.com の美的スタイルをデフォルトとして使用します。

• 暗い境界線＋明るい塗りつぶしのカード
• クラウド固有のアクセントカラー
• すっきりしたラベルとリレーションシップ線
• プレゼンテーションに適した余白と階層

スタイルの完全な仕様：references/architect-aesthetic-guide.md

---

よくあるパターン

パターン	デフォルトの方法
ビジュアル ERD	利用可能であればメタデータを取得し、まずドラフトを作成します
LWC モックアップ	対応するテンプレートとして assets/lwc/data-table.md、assets/lwc/record-form.md、または assets/lwc/dashboard-card.md を読み込みます
アーキテクチャの図解	assets/architecture/integration-flow.md を読み込み、システムとフローを強調します
画像の調整	再生成する前に、細かな変更には /edit を使用します
最終的な本番用アセット	scripts/generate_image.py によるスクリプト駆動の 2K／4K 生成に切り替えます
Apex／LWC のコードレビュー	レビュープロンプトのテンプレートとして assets/review/apex-review.md または assets/review/lwc-review.md を読み込みます

---

出力に関する要件

このスキルで作成する成果物：

• ドラフト画像（<name>.png）— レイアウト確認用に gemini --yolo "/generate ..." でレンダリングした 1K 解像度の画像
• 最終画像（<name>.png）— 構図が承認された後、scripts/generate_image.py でレンダリングした 2K または 4K 解像度の画像
• 編集版（<name>.png）— 全体を再生成せず、gemini --yolo "/edit ..." で段階的に調整した画像

各画像を納品した後：

• Preview でファイルを開くか、マルチモーダルレビュー用にセッションへ添付します
• 最終決定の前に、レイアウト、ラベル、色を調整するかユーザーに確認します
• ドラフトの構図が確認されてから、高解像度での出力に進みます

---

ルール／制約

ルール	理由
生成の前に必ず前提条件を確認します	ツールが不足していると、エラーが表示されずに失敗することがあります
4K で生成する前に、必ず 1K のドラフトを作成します	コストと時間を節約できます。高解像度で構図を変更するのは非効率です
全体の再生成ではなく、段階的な変更には /edit を使用します	小さな調整なら、より低コストかつ短時間で済みます
GEMINI_API_KEY をバージョン管理にコミットしてはいけません	キーは個人に紐づき、課金にも使用されます
テキスト図の作成は external-diagram-mermaid-generate に委任します	このスキルの対象はレンダリング済み画像のみです

---

注意点

問題	対処方法
編集が正しく反映されない	既存の要素を名前で指定し、一度に 1 つずつ変更します
4K 出力が 1K ドラフトと異なって見える	同一のプロンプトテキストを使用します。多少の差異はモデルの通常の動作です
gemini --yolo がエラーを表示せずに失敗する	Nano Banana 拡張機能がインストールされていることを、gemini extensions list で確認します
画像の寸法が正しくない	scripts/generate_image.py で --aspect-ratio を -a "16:9" により明示的に設定します
RGBA 画像が Python スクリプトでエラーになる	スクリプトは RGBA→RGB に自動変換します。uv で Pillow がインストールされていることを確認します

---

スキル間の連携

必要な作業	委任先	理由
Mermaid の初稿またはテキスト図	external-diagram-mermaid-generate	構造図をよりすばやく作成できます
ERD 用のオブジェクト／項目の確認	platform-custom-object-generate / platform-custom-field-generate	正確なスキーマに基づいて作成できます
モックアップを実際の LWC コンポーネントに変換	experience-lwc-generate	デザイン後の実装を行います
Apex のレビュー／実装	platform-apex-generate	コード品質の向上につなげます

---

リファレンスファイル一覧

ファイル	読むタイミング
references/gemini-cli-setup.md	前提条件を満たせない場合 — Gemini CLI / Nano Banana のセットアップガイダンス
references/interview-questions.md	ステップ 3 — リクエストの種類に合った質問セットを読み込む
references/iteration-workflow.md	ステップ 6 — 下書きから最終版までの反復パターンとコスト削減のヒント
references/architect-aesthetic-guide.md	ステップ 4 — ERD のカラーパレット、ボックスのスタイル、プロンプトテンプレート
references/examples-index.md	ステップ 4 — ERD、LWC、アーキテクチャ、コードレビューのプロンプト例
assets/erd/core-objects.md	ステップ 4 — CRM の主要オブジェクト（Account、Contact、Opportunity、Case）のプロンプトテンプレート
assets/erd/custom-objects.md	ステップ 4 — カスタムオブジェクト ERD のプロンプトテンプレート
assets/lwc/data-table.md	ステップ 4 — lightning-datatable モックアップのプロンプトテンプレート
assets/lwc/record-form.md	ステップ 4 — lightning-record-form モックアップのプロンプトテンプレート
assets/lwc/dashboard-card.md	ステップ 4 — ダッシュボードカード / メトリックタイルのモックアップ用プロンプトテンプレート
assets/architecture/integration-flow.md	ステップ 4 — 統合アーキテクチャ図のプロンプトテンプレート
assets/review/apex-review.md	ステップ 4 — Apex コード用 Gemini レビュープロンプトテンプレート
assets/review/lwc-review.md	ステップ 4 — LWC コンポーネント用 Gemini レビュープロンプトテンプレート
scripts/check-prerequisites.sh	ステップ 1 — 必要なツールがすべてインストールされていることを確認するために実行
scripts/generate_image.py	ステップ 7 — 2K/4K 解像度での出力と、解像度を制御した画像編集に使用