菜单
生成浏览器可直接展示、缩放和嵌入网页或文档的高质量静态 SVG 矢量图。用于用户明确要求 SVG、矢量图、网页配图或展示型架构图；支持业务、应用、系统、技术、部署、数据架构，以及流程、生命周期、状态、时序、ER、依赖、知识关系、对比、决策矩阵、SWOT、时间线、路线图和总结图。不用于 Draw.io 可编辑 XML、Mermaid 或照片插画。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | svg-generator |
| description | 生成浏览器可直接展示、缩放和嵌入网页或文档的高质量静态 SVG 矢量图。用于用户明确要求 SVG、矢量图、网页配图或展示型架构图；支持业务、应用、系统、技术、部署、数据架构，以及流程、生命周期、状态、时序、ER、依赖、知识关系、对比、决策矩阵、SWOT、时间线、路线图和总结图。不用于 Draw.io 可编辑 XML、Mermaid 或照片插画。 |
生成自包含 UTF-8 SVG。用户未指定目录时保存到项目根目录 output/svg/；需要拖拽编辑时改用 xml-diagram。
references/svg-dsl.md。references/quality-rules.md。templates/*.svg，再参考同类型 examples/*.svg；禁止只替换标题后交付。分析需求 → 详细自然语言 DSL → 匹配模板 → 计算布局 → 生成 SVG
→ 严格源文件校验 → 浏览器渲染检查 → 修正并交付
确定图形目的、受众、图形类型、浅色或深色主题、阅读方向、内容层级、核心关系和输出路径。区分用户明确内容、合理补充和不可擅自推断的业务事实。
图形类型从以下目录选择：
不生成系统上下文图；中心系统与外部角色关系优先改为应用架构或依赖关系图。
按 references/svg-dsl.md 写清画布、层级、分区、节点、布局、尺寸、连线、主题和检查要求。DSL 不强制落盘，不使用 JSON、JSON Schema 或 DiagramPlan 作为中间格式。
templates/architecture-business.svg。templates/architecture.svg。templates/architecture-technical.svg。templates/architecture-deployment.svg。templates/architecture-data.svg。用户内容与模板不同，可以增减层和卡片，但必须保留模板的层级、间距和设计语言，不机械保留空层。
先计算区域、标题、卡片、文字和必要连线所需空间，再确定画布。
28-34px，同组等宽、等高、等距；内容过多时规则换行或扩展画布。width、height 与 viewBox 一致。role="img" 和 aria-labelledby，包含 <title>、<desc>。<tspan>，不使用 foreignObject。data-role="node"、data-role="edge"、data-text-role="auxiliary"。background → regions → edges → nodes → labels → legend 分层，保证文字和节点位于连线之上。交付前运行：
python -X utf8 scripts/validate.py output/svg/文件名.svg --strict --render
修改 skill 内模板或示例时运行：
python -X utf8 scripts/validate.py . --strict
python -m unittest discover -s tests -v
校验后查看真实渲染结果，检查颜色搭配、布局均衡、元素重叠、文字清晰度、线条混乱和大面积空白。失败时调整布局或内容，不得通过缩小字体、删除必要节点或扩大空画布规避。
使用纯色画布、两级表面色、统一圆角、清晰边框、极轻阴影和小面积主色强调。禁止网格背景、多重渐变、重阴影、彩虹分层、霓虹描边、装饰噪声、图标风格混用和无语义箭头。深色主题依靠表面层级和边框亮度建立质感。
交付最终 .svg 路径，并说明图形类型、浅色或深色主题及严格校验结果。不要交付临时 PNG、中间 DSL 或其他中间文件，除非用户明确要求。
代码变更规划助手 - 分析需求、设计方案、评估影响，输出可执行的变更计划
代码合并助手 - 分析 Git 冲突、追溯改动原因、提供合并方案
根据自然语言需求或需求文档生成简约、可在 Draw.io/diagrams.net 中继续编辑的 `.drawio` XML 页面原型。用于 XML 原型、Draw.io 原型、可编辑页面原型、后台页面线框图、UI 评审稿和产品页面结构设计；不用于可运行 HTML、架构图、流程图或高装饰性成品 UI。
根据自然语言需求或需求文档生成简约、可交互、浏览器可直接打开的自包含 HTML 原型。用于 HTML 原型、交互原型、页面原型、前端原型、UI 原型、Web mockup、后台管理原型和产品交互验证；不用于正式前端工程、Draw.io 原型、架构图或仅需静态图片的任务。
生成 Mermaid 源码或包含 Mermaid fence 的 Markdown 图表，适用于用户明确要求 Mermaid、Markdown 图表、文档即代码或可 diff 图形。支持 flowchart、sequence、class、ER、state、gantt、gitGraph、journey、pie、mindmap、timeline、quadrant、xy、sankey 和 block。优先保证类型选择、语法、自动布局和文档可维护性，不用于 Draw.io 可编辑 XML、精确坐标 SVG 或照片插画。
生成可在 Draw.io/diagrams.net 中继续编辑的 UTF-8 `.drawio` XML 图形。用于业务/应用/技术/部署/数据架构图、流程图、状态图、生命周期图、时序图、ER/依赖/知识关系图、对比、决策矩阵、SWOT、时间线、路线图和总结图；不用于 Mermaid、静态 SVG、位图插画、统计图表或 UI 原型。