skills.rest
forcedotcom
forcedotcomOFFICIAL
Explore all skills by this author →
Website𝕏@salesforcedevsGitHub

generating-visual-diagrams

Generate rendered ERDs, UI mockups, and architecture diagrams for Salesforce.

803|289|Updated Nov 7, 2025
Search Tags:#generate#nanobanana#ui mockup#gemini image generation#rendered erd#salesforce visuals#diagram iteration
One-click install
npx skills add https://github.com/forcedotcom/sf-skills --skill generating-visual-diagrams
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generating-visual-diagrams
Source: https://github.com/forcedotcom/sf-skills/tree/main/skills/generating-visual-diagrams
Command: npx skills add https://github.com/forcedotcom/sf-skills --skill generating-visual-diagrams

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?

This Skill solves the problem of turning Salesforce development concepts (data models, UI mockups, and architecture ideas) into high-quality rendered images that stakeholders can quickly understand, without manually drawing diagrams.

Core Features & Use Cases

  • Rendered ERD Generation: Produce actual image-based ERDs (not just Mermaid) including relationship styling suitable for Salesforce teams.
  • LWC/UI Mockups: Generate wireframes and component mockups aligned to Salesforce Lightning Design System (SLDS) patterns.
  • Architecture Illustrations: Create slide-ready integration and system diagrams with labeled flows and elements.
  • Draft-to-Final Iteration: Start at a low-cost draft resolution, iterate, then generate a high-resolution final image.
  • Use Cases: ERD visuals for Account/Contact/Opportunity or custom objects; UI mockups for record forms and data tables; architecture illustrations for integrations and event-driven flows.

Quick Start

Use generating-visual-diagrams to create an architect.salesforce.com styled ERD image by sending the request: "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 generate rendered ERD diagrams for Salesforce objects?▼

To generate rendered ERD diagrams for Salesforce objects, use this Skill to create PNG/SVG-style outputs. It produces actual image-based ERDs with relationship styling suitable for Salesforce teams, rather than text-based formats like Mermaid.

Can I create UI mockups aligned to the Salesforce Lightning Design System?▼

Yes, you can create UI mockups aligned to Salesforce Lightning Design System patterns. The Skill generates wireframes and component mockups for record forms and data tables using Gemini with Nano Banana Pro for high-resolution production.

What is the best way to iterate on architecture illustrations before finalizing?▼

The best way to iterate on architecture illustrations is using the draft-to-final workflow. Start by generating low-cost draft resolution images, refine the integration and system diagrams, then produce a final high-resolution image.

Do I need to run a prerequisites check before generating visual diagrams?▼

Yes, you need to run a prerequisites check before generating visual diagrams. The Skill requires running this check and using rendered-image flows rather than Mermaid to ensure proper environment setup before producing draft-first outputs.

Does the visual diagram generation process use Mermaid for output?▼

No, the visual diagram generation process does not use Mermaid for output. It uses rendered-image flows with Gemini and Nano Banana Pro to create actual PNG/SVG-style images for ERDs, UI mockups, and architecture illustrations.

What dependencies are required to generate Salesforce visuals with Nano Banana?▼

To generate Salesforce visuals with Nano Banana, the required dependencies are google-genai and pillow. These libraries support the rendered image generation and processing workflows for ERDs and UI mockups.

Related Skills

Explore More Design & Creative Skills→
abhiunixabhiunix
1

nano-banana-pro

Generate or edit images with Gemini 3 Pro Image via a local script.

Community
Intermediate
jg-chalk-iojg-chalk-io

moai-mermaid-diagram-expert

Render Mermaid diagrams into SVG and PNG images via CLI.

Community
Advanced
CollabalistCollabalist

applying-slds

Apply Salesforce Lightning Design System guidelines to UI components.

Community
Intermediate
CollabalistCollabalist

generating-visual-diagrams

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

Community
Advanced