---
name: edge-svg-diagram
description: edge_collector 可编辑 SVG 图示规范。用于用户要求画架构图、部署拓扑图、协议链路图、流程图、方案配图、报告示意图时，生成可提交到 docs 的静态 SVG，并结合当前边缘/云平台/鲁班猫/协议采集场景设计。
---

# edge_collector SVG 图示

## 适用场景

- 云边架构图
- 边缘 runtime 目录结构图
- 协议采集链路图
- FANUC helper / proxy 架构图
- OTA 升级流程图
- AI 本地模型部署图
- WiFi/4G/frpc/端口转发 agent 关系图

## 输出位置

- 文档配图优先放在对应文档旁边的子目录，例如 `docs/assets/` 或专题目录下。
- 文件名使用清晰中文或 `snake_case`，扩展名 `.svg`。
- Markdown 中使用相对路径引用。

## 设计要求

- SVG 必须可编辑、可 diff。
- 使用真实项目元素命名：`collector`、`configurator`、`cloud_server`、`runtime/edge`、`scripts/migrate_edge.sh`。
- 不使用复杂渐变和难维护滤镜。
- 字号、间距、线条保持清晰，适合 Markdown 预览。
- 区域超过 3 个或节点超过 8 个时，先做布局骨架，再补细节。

## 风格规则

按用途选择风格，不要混用：

- 文档/方案/报告配图：优先浅色、打印友好，白色或近白背景，深色文字，少量蓝/绿/橙用于区分云端、边缘、设备、风险。
- 前端原型/交互说明图：应贴近当前前端暗色风格，参考 `frontend/config_app` 和 `frontend/cloud_app` 的视觉基线：
  - 背景：`#0d0d14`、`#14141e`
  - 边框：`#2a2a3a`
  - 主文字：`#e0e0e0`
  - 标题/高亮文字：`#ffffff`
  - 强调色：`#6366f1`
  - 状态色按现有页面语义选择，避免一整张图只有紫蓝色
  - 避免营销页式大渐变和装饰感过强的科技视觉
- 用户故事中的业务场景图：优先清晰、业务化，不必强行模拟前端 UI；如果故事本身是前端页面或交互改造，再使用暗色项目风格。

## 推荐布局

- 云边拓扑：左边缘、右云端，中间网络/隧道。
- 进程架构：上层 UI/API，中层服务，底层配置/数据库/设备。
- 部署流程：从构建主机到 runtime 到目标主机。

## 验证

- 用浏览器或图片查看工具打开 SVG。
- 确认文字不重叠、不截断。
- 确认中文显示正常。
- 确认风格与用途匹配：文档图可打印，前端原型图与项目暗色主题一致。
- 文档引用路径有效。