skills.rest
padjei
padjeiCOMMUNITY
Explore all skills by this author →
GitHub

external-diagram-visual-generate

Generate rendered PNG ERDs, LWC mockups, and architecture diagrams for Salesforce via Gemini image API.

Updated Jul 2, 2026
Search Tags:#image generation#gemini#salesforce#wireframe#architecture diagram#erd diagram#lwc mockup
One-click install
npx skills add https://github.com/padjei/SF_Build --skill external-diagram-visual-generate-padjei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: external-diagram-visual-generate
Source: https://github.com/padjei/SF_Build/tree/main/.claude/skills/external-diagram-visual-generate
Command: npx skills add https://github.com/padjei/SF_Build --skill external-diagram-visual-generate-padjei

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 such as 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) API, 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: Generate wireframes for lightning-datatable, record forms, and dashboard cards following Salesforce Lightning Design System patterns. - Draft-to-Final Workflow: Iterate cheaply at 1K resolution via the Gemini CLI, then produce 2K/4K production images through a Python script with resolution and aspect-ratio control. - Use Case: A Salesforce architect needs a Service Cloud data model diagram for documentation. The Skill interviews for objects and style, drafts a 1K ERD, refines it with edits, and outputs a 4K image matching the architect.salesforce.com aesthetic. ## Quick Start Ask the assistant to generate a visual ERD showing Account, Contact, and Opportunity relationships in the architect.salesforce.com style.

Frequently Asked Questions about external-diagram-visual-generate

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 script, then provide the objects and style you want. The skill drafts a 1K image via the Gemini CLI, lets you refine it with edit commands, and produces a final 2K or 4K PNG through the generate_image.py script.

What tools are required for Gemini image generation in the terminal?▼

You need the Gemini CLI installed via npm, the Nano Banana extension installed with gemini extensions install nanobanana, and a GEMINI_API_KEY exported in your shell profile. The uv Python runner is optional for high-resolution output.

When should I use Mermaid diagrams instead of generated images?▼

Use Mermaid when you need text-based, version-controllable diagrams or quick structural drafts. This skill explicitly delegates text-only diagrams to the external-diagram-mermaid-generate skill and handles only rendered PNG or SVG-style visual output.

Why does gemini --yolo fail silently during image generation?▼

Silent failures usually mean the Nano Banana extension is missing or the GEMINI_API_KEY is not set. Verify with gemini extensions list, confirm the key is exported in ~/.zshrc, and rerun the check-prerequisites.sh script.

How do I control image resolution and aspect ratio?▼

Use the generate_image.py script with the -r flag for 1K, 2K, or 4K resolution and the -a flag for aspect ratios like 16:9. Draft at 1K first to confirm layout before spending on 4K generation.

Related Skills

Explore More Design & Creative Skills→
CollabalistCollabalist

generating-mermaid-diagrams

Generate Salesforce architecture diagrams in Mermaid syntax with ASCII fallback.

Community
Intermediate
angryracoonangryracoon

external-diagram-visual-generate

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

Community
Advanced
amanpraajamanpraaj
1

sf-diagram-nanobananapro

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

Community
Advanced
hummingbothummingbot
31

slides-generator

Convert Markdown content into PDF slides with Mermaid diagram support.

Official
Advanced