Does this skill generate code or actual image files?

This skill generates actual rendered image files (PNG/JPG) using the Nano Banana Pro extension, rather than just text-based Mermaid diagrams.

Can I customize the visual style of the diagrams?

Yes, while it defaults to official Salesforce Architect branding, you can specify styles like minimalist, whiteboard, or technical through the built-in interview workflow.

What are the system requirements for using this skill?

It requires macOS for image previewing, a Gemini API Key, the Gemini CLI, and the Nano Banana extension installed.

How does the parallel sub-agent feature work?

It allows you to trigger Gemini in the background to handle documentation lookups or code reviews while Claude continues to assist you with your primary task.

Salesforce Visual AI & Diagrammer

Name: Salesforce Visual AI & Diagrammer
Author: Jaganpro

byJaganpro

•

Database Management

Generates professional Salesforce ERD diagrams, LWC mockups, and architecture visuals using Gemini AI and Nano Banana Pro.

Salesforce Visual AI & Diagrammer bridges the gap between coding and documentation by providing AI-powered visual generation within Claude Code. Using the Gemini CLI and Nano Banana Pro extension, it transforms Salesforce object metadata into polished Entity Relationship Diagrams (ERDs) that follow official Salesforce Architect aesthetics. Beyond diagrams, it creates high-fidelity LWC mockups, mobile wireframes, and architectural visuals, while offering a parallel Gemini sub-agent to handle secondary tasks like code reviews and API research without interrupting your primary development flow.

Key Features

01Support for 4K resolution production-grade documentation assets via Python scripts.

02Parallel sub-agent capabilities for background code review and documentation research.

0332 GitHub stars

04High-fidelity LWC and UI mockup creation following SLDS guidelines.

05Rendered ERD generation using official Salesforce Architect styles and colors.

06Seamless integration with macOS Preview for instant visual feedback of generated assets.

Use Cases

01Rapidly prototyping LWC components and Experience Cloud layouts before writing code.

02Visualizing complex Salesforce data models for architecture reviews and client documentation.

03Delegating background research and Apex audits to a parallel AI agent during active development.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jaganpro/sf-skills sf-diagram-nanobananapro

For use in Claude.ai and ChatGPT

Download Skill