图像生成与图表工作流

目的

生成或编辑图表、视觉资产及图像处理流程，并对导出的PNG文件进行可审查的自检与迭代修复。

操作步骤

1. 确定产品类型

- 当文本准确性、结构清晰度和连接关系是首要考虑因素时，应使用 Mermaid、SVG、HTML/CSS、canvas 或图形库生成可编辑源文件，再导出为PNG。

- 若用户需要一个可直接在浏览器中运行的单文件，支持深色/浅色主题切换的技术类图表（如系统蓝图、架构图、部署拓扑、代理运行时、内存流动、前后架构对比、工作流、序列图、数据流图、生命周期图、操作手册、状态机图、PII/数据血缘图等），请使用HTML技术图表。

- 对于流程图、审批路径、自动化执行、异常分支和循环运营流程，建议使用HTML workflow 路由，以实现清晰的起始/结束节点、决策节点、参与者、编号步骤和总结内容展示，无需依赖 diagrams.net。

- 当系统、代理、记忆、数据或工具调用地图需要语义化节点形状、流向感知箭头，并且希望保持浏览器可运行的源文件以便后续导出与质量检查时，应使用带主题的HTML技术图表。

- 若用户希望在本地浏览器中逐个观察节点与边的动态出现过程，或需要在会话期间拖拽、重命名、删除节点、缩放视图并导出快速草图，则使用交互式实时图表路由。

- 当美学、纹理、照片、插画、漫画、产品图像或品牌氛围是核心关注点时，应使用图像生成或编辑工具，最终将成品资产保存至项目或报告目录。

1. 明确输入与约束条件

- 收集目标受众、用途、尺寸、语言、必需文本、品牌限制、可编辑源格式、导出格式以及禁用元素。

- 针对海报、UI原型、品牌手册、产品图像等场景，首先撰写一句视觉阅读引导：目标用户、使用场景、可信来源以及主要视觉锚点。

1. 选择生成路径

- ER图、UML类图、序列图、技术架构图、机器学习/深度学习图、流程图等，优先根据 [diagram-workflows.md](references/diagram-workflows.md) 创建结构化源文件。

- 对于带主题的浏览器就绪型系统蓝图、架构图、工作流图、序列图、数据流图和生命周期图，请先查阅 [html-technical-diagrams.md](references/html-technical-diagrams.md)，然后通过 [tech-diagram-render.mjs](scripts/tech-diagram-render.mjs) 渲染JSON中间表示（IR）：

     node skills/fec-image-generation/scripts/tech-diagram-render.mjs --input diagram.json --output diagram.html --type architecture --manifest diagram.layout.json

- 代理与记忆图推荐使用 architecture 类型的IR，包含语义化节点类型如 agent、model、memory、vectorstore、graphdb、tool、document、queue、browser、user、gateway。当箭头含义重要时，添加连接的 flow 值（如 control、data、read、write、async、feedback）；多个 flow 类型将自动生成流向图例。

- 可选参数 visual.style 用于指定源文件自带的主题方向：default、terminal、blueprint、minimal、glass、warm、openai 或 editorial-dark。这些仅为交付主题，不可作为品牌保证。

- 当需要从生成的HTML/SVG源文件导出适合README使用的SVG、PNG、JPG或JPEG文件时，使用 [export-diagram.mjs](scripts/export-diagram.mjs) 工具：

     node skills/fec-image-generation/scripts/export-diagram.mjs --input diagram.html --format svg
     node skills/fec-image-generation/scripts/export-diagram.mjs --input diagram.html --format png --output diagram.png --scale 2

- 对于实时交互草图，启动 [interactive-diagram-server.mjs](scripts/interactive-diagram-server.mjs)，在浏览器中打开 [interactive-diagram.html](assets/interactive-diagram.html) 页面并附带唯一 ?s=session-id 参数，随后向 /cmd?s=session-id 发送小量JSON指令：

     node skills/fec-image-generation/scripts/interactive-diagram-server.mjs --port 6100
     curl -s "http://127.0.0.1:6100/cmd?s=checkout-flow" -d '{"cmd":"init","title":"Checkout Flow","direction":"TB"}'
     curl -s "http://127.0.0.1:6100/cmd?s=checkout-flow" -d '{"cmd":"node","id":"cart","label":"Review cart","type":"process"}'

- 若重点在于可编辑的 .drawio 源文件、官方 diagrams.net 形状或长期手动编辑，应改用 draw.io 工作流。

- 海报、UI原型、产品图形、信息图、学术图示、漫画、头像、故事板、品牌手册及图像编辑任务，请参考 [artifact-routing.md](references/artifact-routing.md) 选择生成、编辑或混合路由。

1. 导出并自检PNG

- 在每次交付前仔细检查导出的PNG文件，确认主体是否完整渲染、文字是否被截断、连接线是否堆叠、节点是否存在重叠。

- 若存在布局说明文件，运行以下命令进行质量检查：

     node skills/fec-image-generation/scripts/png-qa.mjs --png output.png --manifest layout.json --format markdown

- 若无布局说明文件，仍可执行基础PNG检查：

     node skills/fec-image-generation/scripts/png-qa.mjs --png output.png --format json

1. 自动修复循环

- 默认最多执行2轮修复；若用户明确要求，可提升至软上限5轮。

- 修复对象为源文件、提示词、布局参数或导出尺寸，不会直接破坏性修改PNG像素。

- 点击 [png-qa-autofix.md](references/png-qa-autofix.md) 将问题转化为具体修复方案：如扩大画布、换行处理、移动节点、分层连接、调整内边距或重新导出。

1. 交付记录

- 记录最终源文件位置、PNG路径、构建路径、质量检查轮次、发现问题及修复情况，以及仍需人工确认的文本或品牌风险项。

约束条件

• 文字密集型图像不应仅依赖位图模型生成；必须保留可编辑的结构化源文件。
• HTML技术图表必须同时保存JSON源文件与生成的HTML文件；导出的PNG/SVG/JPG仅为交付成果，非源文件真相。若需官方厂商图标或长期手动编辑，请使用 .drawio 格式。
• 带主题的语义化图表由 Frontend Craft 渲染器实现。禁止将 Python、Shell、cairosvg、rsvg-convert、Puppeteer、CDN抓取库、复制的SVG模板或外部图标包作为此路径的必要依赖。
• 交互式实时图表仅用于会话期间的预览。一旦图表成为正式交付物，务必保存其JSON/SVG/PNG导出版本；若需长期源文件所有权，请切换至HTML技术图表或 .drawio 格式。
• 除非用户明确请求概念草稿，否则不得将截图、虚假数据或占位图视为最终产品图像。
• 原始图像不会被直接覆盖；编辑工作流默认输出新文件。
• 可读标签、线条标注、图例、坐标轴及无障碍替代描述不得为追求美观而牺牲。
• PNG辅助工具仅负责检测与建议；修复必须回溯至源文件、提示词或布局参数。
• 自检结果不能替代对专有名词、公式、论文插图、品牌规范及合规信息的手动确认。

预期输出

生成可编辑源文件、最终PNG或已编辑图像，并附上生成路径与质量检查结果。图表应结构清晰，标签无遮挡，连接线不杂乱；视觉资产应符合用途、尺寸、品牌调性与交付路径要求。