使用 Cursor AI 绘制优雅的架构图和流程图

FlyCodeLab
1,033 阅读7分钟

使用 Cursor AI 绘制优雅的架构图和流程图

作者: cyan

日期: 2025-03-04

一、前言

在软件开发过程中,架构图和流程图是表达系统设计的重要工具。传统的方式是使用 PlantUML 手动编写代码来生成图表,这需要记忆大量的语法和样式配置。本文将介绍如何使用 Cursor AI 来智能生成和优化技术图表,大幅提升工作效率。

二、Cursor AI 的优势

2.1 主要特点

  1. 智能生成

    • 通过自然语言描述生成图表代码
    • 自动应用最佳实践和样式规范
    • 智能优化图表布局

  2. 交互式编辑

    • 实时预览和修改
    • 智能代码补全
    • 自动错误检测和修复

  3. 团队协作

    • 统一的图表风格
    • 标准化的命名规范
    • 可复用的模板库

2.2 应用场景

  • 系统架构设计
  • 业务流程图
  • 类关系图
  • 时序图
  • 部署架构图
  • 数据流图

三、使用 Cursor AI 生成图表

3.1 基础用法

  1. 启动对话

    • 在 Cursor 编辑器中按 Cmd/Ctrl + L 打开命令面板
    • 输入 / 开始与 AI 对话

  2. 常用命令

    /create   # 创建新的图表
/analyze  # 分析现有代码生成图表
/improve  # 优化现有图表

3.2 提示词模板

  1. 创建架构图 请帮我创建一个系统架构图，包含以下组件： - 前端层：Web、Mobile、Desktop - 网关层：API Gateway、负载均衡 - 服务层：用户服务、订单服务、支付服务 - 数据层：MySQL、Redis 要求： 1. 使用 PlantUML 语法 2. 添加清晰的层级划分 3. 使用优雅的配色方案 4. 添加必要的连接说明

image.png

  1. 创建流程图 请帮我创建一个订单处理流程图，包含： - 开始：用户下单 - 处理：库存检查、支付处理 - 结束：订单确认或失败 要求： 1. 使用 PlantUML 活动图 2. 添加条件分支 3. 使用清晰的布局 4. 添加状态说明

image.png

3.3 实战示例

  1. 生成架构图示例

image.png

@startuml System Architecture
!theme plain
skinparam backgroundColor white
skinparam roundCorner 20

' 定义样式
!include https://raw.githubusercontent.com/plantuml/plantuml/master/themes/puml-theme-cerulean.puml

' 定义组件
package "Frontend Layer" #E3F2FD {
    [Web Application] as web #B3E5FC
    [Mobile App] as mobile #B3E5FC
    [Desktop Client] as desktop #B3E5FC
}

package "API Gateway Layer" #FFF3E0 {
    [Load Balancer] as lb #FFE0B2
    [API Gateway] as gateway #FFE0B2
    [Rate Limiter] as limiter #FFE0B2
}

package "Service Layer" #F3E5F5 {
    [Auth Service] as auth #E1BEE7
    [User Service] as user #E1BEE7
    [Order Service] as order #E1BEE7
    [Payment Service] as payment #E1BEE7
}

package "Data Layer" #E8F5E9 {
    database "User DB" as userdb #A5D6A7
    database "Order DB" as orderdb #A5D6A7
    database "Payment DB" as paymentdb #A5D6A7
    [Redis Cache] as cache #A5D6A7
}

' 定义关系
web --> lb
mobile --> lb
desktop --> lb
lb --> gateway
gateway --> limiter
limiter --> auth
limiter --> user
limiter --> order
limiter --> payment

auth --> userdb
user --> userdb
order --> orderdb
payment --> paymentdb

user --> cache
order --> cache
payment --> cache

@enduml
  1. 优化现有架构
@startuml System Architecture
!theme plain
skinparam backgroundColor white
skinparam roundCorner 20
skinparam defaultFontName "Microsoft YaHei"
skinparam shadowing false

' 基础样式设置
skinparam {
    ArrowColor #3498DB
    ArrowThickness 2
    BorderColor #3498DB
    BorderThickness 2
    FontColor #333333
}

' 定义自定义样式
skinparam component {
    BackgroundColor #E3F2FD
    BorderColor #3498DB
    FontColor #333333
}

skinparam database {
    BackgroundColor #E8F5E9
    BorderColor #2ECC71
    FontColor #333333
}

' 定义组件
package "客户端层" as FrontendLayer #E3F2FD {
    component "Web 应用" as web #B3E5FC
    component "移动应用" as mobile #B3E5FC
    component "桌面客户端" as desktop #B3E5FC
    note right of web
        SPA架构
        响应式设计
    end note
}

package "网关层" as GatewayLayer #FFF3E0 {
    component "负载均衡器" as lb #FFE0B2 {
        [nginx]
    }
    component "API 网关" as gateway #FFE0B2 {
        [路由]
        [认证]
        [监控]
    }
    component "限流器" as limiter #FFE0B2
}

package "微服务层" as ServiceLayer #F3E5F5 {
    component "认证服务" as auth #E1BEE7
    component "用户服务" as user #E1BEE7
    component "订单服务" as order #E1BEE7
    component "支付服务" as payment #E1BEE7
}

package "数据层" as DataLayer #E8F5E9 {
    database "用户数据库" as userdb #A5D6A7 {
        [用户信息]
        [认证数据]
    }
    database "订单数据库" as orderdb #A5D6A7 {
        [订单信息]
        [商品数据]
    }
    database "支付数据库" as paymentdb #A5D6A7 {
        [支付记录]
        [账单信息]
    }
    component "Redis集群" as cache #A5D6A7 {
        [会话缓存]
        [业务缓存]
    }
}

' 定义关系
web -down-> lb : HTTPS
mobile -down-> lb : HTTPS
desktop -down-> lb : HTTPS

lb -down-> gateway : 负载分发
gateway -down-> limiter : 流量控制

limiter -down-> auth : JWT认证
limiter -down-> user : REST/gRPC
limiter -down-> order : REST/gRPC
limiter -down-> payment : REST/gRPC

auth -down-> userdb : 读写
user -down-> userdb : 读写
order -down-> orderdb : 读写
payment -down-> paymentdb : 读写

auth .right.> cache : 缓存
user .right.> cache : 缓存
order .right.> cache : 缓存
payment .right.> cache : 缓存

' 添加图例
legend right
|= 组件类型 |= 说明 |
|<#B3E5FC>| 客户端组件 |
|<#FFE0B2>| 网关组件 |
|<#E1BEE7>| 微服务组件 |
|<#A5D6A7>| 数据存储组件 |
endlegend

@enduml

image.png

四、最佳实践

4.1 提示词技巧

  1. 结构化描述

    • 明确列出组件和层级
    • 指定具体的关系
    • 说明特殊要求

  2. 迭代优化

    • 先生成基础版本
    • 逐步添加细节
    • 指定优化方向

  3. 样式规范

    • 指定配色方案
    • 设定布局规则
    • 统一命名风格

4.2 常见问题解决

  1. 中文显示问题

    skinparam defaultFontName "Microsoft YaHei"

  2. 图表过大问题

    • 拆分为多个子图表
    • 使用包进行分组
    • 适当简化细节

  3. 样式统一问题

    • 创建样式模板
    • 使用统一配置
    • 定期样式审查

五、补充说明：PlantUML 基础

5.1 基础工具安装

# macOS
brew install plantuml

# Linux
sudo apt-get update
sudo apt-get install plantuml

# Windows
scoop install plantuml
# 或者
choco install plantuml

5.2 IDE 插件配置

在 VS Code 中安装以下插件:

  1. PlantUML 插件

    • 提供语法高亮
    • 实时预览功能
    • 导出图片功能

  2. Markdown Preview Enhanced

    • Markdown 预览
    • PlantUML 集成
    • 多格式导出

5.3 字体和依赖

# macOS 安装字体
brew install font-microsoft-yahei

# 安装 Graphviz (PlantUML 依赖)
brew install graphviz

5.4 图表样式规范

5.4.1 基础样式配置
' 基础主题和样式
!theme plain
skinparam backgroundColor white
skinparam roundCorner 20
skinparam defaultFontName "Microsoft YaHei"
skinparam shadowing false

' 通用样式
skinparam {
    FontColor #333333
    FontSize 14
    FontStyle plain
}

' 类图样式
skinparam class {
    BackgroundColor #FEFEFE
    BorderColor #3498DB
    BorderThickness 2
    AttributeFontColor #666666
    StereotypeFontColor #666666
}

' 包样式
skinparam package {
    BackgroundColor #FEFEFE
    BorderColor #999999
    FontColor #333333
    BorderThickness 2
}

' 组件样式
skinparam component {
    BackgroundColor #FFFFFF
    BorderColor #3498DB
    FontColor #333333
}

' 数据库样式
skinparam database {
    BackgroundColor #F8F9FA
    BorderColor #2ECC71
    FontColor #333333
}

' 箭头样式
skinparam arrow {
    Color #666666
    FontColor #666666
    Thickness 2
}
5.4.2 配色方案

推荐使用以下配色方案:

  • 主要颜色

    • 主色调: #3498DB (蓝色)
    • 次要色: #2ECC71 (绿色)
    • 强调色: #9B59B6 (紫色)
    • 警告色: #E74C3C (红色)
    • 背景色: #FEFEFE (白色)
    • 文字色: #333333 (深灰)

  • 模块配色

    • 核心模块: #E3F2FD (浅蓝)
    • 数据存储: #E8F5E9 (浅绿)
    • 插件系统: #FFF3E0 (浅橙)
    • 执行模块: #F3E5F5 (浅紫)
    • 外部系统: #ECEFF1 (浅灰)

六、总结与展望

6.1 图表设计原则

  1. 清晰性

    • 层次分明
    • 关系明确
    • 避免过度复杂

  2. 一致性

    • 统一的命名规范
    • 一致的样式风格
    • 相同的图表结构

  3. 可维护性

    • 模块化设计
    • 适当的注释
    • 版本控制

6.2 与 Markdown 集成

6.2.1 内联方式
```plantuml
@startuml
Alice -> Bob: Hello
Bob -> Alice: Hi!
@enduml


#### 6.2.2 外部文件方式

1. 创建 `.puml` 文件:
```plantuml
@startuml architecture
' 图表内容
@enduml
  1. 在 Markdown 中引用:
![架构图](./images/architecture.png)
6.2.3 自动化构建

创建构建脚本 build.sh:

#!/bin/bash

# 设置变量
PUML_DIR="docs/puml"
IMG_DIR="docs/images"
README="docs/README.md"

# 创建输出目录
mkdir -p ${IMG_DIR}

# 转换所有 PlantUML 文件
for file in ${PUML_DIR}/*.puml; do
    filename=$(basename "$file" .puml)
    plantuml -tpng "$file" -o "${IMG_DIR}"
    plantuml -tsvg "$file" -o "${IMG_DIR}"
    echo "Converted $filename"
done

echo "All diagrams have been generated!"

6.3 进阶技巧

6.3.1 自定义样式
!define CUSTOM_STYLE() {
    !function $setStyle($element)
    !style $element {
        BackgroundColor #FEFEFE
        BorderColor #3498DB
        FontColor #333333
    }
    !endfunction
}

' 使用自定义样式
CUSTOM_STYLE()
$setStyle(componentDiagram)
6.3.2 条件样式
!$isDarkMode = %false()

!if ($isDarkMode)
skinparam backgroundColor #333333
skinparam fontColor #FFFFFF
!else
skinparam backgroundColor #FFFFFF
skinparam fontColor #333333
!endif
6.3.3 复杂布局
@startuml
!include layout.puml

' 使用布局模板
LAYOUT_TOP_DOWN()
COMPONENT_SPACING_LARGE()

' 图表内容
@enduml

6.4 工具链集成

6.4.1 Git 集成

创建 .gitattributes:

*.puml linguist-language=PlantUML
*.png binary
*.svg binary
avatar
文章
阅读
粉丝