<快速开始> 1. 确定所需的图表类型（架构、流程或组件） 2. 阅读 `references/svg-patterns.md` 了解模板和调色板 3. 使用已建立的模式生成SVG 4. 使用描述性文件名保存到目标目录 5. 根据需要导出为 PNG（通过 `agent-browser`）或 WebP（通过 `cairosvg`） <设计系统> ## 调色板目的|颜色 |十六进制 ---|---|--- 背景|浅灰色| #法法法网格线|微妙的灰色| #e5e5e5 主要文本|深灰色|第333章辅助文本|中灰色|第666章静音文本 |浅灰色|第999章边框/箭头|灰色| #ccc 成功/积极 |绿色| #27ae60 错误/负面 |红色| #e74c3c 主要口音|蓝色| #3498分贝警告/沙箱 |橙色| #f39c12 工艺步骤|紫色| #9b59b6 ## 版式 * **字体系列：** 所有文本均为“等宽” * **标题：** 14px 粗体，#333 * **字幕/标签：** 12px，#888，括号内`[ LIKE_THIS ]` * **标签：** 10-11px，颜色与元素匹配 * **注释：** 7-8px，#999 ## 常用元素 **网格背景：** <模式id =“网格”宽度=“20”高度=“20”patternUnits =“userSpaceOnUse”> <路径d =“M 20 0 L 0 0 0 20”填充=“无”笔画=“#e5e5e5”笔画宽度=“0.5”/> **箭头标记：** <路径 d="M0,0 L0,6 L9,3 z" fill="#ccc"/> **节点（带内点的圆圈）：** <圆cx =“X”cy =“Y”r =“35”填充=“无”笔画=“#ccc”笔画宽度=“2”/> **盒式容器：** <矩形x =“X”y =“Y”宽度=“W”高度=“H”填充=“无”描边=“#ccc”描边宽度=“2”/> **虚线容器（沙箱/隔离）：** <矩形x =“X”y =“Y”宽度=“W”高度=“H”填充=“无”笔画=“#f39c12”笔画宽度=“2”笔画dasharray=“5,3”/> **标签盒：** <矩形x =“X”y =“Y”宽度=“W”高度=“H”填充=“无”描边=“#ccc”描边宽度=“1”/> LABEL_NAME <图表类型> ## 架构图显示系统组件的水平从左到右流程。 **用途：**前后比较、系统概述、数据流 **结构：** * 标题+标签位于左上角 * 组件从左到右流动 * 箭头连接组件 * 底部注释总结了要点 **尺寸：** 800x350 至 800x400 ## 流程图垂直从上到下显示流程步骤。 **用于：** 执行流程、请求生命周期、分步流程 **结构：** * 标题+标签位于顶部 * 垂直虚线引导线 * 由带有多边形头的箭头连接的步骤 * 分支决策菱形 * 省略号表示开始/结束状态 **尺寸：** 600x700（调整台阶高度） ## 组件图单个组件内部的集中视图。 **用途：** 显示内部结构、嵌套元素、详细分解 **结构：** * 外包装盒 * 带有语义颜色的内部元素 * 容器上方或下方的标签 1. **确定类型和尺寸** * 架构：800x350-400，水平 * 流量：600x700+，垂直 * 成分：因内容而异 2. **设置SVG结构** 3. **使用references/svg-patterns.md中的模式添加组件** 4. **用箭头连接** * 实线表示主流 * 虚线表示二次流/回流 * 使用 opacity="0.5" 作为响应箭头 5. **添加标签** * SCREAMING_SNAKE_CASE 中的组件名称 * lowercase_snake_case 中的动作标签 * 使用 text-anchor="middle" 居中文本 6. **使用描述性文件名保存** * `图表前.svg`, `图表后.svg` * `diagram-flow.svg`, `diagram-architecture.svg` 图表在以下情况下完成： * 使用一致的调色板 * 所有文本均为等宽字体 * 应用网格背景 * 标题带有括号标签 * 组件用箭头正确连接 * 标签清晰且位置正确 * 包括底部摘要注释 * SVG 有效并正确渲染 * 如果需要光栅输出，则导出为 PNG 或 WebP 创建 SVG 后，根据需要导出为光栅格式。 ### 通过代理浏览器的 PNG（推荐）使用真正的浏览器引擎进行像素完美渲染。需要“代理浏览器”技能。 **第 1 步：创建 HTML 包装器** 面包运行脚本/create-html.ts --svg图.svg --输出图.html 选项： * `--padding ` — SVG 周围的填充（默认值：40） * `--background ` — 覆盖自动检测的背景 **第 2 步：捕获高分辨率 PNG** 代理浏览器设置视口 3840 2160 代理浏览器打开“file://$(pwd)/diagram.html” 代理浏览器等待 1000 代理浏览器屏幕截图--完整的diagram.png 代理浏览器关闭 **步骤 3：清理** rm 图.html ### WebP 通过 cairosvg 轻量级，无需浏览器。当代理浏览器不可用时最好。 uvx --来自 cairosvg cairosvg 图.svg -o 图.png --输出宽度 1600 uvx --withpillow python -c "from PIL import Image; Image.open('diagram.png').save('diagram.webp', 'WEBP', lossless=True)" rm图.png 注意：“lossless=True”最适合图表——比有损小且质量完美。 **替代工具（如果有）：** #ImageMagick 转换-背景无-密度150 图.svg 图.webp # librsvg + cwebp rsvg-convert -w 1600 图.svg -o 图.png && cwebp 图.png -o 图.webp **平台说明：** * macOS：如果 cairosvg 失败，则“brew install cairo” * Linux：如果需要`apt install libcairo2-dev`

技术 Svg 图表

包含技能