Agent Skills
› forcedotcom/sf-skills
› external-diagram-visual-generate
external-diagram-visual-generate
GitHub用于通过 Nano Banana Pro 生成 Salesforce 视觉图表（如 ERD、UI 原型、架构图）的 PNG/SVG 图像。适用于需渲染图片的场景，排除文本 Mermaid 图或元数据查询。
Trigger Scenarios
用户请求生成 PNG 或 SVG 格式的图片
需要创建 UI 原型或线框图
要求生成可视化实体关系图 (ERD)
明确要求生成图像或制作原型
Install
npx skills add forcedotcom/sf-skills --skill external-diagram-visual-generate -g -y
SKILL.md
Frontmatter
{
"name": "external-diagram-visual-generate",
"metadata": {
"version": "1.0"
},
"description": "AI-powered image generation for Salesforce visuals via Nano Banana Pro. Use this skill when the user needs rendered PNG\/SVG output such as visual ERDs (Entity Relationship Diagrams), UI mockups, wireframes, or architecture illustrations. TRIGGER when: user asks for PNG\/SVG output, UI mockups, wireframes, visual ERDs, or says \"generate image\" \/ \"create mockup\". DO NOT TRIGGER when: text-based Mermaid diagrams (use external-diagram-mermaid-generate), or non-visual documentation tasks."
}
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:
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
platform-custom-object-generate/platform-custom-field-generateif 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 --yoloreturns 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 (~/.zshrcon macOS/zsh,~/.bashrcon Linux) and the terminal session is refreshed. - If the extension is missing: run
gemini extensions install nanobananaand 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 viagemini --yolo "/generate ..."for layout review - Final image (
<name>.png) — 2K or 4K resolution rendered viascripts/generate_image.pyonce composition is approved - Edit iteration (
<name>.png) — incremental refinement viagemini --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
| Need | Delegate to | Reason |
|---|---|---|
| Mermaid first draft or text diagram | external-diagram-mermaid-generate | faster structural diagramming |
| Object / field discovery for ERD | platform-custom-object-generate / platform-custom-field-generate | accurate schema grounding |
| Turn mockup into real LWC component | experience-lwc-generate | implementation after design |
| Apex review / implementation | platform-apex-generate | 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 |
Version History
- 1.29.0 Current 2026-07-05 18:50
