主题
SVG Draw 使用指导
根据描述生成专业技术图表 SVG，严格遵循统一设计风格指南。
SVG Draw 是一个面向技术图表绘制的 AI Skill。输入图表描述，AI 自动识别图表类型、规划布局、精确计算坐标，按照统一的「Tech Blue」设计风格生成可直接使用的 SVG 代码。
快速开始
画一张架构图：前端 → BFF → 微服务 → 数据库帮我画 XXX 功能的流程图svg-draw：用户注册流程，包含手机验证和邮箱验证两条路径触发方式
| 命令 | 说明 |
|---|---|
画图：{描述} | 最常用，AI 自动判断图表类型 |
画架构图：{描述} | 明确指定架构图 |
画流程图：{描述} | 明确指定流程图 |
svg-draw：{描述} | 直接触发 |
| 提供 Mermaid/PlantUML | 转换为 SVG 格式 |
支持的图表类型
| 图表类型 | 适用场景 | 布局方向 |
|---|---|---|
| 架构图 | 系统模块、服务依赖、技术栈 | 自顶向下 |
| 流程图 | 业务流程、审批流、数据流 | 左至右 / 自顶向下 |
| 时序图 | 接口调用链、交互时序 | 左至右 |
| 状态图 | 状态机、生命周期 | 自顶向下 |
| 关系图 | ER 图、依赖关系 | 自由布局 |
设计风格
所有图表统一遵循「Tech Blue」设计规范：
- 主色调：科技蓝
#1890FF，传递专业、稳重、信任感 - 颜色克制：默认中性色（白底灰边），主色仅用于强调
- 架构图分层：四档蓝色渐变，从入口层到基础层由深到浅
- 扁平设计：无阴影，无高光，整洁专业
- 精确对齐：箭头精确贴边，元素严格对齐，无重叠
详细规范见 style-guide.md。
使用示例
示例 1：三层架构图
输入：
画一张三层架构图：
- 前端：Web App、Mobile App
- 服务层：API Gateway、User Service、Order Service
- 数据层：MySQL、Redis输出：完整 SVG，自顶向下布局，按四档蓝色分层配色。
示例 2：流程图
输入：
画用户下单流程图：
1. 用户提交订单
2. 校验库存（不足则提示）
3. 扣减库存
4. 创建订单
5. 发送通知
6. 完成输出：完整 SVG，左至右布局，判断节点用菱形，开始/结束用胶囊形。
示例 3：Mermaid 转 SVG
输入：
输出：按设计规范转换为 SVG，保持相同的逻辑结构。
输出说明
AI 输出完整的 <svg>...</svg> 代码，可直接：
- 粘贴到 HTML 页面
- 保存为
.svg文件 - 插入到 Markdown 文档
- 导入到 Figma / Sketch
文件索引
_vibecoding/skills/svg-draw/
├── SKILL.md # AI 执行依据（完整绘图流程指令）
├── README.md # 本文件：使用指导
└── style-guide.md # 设计风格指南（配色、字体、间距规范）