generating-visual-diagrams — Skills

What it does

PNG / SVG-style rendered image output

Visual ERDs and architecture diagrams

LWC or Experience Cloud mockups / wireframes

Image edits on previously generated visuals

Mermaid or text-only diagrams → generating-mermaid-diagrams

Object / field metadata discovery for ERDs → generating-custom-object or generating-custom-field

LWC implementation after the mockup is approved → generating-lwc-components

generating visual diagrams

Source

Repository: https://github.com/forcedotcom/sf-skills

generating-visual-diagrams FAQ

What does the generating-visual-diagrams skill do?

AI-powered image generation for Salesforce visuals via Nano Banana Pro. Use this skill when the user needs rendered PNG/SVG output such as visual ERDs (Entity Relationship Diagrams), UI mockups, wireframes, or architecture illustrations. TRIGGER when: user asks for PNG/SVG output, UI mockups, wireframes, visual ERDs, or says \"generate image\" / \"create mockup\". DO NOT TRIGGER when: text-based Mermaid diagrams (use generating-mermaid-diagrams), or non-visual documentation tasks. PNG / SVG-style rendered image output Visual ERDs and architecture diagrams

What does generating-visual-diagrams require?

Use this skill when the user needs rendered visuals, not text diagrams: ERDs, UI mockups, architecture illustrations, slide-ready images, or image edits using Nano Banana Pro. | Need | Delegate to | Reason | Configuration keys: GEMINI_API_KEY.

How do I install generating-visual-diagrams?

Run: npx -y skills add https://github.com/forcedotcom/sf-skills --skill generating-visual-diagrams --agent claude-code — the source lives at github.com/forcedotcom/sf-skills.

Maintain generating-visual-diagrams?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[generating-visual-diagrams on getagentictools](https://getagentictools.com/skills/forcedotcom-sf-skills-generating-visual-diagrams?ref=badge)

npx agentictools info skills/forcedotcom-sf-skills-generating-visual-diagrams

The second line is the CLI lookup for this page — handy in READMEs and docs.