external-diagram-visual-generate

external-diagram-visual-generate：Salesforce Visual AI 技能

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

范围

适用范围：

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

不适用范围——请转交：

• Mermaid 或纯文本图表 → external-diagram-mermaid-generate
• ERD 的对象 / 字段元数据发现 → platform-custom-object-generate 或 platform-custom-field-generate
• 模型图获批后的 LWC 实现 → experience-lwc-generate
• Apex 审查 / 实现 → platform-apex-generate

---

强制门槛：先检查前置条件

使用此技能前，请运行前置条件检查：

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. 收集输入

• 对象列表 / 元数据（如有需要，转交给 platform-custom-object-generate / platform-custom-field-generate）
• 用途：草稿、演示还是文档
• 期望的美学风格——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 中打开文件，或在会话中附加文件，以便进行多模态审查
• 询问用户是否要在定稿前调整布局、标签或颜色
• 只有在草稿构图得到确认后，才生成高分辨率输出

---

规则 / 约束

规则	原因
每次生成前都要运行先决条件检查	缺少工具会导致静默失败
生成 4K 图像前始终先制作 1K 草稿	节省成本和时间；高分辨率下修改构图会造成浪费
增量修改使用 /edit，不要完整重新生成	小幅调整更便宜、更快捷
绝不将 GEMINI_API_KEY 提交到版本控制中	密钥属于个人，且与计费绑定
将文本图表交由 external-diagram-mermaid-generate 处理	此技能只负责渲染图像

---

注意事项

问题	解决方案
编辑未正确生效	明确描述：按名称引用现有元素；一次只做一项修改
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 初稿或文本图表	external-diagram-mermaid-generate	更快地绘制结构图
ERD 的对象 / 字段发现	platform-custom-object-generate / platform-custom-field-generate	准确依据架构定义
将样稿转化为真实的 LWC 组件	experience-lwc-generate	设计完成后的实现
Apex 审查 / 实现	platform-apex-generate	后续代码质量工作

---

参考文件索引

文件	阅读时机
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 分辨率输出，并通过分辨率控制编辑图像