fec-image-generation

图片生成与图表工作流

用途

生成或编辑图表、视觉资产和图片工作流，并对导出的 PNG 做可复查的自检与修复迭代。

流程

1. 判断产物类型

   • 文本、结构和连线准确性优先时，用 Mermaid、SVG、HTML/CSS、canvas 或图表库生成可编辑源，再导出 PNG。
   • 需要单文件浏览器打开、暗/亮主题和结构化 QA 的系统蓝图、架构图、部署拓扑、Agent runtime、memory flow、before-after architecture、流程、序列、数据流、生命周期、runbook、状态机或 PII/数据血缘图时，使用 HTML technical diagrams。
   • 流程地图、审批流、自动化运行、异常路径和循环运营流需要清晰的起止节点、决策、参与者、步骤编号和摘要，但不需要 diagrams.net 时，使用 HTML workflow 路线。
   • 系统、Agent、memory、数据或 tool-call 图需要语义节点形状、有含义的连线和可浏览器打开、可导出、可 QA 的源文件时，使用主题化 HTML technical diagrams。
   • 用户需要在本地浏览器里看到节点和连线实时出现，或需要在会话中拖拽、改标签、删除、缩放并快速导出草图时，使用交互式实时图表路线。
   • 审美、质感、照片、插画、漫画、产品图或品牌氛围优先时，用图片生成或编辑工具，再把最终资产保存到项目或报告目录。

2. 明确输入与约束

   • 收集受众、用途、尺寸、语言、必须出现的文本、品牌限制、可编辑源格式、导出格式和禁用元素。
   • 对海报、UI 样机、品牌板和产品图，先写出一行视觉读取：目标用户、场景、可信感来源、主视觉锚点。

3. 选择生成路线

   • ER 图、UML 类图、序列图、技术架构图、ML/深度学习、流程图等，优先按 diagram-workflows.md 建立结构化源。
   • 浏览器可打开的系统蓝图、架构、流程、序列、数据流和生命周期图，先读 html-technical-diagrams.md，再用 tech-diagram-render.mjs 渲染 JSON IR。流程工作流用 lanes 表达参与方，用 nodes 表达有序动作，用 edges 表达异常或回环路径，并可添加 waypoints：

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

   • Agent 和 memory 图优先使用 architecture IR，并使用 agent、model、memory、vectorstore、graphdb、tool、document、queue、browser、user、gateway 等语义节点类型。连线含义重要时添加 flow：control、data、read、write、async、feedback；出现两种以上 flow 时自动生成 flow legend。
   • 需要源文件级主题方向时可添加 visual.style：default、terminal、blueprint、minimal、glass、warm、openai 或 editorial-dark。这些是交付主题，不等同于品牌规范承诺。
   • 需要从生成好的 HTML/SVG 源导出适合 README 的 SVG、PNG、JPG 或 JPEG 交付物时，使用 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，打开服务提供的 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"}'
     

   • 海报、UI 样机、产品图、信息图、学术图、漫画、头像、分镜、品牌板和图像编辑，按 artifact-routing.md 选择生成、编辑或混合路线。