宝玉图表

技能文档

---
name: baoyu-diagram
title: 宝玉图表
category: 内容创作
description: 生成专业级暗色主题 SVG 图表，支持架构图、流程图、时序图、结构图、思维导图、时间线、状态机、数据流图等多种类型。当用户需要画图、生成图表、可视化系统架构、流程、数据结构或任何技术/概念图时触发。触发词：「画图」「架构图」「流程图」「时序图」「diagram」「SVG 图表」「可视化」
---

# 图表生成器

生成多种类型的专业级 SVG 图表。所有输出为单个自包含的 `.svg` 文件，内嵌样式与字体。

## 支持的图表类型

| 类型 | 适用场景 | 核心特征 |
|------|----------|----------|
| **架构图** | 系统组件与关系 | 分组方框、连接箭头、区域边界 |
| **流程图** | 决策逻辑、流程步骤 | 菱形判断、圆角步骤框、有向流向 |
| **时序图** | 参与者之间按时间排序的交互 | 垂直生命线、水平消息、激活条 |
| **结构图** | 类图、ER 图、组织架构图 | 分区方框、类型化关系（继承、组合） |
| **思维导图** | 头脑风暴、主题探索 | 中心节点、辐射分支、有机布局 |
| **时间线** | 按时间排列的事件 | 水平/垂直轴、事件标记、时间段 |
| **示意图** | 概念解释、对比 | 自由布局、图标、注释、视觉隐喻 |
| **状态机** | 状态转换、生命周期 | 圆角状态节点、带标签转换、起止标记 |
| **数据流图** | 数据转换管道 | 处理气泡、数据存储、外部实体 |

## 设计系统

### 配色方案

按组件类别使用语义化配色：

| 类别 | 填充 (rgba) | 描边 | 用途 |
|------|-------------|------|------|
| 主色 | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan) | 前端、用户侧、输入 |
| 辅色 | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald) | 后端、服务、处理 |
| 第三色 | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet) | 数据库、存储、持久化 |
| 强调色 | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber) | 云、基础设施、区域 |
| 告警色 | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose) | 安全、错误、警告 |
| 连接色 | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange) | 总线、队列、中间件 |
| 中性色 | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate) | 外部、通用、未知 |
| 高亮色 | `rgba(59, 130, 246, 0.3)` | `#60a5fa` (blue) | 活跃状态、焦点、当前步骤 |

流程图和时序图中，按角色（参与者、判断、处理）分配颜色，而非按技术栈。

### 字体

使用内嵌 SVG `@font-face` 或系统等宽字体回退：

```svg
<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');
  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>
```

字号规范：
- **标题：** 16px，字重 700
- **组件名称：** 11-12px，字重 600
- **副标签 / 描述：** 9px，字重 400，颜色 `#94a3b8`
- **注释 / 备注：** 8px，字重 400
- **箭头上的小标签：** 7-8px

### 核心视觉元素

**背景：** `#0f172a` (slate-900) 搭配微网格：
```svg
<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#0f172a"/>
<rect width="100%" height="100%" fill="url(#grid)"/>
```

**标准箭头标记：**
```svg
<marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
</marker>
```

**彩色箭头标记 — 按需创建：**
```svg
<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
</marker>
```

**开放箭头（用于异步/返回消息）：**
```svg
<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
</marker>
```

### SVG 结构与图层顺序

按以下顺序绘制元素以获得正确的 z 轴层叠（SVG 从后向前绘制）：

1. 背景填充 + 网格图案
2. 区域/分组边界（虚线轮廓）
3. 连接箭头和线条
4. 不透明遮罩矩形（与组件框同位置，`fill="#0f172a"`）
5. 组件方框（半透明填充 + 描边）
6. 文本标签
7. 图例（右下角或底部区域，在所有边界之外）
8. 标题块（左上角）

不透明遮罩矩形技巧至关重要 — 半透明组件填充会在没有遮罩的情况下显示下方的箭头：
```svg
<!-- 遮罩层：不透明背景以隐藏箭头 -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="#0f172a"/>
<!-- 视觉层：样式化组件 -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="rgba(8,51,68,0.4)" stroke="#22d3ee" stroke-width="1.5"/>
<text x="180" y="125" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Gateway</text>
<text x="180" y="141" fill="#94a3b8" font-size="9" text-anchor="middle">Kong / Nginx</text>
```

### 间距规则

严格遵循以下规则以防止重叠：

- **组件框高度：** 50-70px（标准），80-120px（大型/复杂）
- **组件之间最小间距：** 垂直 40px，水平 30px
- **箭头标签留白：** 距任何框边缘 10px
- **区域边界内边距：** 边界内边缘与所含组件之间 20px
- **图例位置：** 距最低图表元素至少 20px
- **标题块：** 距左上角 20px，在图表内容区域之外
- **viewBox：** 始终扩展以容纳所有内容 + 四周 30px 留白

### 组件模板

**标准方框（服务/处理）：**
```svg
<rect x="X" y="Y" width="160" height="60" rx="6" fill="#0f172a"/>
<rect x="X" y="Y" width="160" height="60" rx="6" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
<text x="CX" y="Y+24" fill="white" font-size="11" font-weight="600" text-anchor="middle">名称</text>
<text x="CX" y="Y+40" fill="#94a3b8" font-size="9" text-anchor="middle">描述</text>
```

**判断菱形（流程图）：**
```svg
<g transform="translate(CX, CY)">
  <polygon points="0,-35 50,0 0,35 -50,0" fill="#0f172a"/>
  <polygon points="0,-35 50,0 0,35 -50,0" fill="rgba(120,53,15,0.3)" stroke="#fbbf24" stroke-width="1.5"/>
  <text y="4" fill="white" font-size="10" font-weight="600" text-anchor="middle">条件?</text>
</g>
```

**数据库圆柱体：**
```svg
<g transform="translate(X, Y)">
  <rect x="0" y="10" width="120" height="50" rx="2" fill="#0f172a"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="#0f172a"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="#0f172a"/>
  <rect x="0" y="10" width="120" height="50" fill="rgba(76,29,149,0.4)"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="0" y1="10" x2="0" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="120" y1="10" x2="120" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <text x="60" y="40" fill="white" font-size="11" font-weight="600" text-anchor="middle">PostgreSQL</text>
</g>
```

**区域边界：**
```svg
<rect x="X" y="Y" width="W" height="H" rx="12" fill="none" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
<text x="X+12" y="Y+16" fill="#fbbf24" font-size="9" font-weight="600">AWS us-east-1</text>
```

**安全组：**
```svg
<rect x="X" y="Y" width="W" height="H" rx="8" fill="none" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>
<text x="X+10" y="Y+14" fill="#fb7185" font-size="8" font-weight="500">VPC / 安全组</text>
```

## 各类型布局指引

### 架构图

从左到右或从上到下的数据流。用区域边界分组相关服务。层与层之间使用总线/连接器。数据库放在底部或右侧。

### 流程图

主流程从上到下。判断用菱形，退出箭头标注「是/否」。圆角矩形表示开始/结束。用高亮色标记主路径。

### 时序图

参与者作为顶部方框，垂直虚线生命线，水平箭头表示消息（实线=同步，虚线=返回）。时间向下流动。激活条表示处理过程。复杂场景对消息编号。

### 结构图

分区方框（名称/属性/方法，用于类图）。关系线：实心填充菱形=组合，实心空心菱形=聚合，虚线箭头=依赖，实心三角形=继承。

### 思维导图

从中心概念自由辐射布局。分支使用有机曲线（`<path>` 配合三次贝塞尔曲线）。使用调色板变化分支颜色。中心节点字号最大，向外递减。

### 时间线

水平或垂直轴线。事件标记为轴上的圆形或菱形。描述文本交替偏置以避免重叠。使用颜色分类事件类型。

### 状态机

圆角矩形状态，复合状态使用双线边框。实心圆表示初始状态，靶心表示终止状态。自转换使用弯曲箭头。所有转换标注 `事件 [守卫] / 动作` 格式。

## 输出规则

1. 输出**单个 `.svg` 文件** — 除 Google Fonts 导入外无外部依赖
2. 设置 `viewBox` 适配所有内容并留 30px 留白；不设置固定 `width`/`height` 属性（让 SVG 自适应缩放）
3. 根 `<svg>` 元素包含 `xmlns="http://www.w3.org/2000/svg"`
4. 所有 `<style>`、`<defs>`、标记和图案放在 SVG 顶部
5. 居中标签使用 `text-anchor="middle"`；确保文本不溢出方框
6. **中文文本支持：** 标签含中文字符时使用 `font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif'` 并增加方框宽度 — CJK 字符更宽
7. **保存位置：** 输入为文件时保存到 `{inputFileDir}/diagram/`；否则保存到 `{projectDir}/diagram/{topic-slug}/`。目录不存在则创建

## 技能工作流

### 步骤1：识别图表类型

根据用户请求判断应生成的图表类型（架构图、流程图、时序图等）。

### 步骤2：规划布局

列出所有组件，确定分组和流向，计算各元素位置。

### 步骤3：绘制 SVG

按图层顺序绘制：背景 → 区域边界 → 连接线 → 遮罩 → 组件 → 标签 → 图例 → 标题。

### 步骤4：检查间距

确认无重叠、图例在边界外、viewBox 足够大。

### 步骤5：保存并输出

保存 SVG 文件，向用户展示结果。

使用说明

# 宝玉图表

生成专业级暗色主题 SVG 图表，支持架构图、流程图、时序图、思维导图等 9 种类型。

## 使用

直接描述需要的图表：

```
画一个微服务架构图，包含 API 网关、用户服务、订单服务和 PostgreSQL 数据库
```

```
画一个用户注册的流程图，从填写表单到发送验证邮件
```

## 工作原理

1. 根据描述识别图表类型（架构图、流程图、时序图等）
2. 规划布局：确定组件、分组、流向和位置
3. 按图层顺序生成自包含 SVG 文件（内嵌样式与字体）
4. 支持中文标签，暗色主题，自适应缩放

## 支持的图表类型

- 架构图、流程图、时序图、结构图
- 思维导图、时间线、示意图、状态机、数据流图

## 输出

- 单个 `.svg` 文件，无外部依赖
- 暗色主题（`#0f172a` 背景），语义化配色
- 支持中文文本显示

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。