generating-visual-diagrams

generating-visual-diagrams：Salesforce Visual AI Skill

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

対象範囲

対象:

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

対象外 — 代わりに委任してください:

• Mermaid またはテキストのみの図 → generating-mermaid-diagrams
• ERD 向けのオブジェクト／項目メタデータの検出 → generating-custom-object または generating-custom-field
• モックアップ承認後の LWC 実装 → generating-lwc-components
• Apex のレビュー／実装 → generating-apex

---

必須ゲート：最初に前提条件を確認

このスキルを使用する前に、前提条件の確認を実行してください。

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. 入力を収集する

• オブジェクトリスト／メタデータ（必要に応じて generating-custom-object／generating-custom-field に委任）
• 目的：ドラフト、プレゼンテーション、ドキュメント
• 希望する美的スタイル — 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 をバージョン管理にコミットしてはいけません	キーは個人に紐づき、課金対象となります
テキスト図は generating-mermaid-diagrams に委任します	このスキルはレンダリングされた画像のみを扱います

---

注意点

問題	解決方法
編集が正しく反映されない	既存の要素を名前で指定し、一度に 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 の初稿またはテキスト図	generating-mermaid-diagrams	構造図をより迅速に作成できるため
ERD 用のオブジェクト / フィールドの調査	generating-custom-object / generating-custom-field	正確なスキーマに基づいて作成できるため
モックアップを実際の LWC コンポーネントにする	generating-lwc-components	デザイン後の実装を行うため
Apex のレビュー / 実装	generating-apex	コード品質の改善につなげるため

---

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

ファイル	読むタイミング
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 解像度での出力と、解像度を制御した画像編集に使用