generating-visual-diagrams

generating-visual-diagrams：Salesforce Visual AI Skill

当用户需要渲染后的视觉图像而非文本图表时，使用此 Skill：ERD、UI 模型图、架构插图、适用于幻灯片的图像，或使用 Nano Banana Pro 编辑图像。

范围

适用范围：

• PNG / SVG 风格的渲染图像输出
• 可视化 ERD 和架构图
• LWC 或 Experience Cloud 模型图 / 线框图
• 编辑先前生成的视觉图像

不适用范围 — 改用其他 Skill：

• Mermaid 或纯文本图表 → generating-mermaid-diagrams
• 为 ERD 查找对象 / 字段元数据 → generating-custom-object 或 generating-custom-field
• 模型图获批后的 LWC 实现 → generating-lwc-components
• Apex 审查 / 实现 → generating-apex

---

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

使用此 Skill 前，先运行前置条件检查：

scripts/check-prerequisites.sh

如果前置条件检查失败，请停止操作，并引导用户参考以下设置指南：

• references/gemini-cli-setup.md

---

必要输入

生成前，询问或推断以下信息：

输入	未提供时的默认值
图像类型	ERD
主题范围和关键实体 / 系统	询问用户
目标质量	草稿（1K）
首选风格	architect.salesforce.com 美学风格
宽高比	默认值（不覆盖）
快速模式或访谈模式	访谈模式

---

访谈优先工作流

除非用户要求快速 / 简单 / 直接生成，否则先使用 references/interview-questions.md 中的问题库提出澄清问题。

请求类型	询问内容
ERD / 架构	对象、视觉风格、用途、其他要求
UI 模型图	组件类型、对象 / 上下文、设备 / 布局、风格
架构图像	系统、边界、协议、重点
图像编辑	保留内容、修改内容、输出质量

快速模式默认值（由“quick”“simple”“just generate”“fast”触发）：

• 专业风格、1K 草稿、包含图例，先生成一张图，然后迭代

---

推荐工作流

1. 运行前置条件检查

运行 scripts/check-prerequisites.sh，并确认所有必需工具都通过检查后再继续。

2. 收集输入

• 对象列表 / 元数据（如有需要，委托给 generating-custom-object / generating-custom-field）
• 用途：草稿、演示还是文档
• 预期美学风格 — 对于 ERD，请阅读 references/architect-aesthetic-guide.md
• 宽高比 / 分辨率

3. 进行访谈或使用快速模式默认值

加载 references/interview-questions.md，使用匹配的问题集（ERD、LWC、架构、代码审查）。

4. 编写明确的提示词

优质提示词应说明主题、构图、色彩处理、标签 / 图例和目标输出质量。

5. 生成 1K 快速草稿

gemini --yolo "/generate 'Your prompt here'"

打开结果并检查布局，再决定是否使用更高分辨率。

6. 通过编辑进行迭代

gemini --yolo "/edit 'Specific change instruction'"

使用 /edit 进行小幅调整，这比重新生成更省。请参阅 references/iteration-workflow.md。

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

确认布局后，运行 scripts/generate_image.py：

uv run scripts/generate_image.py -p "Refined prompt" -f "output.png" -r 4K

8. 错误恢复

• 如果 gemini --yolo 没有返回图像：再运行一次；如果再次失败，则改用 Python 脚本路径。
• 如果 Python 脚本因 GEMINI_API_KEY not found 而失败：请确认密钥已在 Shell 配置文件中导出（macOS/zsh 使用 ~/.zshrc，Linux 使用 ~/.bashrc），并刷新终端会话。
• 如果缺少扩展：运行 gemini extensions install nanobanana，然后重新运行前置条件检查。

---

默认样式指南

对于 ERD，除非用户另有要求，默认采用 architect.salesforce.com 美学风格：

• 深色边框 + 浅色填充卡片
• 云特定的强调色
• 简洁的标签和关系线
• 适合演示的留白与层次结构

完整样式规范：references/architect-aesthetic-guide.md

---

常见模式

模式	默认方法
可视化 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 中的审查提示词模板

---

输出预期

此技能生成的交付物：

• 初稿图像（<name>.png）——通过 gemini --yolo "/generate ..." 渲染的 1K 分辨率图像，用于布局审查
• 最终图像（<name>.png）——构图获批后，通过 scripts/generate_image.py 渲染的 2K 或 4K 分辨率图像
• 编辑版本（<name>.png）——通过 gemini --yolo "/edit ..." 进行增量优化，无需完整重新生成

交付每张图像后：

• 在 Preview 中打开文件，或将其附加到会话中进行多模态审查
• 询问用户是否要在定稿前调整布局、标签或颜色
• 仅在初稿构图获得确认后，才继续生成高分辨率图像

---

规则 / 限制

规则	原因
每次生成前都要运行先决条件检查	缺少工具会导致静默失败
始终先生成 1K 初稿，再生成 4K 图像	节省成本和时间；在高分辨率图像上更改构图很浪费
对增量修改使用 /edit，而非完整重新生成	小幅调整更省钱、更快捷
切勿将 GEMINI_API_KEY 提交到版本控制中	密钥属于个人，且与计费相关
将文本图表委派给 generating-mermaid-diagrams	此技能仅负责渲染图像

---

注意事项

问题	解决方案
编辑未正确应用	明确说明：按名称引用现有元素；每次只做一项更改
4K 输出与 1K 初稿看起来不同	使用完全相同的提示词文本；轻微差异属于正常的模型行为
gemini --yolo 静默失败	检查是否已安装 Nano Banana 扩展：gemini extensions list
图像尺寸错误	在 scripts/generate_image.py 中使用 -a "16:9" 显式设置 --aspect-ratio
RGBA 图像导致 Python 脚本报错	脚本会自动将 RGBA 转换为 RGB；通过 uv 确保已安装 Pillow

---

跨技能集成

需求	委派给	原因
Mermaid 初稿或文本图表	generating-mermaid-diagrams	更快地绘制结构图
ERD 对象 / 字段发现	generating-custom-object / generating-custom-field	确保架构依据准确
将模型图转为真实的 LWC 组件	generating-lwc-components	设计完成后进行实现
Apex 审查 / 实现	generating-apex	后续进行代码质量跟进

---

参考文件索引

文件	阅读时机
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 步 — 仪表板卡片 / 指标磁贴模拟图的提示词模板
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 分辨率输出，并通过分辨率控制编辑图像