# Svg Generator

> 根据自然语言描述生成 SVG 代码。支持流程图、卡片、图表、图标等常用图形，输出可直接在浏览器中查看的 SVG 文件。当用户提到 SVG、生成图片、图形、图标、流程图时触发。

- **Type:** Skill
- **Install:** `agentstack add skill-bewatermyfriend7-skill-project-svg-generator`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [BeWaterMyFriend7](https://agentstack.voostack.com/s/bewatermyfriend7)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [BeWaterMyFriend7](https://github.com/BeWaterMyFriend7)
- **Source:** https://github.com/BeWaterMyFriend7/SKILL-PROJECT/tree/main/.opencode/skills/svg-generator

## Install

```sh
agentstack add skill-bewatermyfriend7-skill-project-svg-generator
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# SVG 代码生成器

## 核心工作流

```
用户描述 → 解析需求 → 设计图形 → 生成 SVG 代码 → 验证输出 → 保存文件
```
详细流程如下：
1. 接收用户描述
    - 用户可能会描述需要的图类型（流程图、卡片、图表等）、布局（横向、纵向、网格等）、内容（文字、emoji）和风格（简约、专业、可爱等）。
    - 解析用户输入，提取关键信息以指导后续的图形设计和生成。
2. 解析用户需求
    - 思考需要绘制的图类型、结构、元素、布局和配色，如果不清楚的情况，请用户确认。
    - 评估元素数量，合理分组，避免单个图形承载过多内容
3. 根据分析结果，设计图的布局和元素
    - 确定图的整体结构和层次关系
    - 设计每个元素的样式（颜色、形状、大小等）
    - 确定元素之间的连接方式（线条、箭头等）
4. 生成SVG图代码
    - 使用 SVG 元素（rect, circle, path, text, line, polygon 等）构建图形
    - 应用 CSS 样式内嵌到 SVG 中
    - 根据风格选择应用滤镜、渐变和阴影效果
5. 针对生成的图进行验证，确保其符合用户需求和预期的视觉效果
    - **背景模式确认**：
      - 确认用户选择的背景模式（浅色/深色）
      - 未明确时默认使用浅色背景
      - 深色模式下文字和边框使用浅色系
    - **基础结构验证**（避免元素重叠和布局错乱）：
      - 检查图的结构和元素是否正确
      - 确保所有节点坐标计算准确，无重叠
      - 验证连接线起点/终点精确指向节点边缘（距边界 5px）
      - 检查文字与图形边界间距 ≥8px，避免文字溢出
      - **形状拼接验证**：避免双层叠加导致的圆角不协调问题，使用单层结构
    - **布局规约验证**（避免空白过多和拥挤）：
      - 画布尺寸紧凑合理，利用率 60%-80% 为宜
      - 节点间距合理，无过大或过小
      - 分支路径清晰，无路径交叉
      - 折线转折点不与节点重叠
      - **防线条混乱验证**：避免三条以上路径经过同一坐标点，连接线不穿过其他节点
    - **显示完整性保障**（避免显示不完整）：
      - 计算画布尺寸：`画布高度 = 标题高度(40) + 内容总高度 + 节点间距 × (节点数-1) + 图例说明区高度(如有) + 边距(60-80)`（图例应置于图形底部）
      - 确保所有节点、文字、连线、阴影、箭头都在 `viewBox` 范围内
      - 各边保留 ≥30-40px 边距，避免内容被裁剪
      - 复杂流程图使用折线、虚线等元素时，确保路径端点准确
    - **箭头与连接验证**（避免箭头混乱）：
      - 检查箭头大小一致（markerWidth=6, markerHeight=4）
      - 验证箭头指向准确，无偏移或错位
      - 检查折线路径节点顺序正确，无交叉混乱
      - 验证虚线仅用于异步流程，错误分支使用实线
    - **稳健性设计检查**：
      - 避免使用嵌套 transform，所有坐标使用绝对定位
      - 确保菱形判断节点中心坐标准确，分支从底部中心出发
      - 验证汇聚点位置在分支节点正下方，避免路径交叉
      - 图例应置于图形底部，避免与主流程重叠，预留专用图例区域
    - **样式与颜色验证**：
      - 确保颜色和样式符合选择的风格
      - 验证 SVG 代码的正确性和兼容性
      - 检查图的布局和元素之间的连接是否合理、线条是否清晰准确、图形是否清晰可读、颜色是否符合预期、排版是否整齐，有无文字显示不清晰等问题
      - 检查图中箭头是否清晰、连接是否正常、大小是否合适
      - 检查图片是否能够完整显示，是否有元素被截取，包括背景、图例、文字说明等
    - **复杂流程图验证**：
      - 分支流程使用不同颜色区分（错误分支用红色，主线用灰色/蓝色）
      - 条件判断节点使用菱形形状
      - 异步流程使用虚线连接（仅用于异步场景）
      - 汇聚点明确标注
      - 可选区域用虚线框表示
6. 输出最终的 SVG 代码，供用户使用和修改
    - 将 SVG 代码保存到指定路径，文件名以 `.svg` 结尾
    - 提供 SVG 代码字符串供用户复制使用

**核心原则：生成的 SVG 要简洁美观，符合现代设计规范，参考 assets/style-guide.md 规约文件。**

## 视觉风格规范

详细规范见 [assets/style-guide.md](./assets/style-guide.md)

### 背景模式

**重要：生成 SVG 时必须明确用户需要的背景模式，未明确时默认使用浅色背景**

#### 1. 浅色背景模式（默认）

适用于：浅色主题文档、PPT、网页等

参考示例：`examples/test.svg`, `examples/complex-flow.svg`

| 用途 | 颜色代码 |
|------|----------|
| 背景色 | `#f8f9fa` |
| 卡片背景 | `#ffffff` |
| 标题文字 | `#333333` |
| 正文文字 | `#666666` 或 `#999999` |
| 边框色 | `#e0e0e0` |
| 箭头颜色 | `#999999` 或 `#666` |

#### 2. 深色背景模式

适用于：深色主题文档、演示文稿、代码编辑器主题等

参考示例：`examples/rd-lifecycle-flow.svg`, `examples/rd-timeline.svg`

| 用途 | 颜色代码 |
|------|----------|
| 背景色 | `#1a1a2e` |
| 卡片背景 | `#16213e` |
| 标题文字 | `#ffffff` |
| 正文文字 | `#aaaaaa` 或 `#888888` |
| 边框色 | `#333333` |
| 箭头颜色 | `#666666` 或 `#555555` |

**深色模式配色速查（基于实际示例）**：
| 用途 | 颜色代码 |
|------|----------|
| 主色（蓝） | `#3498db` |
| 成功（绿） | `#2ecc71` |
| 警告（橙） | `#e67e22` |
| 错误（红） | `#e74c3c` |
| 紫色 | `#9b59b6` |
| 青色 | `#1abc9c` |
| 黄色 | `#f39c12` |
| 青色2 | `#00cec9` |

**深色背景下的特殊处理**：
- 阴影颜色调整为 `rgba(0,0,0,0.4)`
- 文字使用浅色系确保对比度
- 节点边框适当加粗（2-3px）以增强可见性
- 建议使用圆角卡片提升视觉层次

### 配色方案

| 用途 | 颜色代码 |
|------|----------|
| 主色（蓝色） | `#3498db` |
| 辅助色（绿色） | `#2ecc71` |
| 强调色（橙色） | `#e67e22` |
| 警示色（红色） | `#e74c3c` |
| 背景色 | `#f8f9fa` |
| 文字色 | `#333333` 或 `#666666` |
| 边框色 | `#e0e0e0` |
| 箭头颜色 | `#999999` 或 `#3498db`（灰色/蓝色） |

### 图形规范

| 项目 | 浅色模式默认值 | 深色模式默认值 |
|------|---------------|---------------|
| 画布尺寸 | 800×600 | 800×600 |
| 圆角半径 | 8px（卡片） | 8px（卡片） |
| 阴影 | `0 3px 6px rgba(0,0,0,0.1)` | `0 3px 6px rgba(0,0,0,0.4)` |
| 边框宽度 | 2px | 2-3px |
| 字体 | `PingFang SC, Microsoft YaHei, sans-serif` | `PingFang SC, Microsoft YaHei, sans-serif` |
| 线条粗细 | 2px | 2px |
| 箭头大小 | markerWidth=6, markerHeight=4 | markerWidth=6, markerHeight=4 |

### 布局规范（重要）

#### 1. 形状拼接规范（避免圆弧不协调）

**问题说明**：当一个形状内部包含另一个形状（如带标题栏的卡片）时，如果分别设置圆角会导致边界不协调。

**正确做法 - 使用单层结构**：
```svg

标题
```

**正确做法 - 简化版（推荐）**：
```svg

节点名称
```

**简化设计原则**：
- 避免使用双层形状叠加（一个带圆角的矩形+一个矩形标题栏）
- 如需区分标题区域，使用颜色填充而非叠加形状
- 标题文字使用粗体或不同颜色区分，不单独创建标题块

#### 2. 线条布局规范（避免混乱与重叠）

**节点间距规则**：
- 横向节点间距：≥ 40px
- 纵向节点间距：≥ 30px
- 分支节点间距：分支点前垂直距离 ≥ 50px

**连接线规范**：
- 连接线端点距节点边界：≥ 5px
- 折线转折点：使用整数坐标
- 避免三条以上路径经过同一坐标点
- 优先使用直线，其次折线，谨慎使用曲线

**分支路径规则**：
- 双分支左右偏转角度：30-45°
- 分支展开角度合理，避免交叉
- 汇聚点位于所有分支节点的公共下方

**防重叠检查**：
- 连接线不穿过其他节点
- 文字与图形边界间距 ≥ 8px
- 图例与主流程保持 ≥ 30px 间距

### 常用图形模板

#### 1. 流程图节点

```svg

```

#### 2. 箭头连接

```svg

  

  

  

```

#### 3. 复杂流程图元素

```svg

判断条件

可选流程区域

汇聚点

```

#### 4. 背景装饰

```svg

```

## 执行步骤

### 第 1 步：解析用户需求

用户可能提供：
- **图形类型**：流程图、卡片、图表、图标、关系图
- **布局描述**：横向、纵向、网格、环形
- **内容**：文字、emoji、颜色偏好
- **风格**：简约、专业、可爱
- **背景模式**：浅色/深色（重要：必须明确，未明确时默认浅色）

### 背景模式确认

**关键步骤**：生成前必须确认用户需要的背景模式

1. 询问用户：「需要浅色背景还是深色背景的图？」
2. 如用户未指定，默认使用**浅色背景**
3. 适用场景参考：
   - 浅色背景：文档、PPT、网页展示
   - 深色背景：代码截图、IDE配套图、深色主题设计稿

### 第 2 步：选择模板或新建

常用模板：
1. **横向流程图** - 步骤从左到右排列
2. **纵向流程图** - 步骤从上到下排列
3. **循环流程图** - 首尾相连的闭环
4. **卡片网格** - 多张卡片并列
5. **对比图** - 左右对比布局
6. **时间线** - 垂直或水平时间轴
7. **饼图/柱状图** - 数据可视化
8. **架构图** - 系统、部署、应用架构图，架构图要分层显示
9. **表格对比** - 数据表格可视化

### 第 3 步：生成 SVG 代码

根据需求生成完整的 SVG 文件：

```svg

  
    
    
      
    
    
    
      
    
  
  
  
  
  
  
  标题
  
  
  ...

```

#### 深色背景模板（参考 examples/rd-lifecycle-flow.svg）

```svg

  
    
    
      
    
  
  
  
  
  
  
  标题
  
  
  
  节点内容
  
  
  ...

```

**深色背景配色速查表（基于实际示例）**：
| 元素 | 颜色代码 |
|------|----------|
| 背景 | `#1a1a2e` |
| 卡片背景 | `#16213e` |
| 标题文字 | `#ffffff` |
| 正文文字 | `#aaaaaa` / `#888888` |
| 边框 | `#333333` |
| 箭头 | `#666` |
| 主色边框 | `#3498db` |
| 成功色 | `#2ecc71` |
| 错误色 | `#e74c3c` |

### 第 4 步：保存文件

将生成的 SVG 保存到用户指定的位置，文件名以 `.svg` 结尾。

## 示例

### 示例 1：横向三步流程图

用户输入：「生成一个三步流程图，从左到右分别是：需求分析 → 设计开发 → 测试上线」

生成：

```svg

  
    
      
    
    
      
    
  
  
  
  三步流程图
  
  
  
    
    🔍
    需求分析
  
  
  
  
  
  
  
    
    🎨
    设计开发
  
  
  
  
  
  
  
    
    🚀
    测试上线
  

```

### 示例 2：纵向流程图

用户输入：「生成一个用户登录流程图」

参考 examples/red-packet-flow.svg 生成：

```svg

  
    
      
    
    
      
    
  
  
  
  用户登录流程图
  
  
  
    
    打开登录页面
  
  
  
  
  
  

```

### 示例 3：架构图

用户输入：「生成一个系统架构图」

**注意**：分层架构图中箭头是可选的。当分层展示系统组件时，可以不加箭头表示流向，特别是当重点展示层次结构而非流程顺序时。如需表示数据流向，可添加箭头。

```svg

  
    
      
    
    
      
    
  
  
  
  系统架构图
  
  
  
    ① 接入层
    
    
  
  
  
  
  
  
  
    ② 服务层
    
    
  
  
  

```

### 示例 4：复杂流程图（包含分支、折线、虚线等）

用户输入：「生成一个包含分支判断的复杂流程图」

参考 examples/complex-flow.svg 生成，该示例展示：
- 菱形判断节点：条件分支
- 折线连接：路径转向
- 虚线连接：错误分支/异步流程
- 虚线框：可选区域
- 汇聚点：多分支汇合
- 图例说明：元素含义解释（置于图形底部，避免与主流程重叠）

**核心设计原则**：
1. 先计算内容所需空间，再确定画布尺寸
2. 使用不同颜色区分主线/错误分支
3. 复杂路径使用 `` 元素实现折线
4. 确保所有元素在画布范围内，边距充足

完整代码见 examples/complex-flow.svg

## 触发条件

当用户提到以下内容时触发：
- SVG、图片、图形、图标
- 流程图、关系图、结构图
- 生成一个图、把文字变成图
- 静态配图（非动画）

### 兼容性检查清单

生成后请验证：
- [ ] 所有元素在 viewBox 范围内（含阴影）
- [ ] 箭头指向准确，无偏移
- [ ] 文字清晰可读，无重叠
- [ ] 使用标准 SVG 元素，无自定义标签
- [ ] 导入后可自由移动、编辑、删除元素

## 输出说明

生成的 SVG 代码可以直接：
1. 在浏览器中打开查看
2. 保存为 `.svg` 文件
3. 嵌入到 HTML 中使用
4. 导入到 Figma、Sketch 等设计工具

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [BeWaterMyFriend7](https://github.com/BeWaterMyFriend7)
- **Source:** [BeWaterMyFriend7/SKILL-PROJECT](https://github.com/BeWaterMyFriend7/SKILL-PROJECT)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-bewatermyfriend7-skill-project-svg-generator
- Seller: https://agentstack.voostack.com/s/bewatermyfriend7
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.