AI 辅助图表创作

使用 Gemini CLI 高效创建图表

自然语言生成图表

描述生成

您：我需要一个展示用户注册流程的图表，包括：
1. 用户填写表单
2. 邮箱验证
3. 手机验证（可选）
4. 创建账户
5. 发送欢迎邮件

Gemini：我来为您生成用户注册流程图：

```mermaid
graph TD
  Start[用户访问注册页面] --> Form[填写注册表单]
  Form --> Validate{表单验证}
  Validate -->|失败| FormError[显示错误信息]
  FormError --> Form
  Validate -->|成功| Email[发送验证邮件]
  Email --> EmailCheck{用户点击验证链接?}
  EmailCheck -->|否| EmailTimeout[验证超时]
  EmailTimeout --> Resend[重新发送邮件]
  Resend --> Email
  EmailCheck -->|是| PhoneOption{需要手机验证?}
  PhoneOption -->|是| Phone[输入手机号]
  Phone --> SMS[发送验证码]
  SMS --> PhoneVerify{验证码正确?}
  PhoneVerify -->|否| PhoneError[验证失败]
  PhoneError --> Phone
  PhoneVerify -->|是| CreateAccount[创建账户]
  PhoneOption -->|否| CreateAccount
  CreateAccount --> Welcome[发送欢迎邮件]
  Welcome --> Success[注册成功]
```

这个流程图清晰展示了完整的注册流程，包括错误处理和可选步骤。

优化现有图表

您：这是我的图表代码，请帮我优化布局和样式：
graph LR
A --> B
B --> C
C --> D
D --> E

Gemini：我来优化您的图表，增加可读性和美观度：

```mermaid
graph TB
  A[开始阶段] -->|初始化| B[准备阶段]
  B -->|数据收集| C[处理阶段]
  C -->|分析处理| D[验证阶段]
  D -->|质量检查| E[完成阶段]

  style A fill:#e1f5fe,stroke:#01579b,stroke-width:2px
  style B fill:#fff3e0,stroke:#e65100,stroke-width:2px
  style C fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
  style D fill:#fff8e1,stroke:#f57f17,stroke-width:2px
  style E fill:#e8f5e9,stroke:#1b5e20,stroke-width:2px

  classDef default font-size:16px;
```

优化内容：
1. 改为从上到下布局（TB），更符合流程阅读习惯
2. 为每个节点添加描述性文字
3. 在连接线上添加动作说明
4. 使用不同颜色区分各阶段
5. 统一字体大小提升可读性

批量生成

您：我需要为 5 个不同的 API 端点生成时序图

Gemini：我来为您批量生成 API 时序图：

用户登录 API：
```mermaid
sequenceDiagram
  Client->>+API: POST /auth/login
  API->>+DB: 查询用户信息
  DB-->>-API: 返回用户数据
  API->>+Redis: 创建 Session
  Redis-->>-API: Session ID
  API-->>-Client: JWT Token
```

获取用户信息 API：
```mermaid
sequenceDiagram
  Client->>+API: GET /users/{id}
  API->>+Auth: 验证 Token
  Auth-->>-API: 验证成功
  API->>+Cache: 查询缓存
  Cache-->>API: 缓存未命中
  API->>+DB: 查询用户
  DB-->>-API: 用户数据
  API->>Cache: 更新缓存
  API-->>-Client: 用户信息
```

创建订单 API：
```mermaid
sequenceDiagram
  Client->>+API: POST /orders
  API->>+Inventory: 检查库存
  Inventory-->>-API: 库存充足
  API->>+Payment: 创建支付
  Payment-->>-API: 支付 ID
  API->>+DB: 保存订单
  DB-->>-API: 订单 ID
  API->>+Queue: 发送通知消息
  API-->>-Client: 订单创建成功
```

更新产品 API：
```mermaid
sequenceDiagram
  Client->>+API: PUT /products/{id}
  API->>+Auth: 验证权限
  Auth-->>-API: 权限通过
  API->>+DB: 更新产品
  DB-->>-API: 更新成功
  API->>+Cache: 清除缓存
  Cache-->>-API: 缓存已清除
  API->>+Search: 更新索引
  Search-->>-API: 索引已更新
  API-->>-Client: 更新成功
```

删除评论 API：
```mermaid
sequenceDiagram
  Client->>+API: DELETE /comments/{id}
  API->>+Auth: 验证用户身份
  Auth-->>-API: 身份确认
  API->>+DB: 软删除评论
  DB-->>-API: 删除成功
  API->>+Audit: 记录操作日志
  Audit-->>-API: 日志已记录
  API-->>-Client: 删除成功
```

智能图表设计建议

根据内容推荐图表类型

您：我想展示系统各模块的依赖关系，应该用什么图表？

Gemini：根据您要展示的系统模块依赖关系，我推荐以下几种图表类型：

最推荐：类图（Class Diagram）
适合展示模块间的静态依赖关系

```mermaid
classDiagram
  CoreModule <-- AuthModule : depends on
  CoreModule <-- DataModule : depends on
  AuthModule <-- UserModule : uses
  DataModule <-- CacheModule : uses
  DataModule <-- DBModule : uses
  APIModule --> AuthModule : requires
  APIModule --> DataModule : requires
  UIModule --> APIModule : calls
```

备选1：流程图（带分组）
适合展示模块层次和数据流向

```mermaid
graph TB
  subgraph "表现层"
      UI[UI Module]
  end

  subgraph "业务层"
      API[API Module]
      Auth[Auth Module]
  end

  subgraph "数据层"
      Data[Data Module]
      Cache[Cache Module]
      DB[DB Module]
  end

  subgraph "基础层"
      Core[Core Module]
  end

  UI --> API
  API --> Auth
  API --> Data
  Auth --> Core
  Data --> Cache
  Data --> DB
  Data --> Core
```

备选2：架构图（Draw.io）
适合展示复杂的系统架构和部署关系
- 使用容器分组相关模块
- 用不同颜色表示不同层次
- 添加图标增强可读性

AI 优化建议

• 视觉优化：推荐配色方案；优化布局平衡；调整元素间距；选择合适字体
• 内容优化：简化复杂流程；补充缺失步骤；优化文字描述；添加必要注释
• 技术优化：最佳实践建议；性能优化方案；兼容性检查；导出格式建议

图表转换和迁移

不同格式间转换

Mermaid → Draw.io

您：将这个 Mermaid 流程图转换为 Draw.io 格式的说明

Gemini：我来帮您将 Mermaid 图表转换为 Draw.io：

原始 Mermaid：
```mermaid
graph TD
  A[开始] --> B{判断}
  B -->|是| C[执行]
  B -->|否| D[结束]
```

Draw.io 实现步骤：

1. 创建元素：
 - 拖入"圆角矩形"作为 A（开始）
 - 拖入"菱形"作为 B（判断）
 - 拖入"矩形"作为 C（执行）
 - 拖入"圆角矩形"作为 D（结束）

2. 设置样式：
 - A: 填充色 #e1f5fe，边框 #01579b
 - B: 填充色 #fff3e0，边框 #e65100
 - C: 填充色 #f3e5f5，边框 #4a148c
 - D: 填充色 #e8f5e9，边框 #1b5e20

3. 添加连接：
 - 选择"连接线"工具
 - 从 A 连到 B
 - 从 B 连到 C，双击添加标签"是"
 - 从 B 连到 D，双击添加标签"否"

4. 布局调整：
 - 选中所有元素
 - Arrange → Layout → Vertical Tree
 - 调整间距至合适位置

Visio → Mermaid

您：如何将 Visio 图表转换为 Mermaid 代码？

Gemini：将 Visio 图表转换为 Mermaid 的方法：

手动转换步骤：

1. 分析 Visio 图表结构：
 - 识别节点类型（矩形、菱形、圆形等）
 - 记录连接关系
 - 提取文本标签

2. 映射到 Mermaid 语法：
 Visio 形状 → Mermaid 语法
 - 矩形 → [文本]
 - 菱形 → {文本}
 - 圆形 → ((文本))
 - 箭头 → -->
 - 虚线箭头 → -.->

3. 示例转换：
 Visio: 开始(矩形) → 处理(矩形) → 判断(菱形)

 Mermaid:
 ```mermaid
 graph LR
     Start[开始] --> Process[处理]
     Process --> Decision{判断}
 ```

AI 辅助转换：
您可以：
1. 截图 Visio 图表
2. 发送给我描述图表内容
3. 我帮您生成对应的 Mermaid 代码

自动化工具：
- vsdx2svg：先转 SVG，再手动转 Mermaid
- 使用 Draw.io 作为中间格式

高级 AI 技巧

复杂系统架构生成

您：为电商平台生成完整的微服务架构图，包括所有关键组件

Gemini：我来为您生成完整的电商微服务架构图：

```mermaid
graph TB
  subgraph "客户端层"
      Web[Web应用]
      Mobile[移动APP]
      Admin[管理后台]
  end

  subgraph "接入层"
      CDN[CDN]
      LB[负载均衡器]
      Gateway[API网关]
  end

  subgraph "业务服务层"
      subgraph "核心服务"
          UserSvc[用户服务]
          ProductSvc[商品服务]
          OrderSvc[订单服务]
          PaymentSvc[支付服务]
      end

      subgraph "支撑服务"
          SearchSvc[搜索服务]
          RecSvc[推荐服务]
          CartSvc[购物车服务]
          InventorySvc[库存服务]
      end

      subgraph "运营服务"
          PromotionSvc[促销服务]
          CouponSvc[优惠券服务]
          CommentSvc[评价服务]
          LogisticsSvc[物流服务]
      end
  end

  subgraph "中间件层"
      MQ[消息队列<br/>RabbitMQ/Kafka]
      Cache[缓存<br/>Redis Cluster]
      Registry[服务注册<br/>Consul/Eureka]
      Config[配置中心<br/>Apollo]
  end

  subgraph "数据层"
      MySQL[(MySQL<br/>主从集群)]
      MongoDB[(MongoDB<br/>分片集群)]
      ES[(ElasticSearch<br/>搜索引擎)]
      HBase[(HBase<br/>大数据存储)]
  end

  subgraph "基础设施"
      Monitor[监控<br/>Prometheus]
      Log[日志<br/>ELK Stack]
      Trace[链路追踪<br/>Zipkin]
      Alert[告警<br/>AlertManager]
  end

  %% 连接关系
  Web --> CDN
  Mobile --> CDN
  Admin --> LB
  CDN --> LB
  LB --> Gateway

  Gateway --> UserSvc
  Gateway --> ProductSvc
  Gateway --> OrderSvc
  Gateway --> PaymentSvc

  OrderSvc --> MQ
  PaymentSvc --> MQ
  MQ --> InventorySvc
  MQ --> LogisticsSvc

  ProductSvc --> Cache
  CartSvc --> Cache

  UserSvc --> MySQL
  OrderSvc --> MySQL
  ProductSvc --> MongoDB
  SearchSvc --> ES

  %% 样式
  classDef client fill:#e3f2fd,stroke:#1976d2
  classDef gateway fill:#fff3e0,stroke:#f57c00
  classDef service fill:#f3e5f5,stroke:#7b1fa2
  classDef middleware fill:#e8f5e9,stroke:#388e3c
  classDef data fill:#fce4ec,stroke:#c2185b
  classDef infra fill:#f5f5f5,stroke:#616161

  class Web,Mobile,Admin client
  class CDN,LB,Gateway gateway
  class UserSvc,ProductSvc,OrderSvc,PaymentSvc,SearchSvc,RecSvc,CartSvc,InventorySvc,PromotionSvc,CouponSvc,CommentSvc,LogisticsSvc service
  class MQ,Cache,Registry,Config middleware
  class MySQL,MongoDB,ES,HBase data
  class Monitor,Log,Trace,Alert infra
```

架构特点：
1. 分层清晰：6层架构，职责分明
2. 服务解耦：通过消息队列实现异步通信
3. 高可用：多级缓存、服务注册发现
4. 可观测：完整的监控、日志、链路追踪
5. 可扩展：微服务架构，独立部署扩容

自动文档生成

AI 批量生成文档图表

使用 Gemini CLI 可以根据代码或文档自动生成相应的图表：

您：根据这个 API 文档生成所有接口的时序图

Gemini：我来为您的 API 文档批量生成时序图：

# API 时序图文档

## 1. 用户认证模块

### 1.1 注册接口
```mermaid
sequenceDiagram
  participant C as Client
  participant A as API
  participant V as Validator
  participant D as Database
  participant E as Email Service

  C->>A: POST /auth/register
  A->>V: 验证输入数据
  V-->>A: 验证通过
  A->>D: 检查邮箱是否存在
  D-->>A: 邮箱可用
  A->>D: 创建用户记录
  D-->>A: 用户创建成功
  A->>E: 发送验证邮件
  E-->>A: 邮件已发送
  A-->>C: 201 Created
```

### 1.2 登录接口
[继续生成其他接口...]

## 自动生成脚本
您可以使用以下脚本批量生成：

```javascript
// 读取 OpenAPI 规范
const spec = require('./openapi.json');

// 为每个端点生成 Mermaid 图表
Object.keys(spec.paths).forEach(path => {
Object.keys(spec.paths[path]).forEach(method => {
  const operation = spec.paths[path][method];
  generateSequenceDiagram(path, method, operation);
});
});
```

提示词工程

高效提示词模板

流程图生成

生成一个[主题]的流程图，包括：
1. [步骤1]
2. [步骤2]
3. [判断条件]
4. [异常处理]
要求：
- 使用 Mermaid 语法
- 包含开始和结束节点
- 标注关键判断点
- 添加必要的循环

架构图设计

设计一个[系统名称]的架构图：
技术栈：[列出技术]
规模：[用户量/QPS]
要求：
- 分层展示
- 标注技术选型
- 显示数据流向
- 包含冗余设计

优化请求

优化这个图表：
[粘贴现有代码]
优化方向：
- 提升可读性
- 优化布局
- 统一样式
- 添加缺失信息

实战案例

案例：从需求到图表

需求描述：
"我们需要一个用户下单的完整流程，从选择商品到收货评价"

Gemini 生成过程：

步骤1：理解需求
- 识别参与者：用户、系统、支付、物流
- 梳理主流程：浏览→下单→支付→发货→收货
- 考虑异常：库存不足、支付失败、退货

步骤2：生成基础图表
```mermaid
graph TD
  Start[用户浏览商品] --> Select[选择商品]
  Select --> Cart[加入购物车]
  Cart --> Checkout[结算]
  Checkout --> Pay[支付]
  Pay --> Success[支付成功]
  Success --> Ship[发货]
  Ship --> Receive[收货]
  Receive --> Review[评价]
  Review --> End[完成]
```

步骤3：添加异常处理
```mermaid
graph TD
  Start[用户浏览商品] --> Select[选择商品]
  Select --> Stock{库存充足?}
  Stock -->|否| StockOut[提示缺货]
  StockOut --> Select
  Stock -->|是| Cart[加入购物车]
  Cart --> Checkout[结算]
  Checkout --> Pay[支付]
  Pay --> PayResult{支付成功?}
  PayResult -->|否| PayFail[支付失败]
  PayFail --> Pay
  PayResult -->|是| Ship[发货]
  Ship --> Receive[收货]
  Receive --> Confirm{确认收货?}
  Confirm -->|是| Review[评价]
  Confirm -->|否| Return[退货流程]
  Review --> End[完成]
  Return --> Refund[退款]
  Refund --> End
```

步骤4：优化样式和布局
[最终优化版本...]

下一步

掌握了 AI 辅助技巧后，开始实战：

实战项目练习