Skip to main content
Version: Summer 2025 SheCodes Program

AI-Assisted Diagram Creation

🤖 Efficiently Creating Diagrams with Gemini CLI​

Natural Language Diagram Generation​

You: I need a diagram showing the user registration process, including:
1. User fills out form
2. Email verification
3. Phone verification (optional)
4. Create account
5. Send welcome email

Gemini: I'll generate a user registration flowchart for you:

```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[注册成功]
```

This flowchart clearly shows the complete registration process, including error handling and optional steps.

📝 Intelligent Diagram Design Recommendations​

Recommend Diagram Types Based on Content​

You: I want to show the dependencies between system modules, what diagram should I use?

Gemini: Based on the system module dependencies you want to show, I recommend the following diagram types:

🎯 Most Recommended: Class Diagram
Suitable for showing static dependencies between modules

```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
```

🔄 Alternative 1: Flowchart (with grouping)
Suitable for showing module hierarchy and data flow

```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
```

🏗️ Alternative 2: Architecture Diagram (Draw.io)
Suitable for showing complex system architecture and deployment relationships
- Use containers to group related modules
- Use different colors for different layers
- Add icons to enhance readability

AI Optimization Recommendations​

🎨 Visual Optimization

AI can help with:

  • Recommending color schemes
  • Optimizing layout balance
  • Adjusting element spacing
  • Selecting appropriate fonts

📊 Content Optimization

AI can assist with:

  • Simplifying complex processes
  • Completing missing steps
  • Optimizing text descriptions
  • Adding necessary annotations

🔧 Technical Optimization

AI can provide:

  • Best practice recommendations
  • Performance optimization solutions
  • Compatibility checking
  • Export format recommendations

🔄 Diagram Conversion and Migration​

Converting Between Different Formats​

You: Convert this Mermaid flowchart to Draw.io format

Gemini: I'll help you convert the Mermaid diagram to Draw.io:

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

Draw.io implementation steps:

1. Create elements:
 - Drag in "Rounded Rectangle" for A (Start)
 - Drag in "Diamond" for B (Decision)
 - Drag in "Rectangle" for C (Execute)
 - Drag in "Rounded Rectangle" for D (End)

2. Set styles:
 - A: Fill color #e1f5fe, border #01579b
 - B: Fill color #fff3e0, border #e65100
 - C: Fill color #f3e5f5, border #4a148c
 - D: Fill color #e8f5e9, border #1b5e20

3. Add connections:
 - Select "Connector" tool
 - Connect from A to B
 - Connect from B to C, double-click to add label "Yes"
 - Connect from B to D, double-click to add label "No"

4. Layout adjustment:
 - Select all elements
 - Arrange → Layout → Vertical Tree
 - Adjust spacing to appropriate positions

🚀 Advanced AI Techniques​

Complex System Architecture Generation​

You: Generate a complete microservices architecture diagram for an e-commerce platform, including all key components

Gemini: I'll generate a complete e-commerce microservices architecture diagram for you:

```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
```

Architecture Features:
1. Clear layering: 6-layer architecture with distinct responsibilities
2. Service decoupling: Asynchronous communication via message queues
3. High availability: Multi-level caching, service discovery
4. Observability: Complete monitoring, logging, tracing
5. Scalability: Microservices architecture, independent deployment and scaling

Automatic Documentation Generation​

AI Batch Generation of Documentation Diagrams

Use Gemini CLI to automatically generate diagrams from code or documentation:

You: Generate sequence diagrams for all endpoints based on this API documentation

Gemini: I'll batch generate sequence diagrams for your API documentation:

# API Sequence Diagram Documentation

## 1. User Authentication Module

### 1.1 Registration Endpoint
```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 Login Endpoint
[Continue generating other endpoints...]

## Automation Scripts
You can use the following scripts for batch generation:

```javascript
// Read OpenAPI specification
const spec = require('./openapi.json');

// Generate Mermaid diagrams for each endpoint
Object.keys(spec.paths).forEach(path => {
Object.keys(spec.paths[path]).forEach(method => {
  const operation = spec.paths[path][method];
  generateSequenceDiagram(path, method, operation);
});
});
```

💡 Prompt Engineering​

Efficient Prompt Templates​

📊 Flowchart Generation

Generate a flowchart for [topic], including:
1. [Step 1]
2. [Step 2]
3. [Decision conditions]
4. [Error handling]
Requirements:
- Use Mermaid syntax
- Include start and end nodes
- Mark key decision points
- Add necessary loops

🏗️ Architecture Diagram Design

Design an architecture diagram for [system name]:
Tech stack: [list technologies]
Scale: [user volume/QPS]
Requirements:
- Layered display
- Mark technology choices
- Show data flow
- Include redundancy design

🔄 Optimization Request

Optimize this diagram:
[paste existing code]
Optimization directions:
- Improve readability
- Optimize layout
- Unify style
- Add missing information

🎯 Practical Case Studies​

Case Study: From Requirements to Diagrams​

Requirement Description:
"We need a complete user order process, from selecting products to receiving and reviewing"

Gemini Generation Process:

Step 1: Understanding requirements
- Identify participants: user, system, payment, logistics
- Outline main process: browse → order → pay → ship → receive
- Consider exceptions: out of stock, payment failure, returns

Step 2: Generate basic diagram
```mermaid
graph TD
  Start[用户浏览商品] --> Select[选择商品]
  Select --> Cart[加入购物车]
  Cart --> Checkout[结算]
  Checkout --> Pay[支付]
  Pay --> Success[支付成功]
  Success --> Ship[发货]
  Ship --> Receive[收货]
  Receive --> Review[评价]
  Review --> End[完成]
```

Step 3: Add exception handling
```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
```

Step 4: Optimize style and layout
[Final optimized version...]

🚀 Next Steps​

After mastering AI-assisted techniques, start practicing:

Practical Project Exercises →