Back to Details

generating-visual-diagrams

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

generating-visual-diagrams: Salesforce Visual AI Skill

generating-visual-diagrams：Salesforce视觉AI技能

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.
当用户需要渲染后的视觉内容而非文本图表时，使用此技能：ERD、UI原型、架构示意图、可用于幻灯片的图像，或借助Nano Banana Pro进行图像编辑。

Scope

适用范围

In scope:
  • PNG / SVG-style rendered image output
  • Visual ERDs and architecture diagrams
  • LWC or Experience Cloud mockups / wireframes
  • Image edits on previously generated visuals
Out of scope — delegate instead:
  • 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
  • Apex review / implementation → generating-apex
包含场景：
  • PNG/SVG格式的渲染图像输出
  • 可视化ERD与架构图
  • LWC或Experience Cloud原型/线框图
  • 对已生成视觉内容的图像编辑
不包含场景，请转至对应技能：
  • Mermaid或纯文本图表 → generating-mermaid-diagrams
  • 用于ERD的对象/字段元数据查询 → generating-custom-object 或 generating-custom-field
  • 原型获批后的LWC实现 → generating-lwc-components
  • Apex代码审查/实现 → generating-apex

Hard Gate: Prerequisites First

硬性要求：先检查前置条件

Run the prerequisites check before using the skill:
bash
scripts/check-prerequisites.sh
If prerequisites fail, stop and route the user to setup guidance in:
  • references/gemini-cli-setup.md
使用本技能前，请运行前置条件检查：
bash
scripts/check-prerequisites.sh
若前置条件检查失败，请停止操作并引导用户查看设置指南：
  • references/gemini-cli-setup.md

Required Inputs

必填输入项

Ask for or infer before generating:
InputDefault if not provided
Image typeERD
Subject scope and key entities / systemsAsk the user
Target qualityDraft (1K)
Preferred stylearchitect.salesforce.com aesthetic
Aspect ratioDefault (no override)
Quick mode or interview modeInterview mode
生成前需询问或推断以下内容：
输入项未提供时的默认值
图像类型ERD
主题范围与核心实体/系统询问用户
目标画质草稿版（1K）
偏好风格architect.salesforce.com风格
宽高比默认（不覆盖）
快速模式或访谈模式访谈模式

Interview-First Workflow

优先访谈工作流

Unless the user asks for quick / simple / just generate, ask clarifying questions first using the question bank in references/interview-questions.md.
Request typeAsk about
ERD / schemaobjects, visual style, purpose, extras
UI mockupcomponent type, object/context, device/layout, style
architecture imagesystems, boundaries, protocols, emphasis
image editwhat to keep, what to change, output quality
Quick mode defaults (triggered by "quick", "simple", "just generate", "fast"):
  • professional style, 1K draft, legend included, one image first then iterate
除非用户要求快速/简单/直接生成，否则请先使用references/interview-questions.md中的问题库询问澄清问题。
请求类型需询问的内容
ERD/架构图对象、视觉风格、用途、额外需求
UI原型组件类型、对象/上下文、设备/布局、风格
架构示意图系统、边界、协议、重点展示内容
图像编辑保留内容、修改内容、输出画质
快速模式默认设置（触发关键词："quick"、"simple"、"just generate"、"fast"）：
  • 专业风格、1K草稿版、包含图例、先生成一张图再迭代

Recommended Workflow

推荐工作流

1. Run prerequisites check

1. 运行前置条件检查

Run 
scripts/check-prerequisites.sh
and confirm all required tools pass before proceeding.
运行
scripts/check-prerequisites.sh
，确认所有必需工具通过检查后再继续。

2. Gather inputs

2. 收集输入信息

  • object list / metadata (delegate to 
    generating-custom-object
    / 
    generating-custom-field
    if needed)
  • purpose: draft vs presentation vs documentation
  • desired aesthetic — read references/architect-aesthetic-guide.md for ERDs
  • aspect ratio / resolution
  • 对象列表/元数据（若需可转至
    generating-custom-object
    /
    generating-custom-field
    技能）
  • 用途：草稿版 vs 演示版 vs 文档版
  • 期望风格 — 如需生成ERD，请阅读references/architect-aesthetic-guide.md
  • 宽高比/分辨率

3. Run interview or use quick-mode defaults

3. 执行访谈或使用快速模式默认设置

Load references/interview-questions.md for the matching question set (ERD, LWC, architecture, code review).
加载references/interview-questions.md中匹配请求类型的问题集（ERD、LWC、架构、代码审查）。

4. Build a concrete prompt

4. 构建明确的提示词

Good prompts specify subject, composition, color treatment, labels/legends, and output quality goal.
优质提示词需明确主题、构图、色彩处理、标签/图例及输出画质目标。

5. Generate a fast draft at 1K

5. 生成1K快速草稿

bash
gemini --yolo "/generate 'Your prompt here'"
Open the result and review layout before spending on higher resolution.
bash
gemini --yolo "/generate 'Your prompt here'"
打开结果并检查布局，再生成更高分辨率的版本。

6. Iterate using edits

6. 通过编辑进行迭代

bash
gemini --yolo "/edit 'Specific change instruction'"
Use 
/edit
for small adjustments — cheaper than regenerating. See references/iteration-workflow.md.
bash
gemini --yolo "/edit 'Specific change instruction'"
使用
/edit
进行小幅调整 — 比重新生成更经济高效。详情请见references/iteration-workflow.md。

7. Generate final at 2K/4K using the Python script

7. 使用Python脚本生成2K/4K最终版本

Run 
scripts/generate_image.py
when layout is confirmed:
bash
uv run scripts/generate_image.py -p "Refined prompt" -f "output.png" -r 4K
确认布局后，运行
scripts/generate_image.py
：
bash
uv run scripts/generate_image.py -p "Refined prompt" -f "output.png" -r 4K

8. Error recovery

8. 错误恢复

  • If 
    gemini --yolo
    returns no image: re-run once; if it fails again, fall back to the Python script path.
  • If the Python script fails with 
    GEMINI_API_KEY not found
    : verify the key is exported in your shell profile (
    ~/.zshrc
    on macOS/zsh, 
    ~/.bashrc
    on Linux) and the terminal session is refreshed.
  • If the extension is missing: run 
    gemini extensions install nanobanana
    and re-run the prerequisites check.
  • 若
    gemini --yolo
    未返回图像：重新运行一次；若仍失败，则改用Python脚本路径。
  • 若Python脚本因
    GEMINI_API_KEY not found
    失败：验证密钥已导出到shell配置文件（macOS/zsh为
    ~/.zshrc
    ，Linux为
    ~/.bashrc
    ）并刷新终端会话。
  • 若缺少扩展：运行
    gemini extensions install nanobanana
    并重新检查前置条件。

Default Style Guidance

默认风格指南

For ERDs, default to the architect.salesforce.com aesthetic unless the user asks otherwise:
  • dark border + light fill cards
  • cloud-specific accent colors
  • clean labels and relationship lines
  • presentation-ready whitespace and hierarchy
Full style specification: references/architect-aesthetic-guide.md
生成ERD时，除非用户另有要求，默认采用architect.salesforce.com风格：
  • 深色边框+浅色填充的卡片
  • 云服务专属强调色
  • 清晰的标签与关系线
  • 适合演示的留白与层级结构
完整风格规范：references/architect-aesthetic-guide.md

Common Patterns

常见场景处理

PatternDefault approach
visual ERDget metadata if available, then render a draft first
LWC mockupload assets/lwc/data-table.md, assets/lwc/record-form.md, or assets/lwc/dashboard-card.md for the matching template
architecture illustrationload assets/architecture/integration-flow.md; emphasize systems and flows
image refinementuse 
/edit
for small changes before regenerating
final production assetswitch to script-driven 2K/4K generation via 
scripts/generate_image.py
Apex / LWC code reviewload assets/review/apex-review.md or assets/review/lwc-review.md for the review prompt template
场景默认处理方式
可视化ERD若有元数据则先获取，再生成草稿
LWC原型加载匹配的模板：assets/lwc/data-table.md、assets/lwc/record-form.md或assets/lwc/dashboard-card.md
架构示意图加载assets/architecture/integration-flow.md；重点展示系统与流程
图像优化在重新生成前，使用
/edit
进行小幅调整
最终生产资产通过
scripts/generate_image.py
切换为脚本驱动的2K/4K生成
Apex/LWC代码审查加载匹配的审查提示模板：assets/review/apex-review.md或assets/review/lwc-review.md

Output Expectations

输出预期

Deliverables produced by this skill:
  • Draft image (
    <name>.png
    ) — 1K resolution rendered via 
    gemini --yolo "/generate ..."
    for layout review
  • Final image (
    <name>.png
    ) — 2K or 4K resolution rendered via 
    scripts/generate_image.py
    once composition is approved
  • Edit iteration (
    <name>.png
    ) — incremental refinement via 
    gemini --yolo "/edit ..."
    without full regeneration
After delivering each image:
  • Open the file in Preview or attach it in the session for multimodal review
  • Ask the user whether to iterate on layout, labeling, or color before finalizing
  • Only proceed to high-res output after draft composition is confirmed
本技能生成的交付物：
  • 草稿图像（
    <name>.png
    ）— 1K分辨率，通过
    gemini --yolo "/generate ..."
    生成，用于布局审查
  • 最终图像（
    <name>.png
    ）— 2K或4K分辨率，确认构图后通过
    scripts/generate_image.py
    生成
  • 编辑迭代版本（
    <name>.png
    ）— 通过
    gemini --yolo "/edit ..."
    进行增量优化，无需重新生成
交付每张图像后：
  • 在预览中打开文件或在会话中附加，以便进行多模态审查
  • 询问用户是否需要在布局、标签或色彩上进行迭代后再定稿
  • 仅在草稿构图确认后才生成高分辨率版本

Rules / Constraints

规则/约束

RuleRationale
Always run prerequisites check before any generationMissing tools produce silent failures
Always draft at 1K before generating at 4KCost and time savings; composition changes at high res are wasteful
Use 
/edit
for incremental changes, not full regeneration		Cheaper and faster for small adjustments
Never commit 
GEMINI_API_KEY
to version control		Key is personal and tied to billing
Delegate text diagrams to 
generating-mermaid-diagrams
This skill owns rendered images only
规则理由
生成前必须运行前置条件检查缺失工具会导致静默失败
生成4K版本前必须先生成1K草稿节省成本与时间；高分辨率下修改构图效率低下
使用
/edit
进行增量调整，而非重新生成		小幅调整更经济高效
切勿将
GEMINI_API_KEY
提交至版本控制		密钥为个人所有且与计费绑定
将文本图表转至
generating-mermaid-diagrams
技能处理		本技能仅负责渲染后的图像

Gotchas

常见问题

IssueResolution
Edit not applying correctlyBe specific: reference existing elements by name; one change at a time
4K output looks different from 1K draftUse exact same prompt text; minor variations are normal model behavior
gemini --yolo
fails silently		Check that the Nano Banana extension is installed: 
gemini extensions list
Image dimensions wrongSet 
--aspect-ratio
explicitly in 
scripts/generate_image.py
using 
-a "16:9"
RGBA image causes errors in Python scriptScript auto-converts RGBA→RGB; ensure Pillow is installed via 
uv
问题解决方案
编辑未正确应用明确描述：按名称引用现有元素；每次仅修改一项
4K输出与1K草稿不一致使用完全相同的提示词；模型行为存在细微差异属正常情况
gemini --yolo
静默失败		检查是否已安装Nano Banana扩展：
gemini extensions list
图像尺寸错误在
scripts/generate_image.py
中使用
-a "16:9"
明确设置
--aspect-ratio
RGBA图像导致Python脚本出错脚本会自动将RGBA转换为RGB；确保已通过
uv
安装Pillow

Cross-Skill Integration

跨技能集成

NeedDelegate toReason
Mermaid first draft or text diagramgenerating-mermaid-diagramsfaster structural diagramming
Object / field discovery for ERDgenerating-custom-object / generating-custom-fieldaccurate schema grounding
Turn mockup into real LWC componentgenerating-lwc-componentsimplementation after design
Apex review / implementationgenerating-apexcode-quality follow-up
需求转至技能理由
Mermaid草稿或文本图表generating-mermaid-diagrams结构图表制作速度更快
ERD的对象/字段查询generating-custom-object / generating-custom-field确保架构基础准确
将原型转换为真实LWC组件generating-lwc-components设计完成后的实现环节
Apex代码审查/实现generating-apex代码质量跟进

Reference File Index

参考文件索引

FileWhen to read
references/gemini-cli-setup.mdPrerequisites fail — Gemini CLI / Nano Banana setup guidance
references/interview-questions.mdStep 3 — load question set matching the request type
references/iteration-workflow.mdStep 6 — draft-to-final iteration patterns and cost tips
references/architect-aesthetic-guide.mdStep 4 — ERD color palettes, box styles, prompt templates
references/examples-index.mdStep 4 — example prompts for ERD, LWC, architecture, code review
assets/erd/core-objects.mdStep 4 — prompt template for core CRM objects (Account, Contact, Opportunity, Case)
assets/erd/custom-objects.mdStep 4 — prompt template for custom object ERDs
assets/lwc/data-table.mdStep 4 — prompt template for lightning-datatable mockups
assets/lwc/record-form.mdStep 4 — prompt template for lightning-record-form mockups
assets/lwc/dashboard-card.mdStep 4 — prompt template for dashboard card / metric tile mockups
assets/architecture/integration-flow.mdStep 4 — prompt template for integration architecture diagrams
assets/review/apex-review.mdStep 4 — Gemini review prompt template for Apex code
assets/review/lwc-review.mdStep 4 — Gemini review prompt template for LWC components
scripts/check-prerequisites.shStep 1 — run to verify all required tools are installed
scripts/generate_image.pyStep 7 — run for 2K/4K resolution output and image editing with resolution control
文件阅读时机
references/gemini-cli-setup.md前置条件检查失败时 — Gemini CLI/Nano Banana设置指南
references/interview-questions.md步骤3 — 加载匹配请求类型的问题集
references/iteration-workflow.md步骤6 — 草稿到最终版本的迭代模式与成本优化技巧
references/architect-aesthetic-guide.md步骤4 — ERD调色板、框体样式、提示词模板
references/examples-index.md步骤4 — ERD、LWC、架构、代码审查的示例提示词
assets/erd/core-objects.md步骤4 — 核心CRM对象（Account、Contact、Opportunity、Case）的提示词模板
assets/erd/custom-objects.md步骤4 — 自定义对象ERD的提示词模板
assets/lwc/data-table.md步骤4 — lightning-datatable原型的提示词模板
assets/lwc/record-form.md步骤4 — lightning-record-form原型的提示词模板
assets/lwc/dashboard-card.md步骤4 — 仪表盘卡片/指标 tile原型的提示词模板
assets/architecture/integration-flow.md步骤4 — 集成架构图的提示词模板
assets/review/apex-review.md步骤4 — Apex代码的Gemini审查提示词模板
assets/review/lwc-review.md步骤4 — LWC组件的Gemini审查提示词模板
scripts/check-prerequisites.sh步骤1 — 运行以验证所有必需工具已安装
scripts/generate_image.py步骤7 — 运行以生成2K/4K分辨率输出，并通过分辨率控制进行图像编辑