skills.rest
Collabalist
CollabalistCOMMUNITY
Explore all skills by this author →
GitHub

generating-visual-diagrams

Generate Salesforce ERDs, UI mockups, and architecture diagrams via Gemini 3 Pro Image API.

Updated Jun 1, 2026
Search Tags:#architecture#ERD#Salesforce#visual diagram#UI mockup
One-click install
npx skills add https://github.com/Collabalist/SFDC --skill generating-visual-diagrams-collabalist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generating-visual-diagrams
Source: https://github.com/Collabalist/SFDC/tree/main/.agents/skills/generating-visual-diagrams
Command: npx skills add https://github.com/Collabalist/SFDC --skill generating-visual-diagrams-collabalist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/gemini-cli, nanobanana, timg, uv, google-genai, pillow, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of visual diagrams such as ERDs, UI mockups, and architecture illustrations for Salesforce development, reducing the time spent on manual design and visualization tasks.

Core Features & Use Cases

  • Visual ERD Generation: Create actual rendered ERD diagrams for Salesforce objects.
  • UI Mockups: Generate wireframes and component mockups for Lightning Web Components.
  • Architecture Illustrations: Create visual representations of Salesforce integrations and system architectures.
  • Use Case: Generate a visual ERD for Salesforce objects such as Account, Contact, and Opportunity to help visualize relationships and data flow.

Quick Start

Use the generating-visual-diagrams skill to generate an ERD diagram showing Account, Contact, and Opportunity relationships by asking, "Generate an ERD diagram showing Account, Contact, and Opportunity relationships".

Frequently Asked Questions about generating-visual-diagrams

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

FAQPage Schema
How do I automatically generate visual ERD diagrams for Salesforce objects?▼

Yes, you can generate UI mockups and wireframes for Lightning Web Components. The Skill uses Python scripts and the Gemini API to produce visual component mockups for Salesforce development.

What do I need to set up to generate Salesforce architecture illustrations with AI?▼

To generate Salesforce architecture illustrations, you need a valid GEMINI_API_KEY, Gemini CLI, Nano Banana extension, Python, and timg for viewing the output images directly in your environment.

Can I generate visual representations of Salesforce integrations and system architectures?▼

Yes, this Skill creates visual representations of Salesforce integrations and system architectures. It automates the rendering process using AI to reduce manual design time.

How do I create an ERD diagram showing Account, Contact, and Opportunity relationships?▼

You create an ERD diagram by prompting the Skill to generate a visual diagram showing Account, Contact, and Opportunity relationships. The Python scripts handle the high-resolution image generation automatically.

Are there limitations when using AI to automate visual diagram generation for Salesforce?▼

Limitations include dependency on external tools like the Gemini CLI, Nano Banana extension, and timg. You must ensure your GEMINI_API_KEY is valid and Python is configured correctly for high-resolution image iteration.

Related Skills

Explore More Software Engineering Skills→
gensparxgensparx
3

nano-banana-pro

Generate and edit images using the Gemini 3 Pro Image model.

Community
Intermediate
chekoschekos
5

image-validator

Validates images against the sabrtech solar industry ontology for metadata consistency and classification accuracy.

Community
Basic
CollabalistCollabalist

generating-lwc-components

Generate Lightning Web Component bundles with Apex, GraphQL, and Jest tests.

Community
Advanced
nigo81nigo81
113

flowchart-generator

Generate flowcharts from natural language process descriptions.

Community
Advanced