external-diagram-visual-generate: 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 → external-diagram-mermaid-generate
- Object / field metadata discovery for ERDs → platform-custom-object-generate or platform-custom-field-generate
- LWC implementation after the mockup is approved → experience-lwc-generate
- Apex review / implementation → platform-apex-generate
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 [blocked]
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 [blocked].
| 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
platform-custom-object-generate / platform-custom-field-generate if needed)
- purpose: draft vs presentation vs documentation
- desired aesthetic — read references/architect-aesthetic-guide.md [blocked] for ERDs
- aspect ratio / resolution
3. Run interview or use quick-mode defaults
Load references/interview-questions.md [blocked] 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 [blocked].
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 [blocked]
Common Patterns
| Pattern | Default approach |
|---|
| visual ERD | get metadata if available, then render a draft first |
| LWC mockup | load assets/lwc/data-table.md [blocked], assets/lwc/record-form.md [blocked], or assets/lwc/dashboard-card.md [blocked] for the matching template |
| architecture illustration | load assets/architecture/integration-flow.md [blocked]; 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 [blocked] or assets/review/lwc-review.md [blocked] 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 external-diagram-mermaid-generate | 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
Reference File Index
| File | When to read |
|---|
| references/gemini-cli-setup.md [blocked] | Prerequisites fail — Gemini CLI / Nano Banana setup guidance |
| references/interview-questions.md [blocked] | Step 3 — load question set matching the request type |
| references/iteration-workflow.md [blocked] | Step 6 — draft-to-final iteration patterns and cost tips |
| references/architect-aesthetic-guide.md [blocked] | Step 4 — ERD color palettes, box styles, prompt templates |
| references/examples-index.md [blocked] | Step 4 — example prompts for ERD, LWC, architecture, code review |
| assets/erd/core-objects.md [blocked] | Step 4 — prompt template for core CRM objects (Account, Contact, Opportunity, Case) |
| assets/erd/custom-objects.md [blocked] | Step 4 — prompt template for custom object ERDs |
| assets/lwc/data-table.md [blocked] | Step 4 — prompt template for lightning-datatable mockups |
| assets/lwc/record-form.md [blocked] | Step 4 — prompt template for lightning-record-form mockups |
| assets/lwc/dashboard-card.md [blocked] | Step 4 — prompt template for dashboard card / metric tile mockups |
| assets/architecture/integration-flow.md [blocked] | Step 4 — prompt template for integration architecture diagrams |
| assets/review/apex-review.md [blocked] | Step 4 — Gemini review prompt template for Apex code |
| assets/review/lwc-review.md [blocked] | Step 4 — Gemini review prompt template for LWC components |
| scripts/check-prerequisites.sh [blocked] | Step 1 — run to verify all required tools are installed |
| scripts/generate_image.py [blocked] | Step 7 — run for 2K/4K resolution output and image editing with resolution control |