skills.rest
amanpraaj
amanpraajCOMMUNITY
Explore all skills by this author →
GitHub

sf-diagram-nanobananapro

Generate rendered Salesforce ERDs, LWC mockups, and architecture diagrams via Gemini image generation.

1|Updated May 7, 2026
Search Tags:#image generation#gemini#salesforce#wireframe#architecture diagram#erd diagram#lwc mockup
One-click install
npx skills add https://github.com/amanpraaj/sf-skill-hub --skill sf-diagram-nanobananapro-amanpraaj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-diagram-nanobananapro
Source: https://github.com/amanpraaj/sf-skill-hub/tree/main/skills/salesforce/sf-diagram-nanobananapro
Command: npx skills add https://github.com/amanpraaj/sf-skill-hub --skill sf-diagram-nanobananapro-amanpraaj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-genai, pillow, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating presentation-quality Salesforce visuals like ERDs, UI mockups, and architecture diagrams normally requires manual diagramming tools and design effort. This Skill generates rendered PNG images directly from natural-language prompts using the Gemini 3 Pro Image (Nano Banana Pro) model, with a draft-to-final iteration workflow. ## Core Features & Use Cases - Visual ERD Generation: Render entity-relationship diagrams in the official architect.salesforce.com style with cloud-specific color palettes, legend bars, and labeled relationship lines. - LWC and UI Mockups: Produce Lightning Design System wireframes for data tables, record forms, and dashboard cards before implementation. - Controlled Iteration Workflow: Draft at 1K resolution via the Gemini CLI, refine with natural-language edits, then produce 2K/4K production output through a Python script with timestamped versioning. - Use Case: A Salesforce architect needs a Service Cloud data model diagram for documentation. The Skill interviews for objects, style, and purpose, drafts the ERD at 1K, iterates on layout, and exports a 4K final image. ## Quick Start Ask the agent to generate a visual ERD showing Account, Contact, and Opportunity relationships in the architect.salesforce.com style.

Frequently Asked Questions about sf-diagram-nanobananapro

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a Salesforce ERD diagram as an image?▼

Run the prerequisites check, then invoke the skill with a request like generating an ERD for Account, Contact, and Opportunity. It drafts at 1K resolution via the Gemini CLI, iterates with natural-language edits, and produces a 4K final using the generate_image.py script.

What is the difference between sf-diagram-nanobananapro and sf-diagram-mermaid?▼

sf-diagram-nanobananapro produces rendered PNG images for visual ERDs, mockups, and architecture illustrations. sf-diagram-mermaid handles text-based Mermaid diagrams, which are faster for structural drafting but produce no rendered image output.

What prerequisites are required for Gemini image generation?▼

You need a GEMINI_API_KEY from Google AI Studio, the Gemini CLI installed via npm, and the Nano Banana extension installed with gemini extensions install. The check-prerequisites.sh script verifies all requirements, and uv is optional for 4K Python-based generation.

Can I edit an existing generated image instead of regenerating?▼

Yes, use the Gemini CLI /edit command for small natural-language changes, or pass an input image to generate_image.py with the -i flag. The script auto-detects resolution from the input image dimensions when editing.

Why should I draft at 1K before generating 4K output?▼

1K drafts take about 3 seconds and cost less, letting you refine the prompt and layout cheaply. Once composition is correct, the same prompt generates a 4K production image in about 10 seconds, avoiding wasted high-resolution API calls.

Related Skills

Explore More Design & Creative Skills→
forcedotcomforcedotcom
803

generating-mermaid-diagrams

Generate Salesforce architecture diagrams in Mermaid syntax with ASCII fallback.

Official
Intermediate
angryracoonangryracoon

external-diagram-visual-generate

Generate rendered Salesforce ERDs, LWC mockups, and architecture visuals from structured prompts.

Community
Advanced
jiten-singh-shahijiten-singh-shahi
13

refactor-clean

Detect and remove dead Salesforce Apex and LWC code with safety checks.

Community
Advanced
neverpreparedneverprepared

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Official
Intermediate