generating-visual-diagrams

generating-visual-diagrams: Salesforce Visual AI Skill

Use this skill when the user needs rendered visuals, not text diagrams: ERDs, UI mockups, architecture illustrations, slide-ready images, or image edits using Nano Banana Pro.

Scope

In scope:

• PNG / SVG-style rendered image output
• Visual ERDs and architecture diagrams
• LWC or Experience Cloud mockups / wireframes
• Image edits on previously generated visuals

Out of scope — delegate instead:

• Mermaid or text-only diagrams → generating-mermaid-diagrams
• Object / field metadata discovery for ERDs → generating-custom-object or generating-custom-field
• LWC implementation after the mockup is approved → generating-lwc-components
• Apex review / implementation → generating-apex

---

Hard Gate: Prerequisites First

Run the prerequisites check before using the skill:

scripts/check-prerequisites.sh

If prerequisites fail, stop and route the user to setup guidance in:

• references/gemini-cli-setup.md

---

Required Inputs

Ask for or infer before generating:

Input	Default if not provided
Image type	ERD
Subject scope and key entities / systems	Ask the user
Target quality	Draft (1K)
Preferred style	architect.salesforce.com aesthetic
Aspect ratio	Default (no override)
Quick mode or interview mode	Interview mode

---

Interview-First Workflow

Unless the user asks for quick / simple / just generate, ask clarifying questions first using the question bank in references/interview-questions.md.

Request type	Ask about
ERD / schema	objects, visual style, purpose, extras
UI mockup	component type, object/context, device/layout, style
architecture image	systems, boundaries, protocols, emphasis
image edit	what to keep, what to change, output quality

Quick mode defaults (triggered by "quick", "simple", "just generate", "fast"):

• professional style, 1K draft, legend included, one image first then iterate

---

Recommended Workflow

1. Run prerequisites check

Run scripts/check-prerequisites.sh and confirm all required tools pass before proceeding.

2. Gather inputs

• object list / metadata (delegate to generating-custom-object / generating-custom-field if needed)
• purpose: draft vs presentation vs documentation
• desired aesthetic — read references/architect-aesthetic-guide.md for ERDs
• aspect ratio / resolution

3. Run interview or use quick-mode defaults

Load references/interview-questions.md for the matching question set (ERD, LWC, architecture, code review).

4. Build a concrete prompt

Good prompts specify subject, composition, color treatment, labels/legends, and output quality goal.

5. Generate a fast draft at 1K

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

Open the result and review layout before spending on higher resolution.

6. Iterate using edits

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

Use /edit for small adjustments — cheaper than regenerating. See references/iteration-workflow.md.

7. Generate final at 2K/4K using the Python script

Run scripts/generate_image.py when layout is confirmed:

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

8. Error recovery

• If gemini --yolo returns no image: re-run once; if it fails again, fall back to the Python script path.
• If the Python script fails with GEMINI_API_KEY not found: verify the key is exported in your shell profile (~/.zshrc on macOS/zsh, ~/.bashrc on Linux) and the terminal session is refreshed.
• If the extension is missing: run gemini extensions install nanobanana and re-run the prerequisites check.

---

Default Style Guidance

For ERDs, default to the architect.salesforce.com aesthetic unless the user asks otherwise:

• dark border + light fill cards
• cloud-specific accent colors
• clean labels and relationship lines
• presentation-ready whitespace and hierarchy

Full style specification: references/architect-aesthetic-guide.md

---

Common Patterns

Pattern	Default approach
visual ERD	get metadata if available, then render a draft first
LWC mockup	load assets/lwc/data-table.md, assets/lwc/record-form.md, or assets/lwc/dashboard-card.md for the matching template
architecture illustration	load assets/architecture/integration-flow.md; emphasize systems and flows
image refinement	use /edit for small changes before regenerating
final production asset	switch to script-driven 2K/4K generation via scripts/generate_image.py
Apex / LWC code review	load assets/review/apex-review.md or assets/review/lwc-review.md for the review prompt template

---

Output Expectations

Deliverables produced by this skill:

• Draft image (<name>.png) — 1K resolution rendered via gemini --yolo "/generate ..." for layout review
• Final image (<name>.png) — 2K or 4K resolution rendered via scripts/generate_image.py once composition is approved
• Edit iteration (<name>.png) — incremental refinement via gemini --yolo "/edit ..." without full regeneration

After delivering each image:

• Open the file in Preview or attach it in the session for multimodal review
• Ask the user whether to iterate on layout, labeling, or color before finalizing
• Only proceed to high-res output after draft composition is confirmed

---

Rules / Constraints

Rule	Rationale
Always run prerequisites check before any generation	Missing tools produce silent failures
Always draft at 1K before generating at 4K	Cost and time savings; composition changes at high res are wasteful
Use /edit for incremental changes, not full regeneration	Cheaper and faster for small adjustments
Never commit GEMINI_API_KEY to version control	Key is personal and tied to billing
Delegate text diagrams to generating-mermaid-diagrams	This skill owns rendered images only

---

Gotchas

Issue	Resolution
Edit not applying correctly	Be specific: reference existing elements by name; one change at a time
4K output looks different from 1K draft	Use exact same prompt text; minor variations are normal model behavior
gemini --yolo fails silently	Check that the Nano Banana extension is installed: gemini extensions list
Image dimensions wrong	Set --aspect-ratio explicitly in scripts/generate_image.py using -a "16:9"
RGBA image causes errors in Python script	Script auto-converts RGBA→RGB; ensure Pillow is installed via uv

---

Cross-Skill Integration

Need	Delegate to	Reason
Mermaid first draft or text diagram	generating-mermaid-diagrams	faster structural diagramming
Object / field discovery for ERD	generating-custom-object / generating-custom-field	accurate schema grounding
Turn mockup into real LWC component	generating-lwc-components	implementation after design
Apex review / implementation	generating-apex	code-quality follow-up

---

Reference File Index

File	When to read
references/gemini-cli-setup.md	Prerequisites fail — Gemini CLI / Nano Banana setup guidance
references/interview-questions.md	Step 3 — load question set matching the request type
references/iteration-workflow.md	Step 6 — draft-to-final iteration patterns and cost tips
references/architect-aesthetic-guide.md	Step 4 — ERD color palettes, box styles, prompt templates
references/examples-index.md	Step 4 — example prompts for ERD, LWC, architecture, code review
assets/erd/core-objects.md	Step 4 — prompt template for core CRM objects (Account, Contact, Opportunity, Case)
assets/erd/custom-objects.md	Step 4 — prompt template for custom object ERDs
assets/lwc/data-table.md	Step 4 — prompt template for lightning-datatable mockups
assets/lwc/record-form.md	Step 4 — prompt template for lightning-record-form mockups
assets/lwc/dashboard-card.md	Step 4 — prompt template for dashboard card / metric tile mockups
assets/architecture/integration-flow.md	Step 4 — prompt template for integration architecture diagrams
assets/review/apex-review.md	Step 4 — Gemini review prompt template for Apex code
assets/review/lwc-review.md	Step 4 — Gemini review prompt template for LWC components
scripts/check-prerequisites.sh	Step 1 — run to verify all required tools are installed
scripts/generate_image.py	Step 7 — run for 2K/4K resolution output and image editing with resolution control