uml-diagram-design by aaaaqwq/claude-code-skills
npx skills add https://github.com/aaaaqwq/claude-code-skills --skill uml-diagram-design此技能专门用于 UML(统一建模语言)图表的设计和绘制,包括:
用于展示系统中的类、属性、方法及其关系。
@startuml
class User {
- id: Long
- username: String
- email: String
- password: String
+ login(): boolean
+ logout(): void
+ updateProfile(): void
}
class Order {
- id: Long
- orderNumber: String
- totalAmount: Decimal
- status: OrderStatus
+ create(): void
+ cancel(): void
+ pay(): boolean
}
class Product {
- id: Long
- name: String
- price: Decimal
- stock: Integer
+ updateStock(quantity: Integer): void
+ getPrice(): Decimal
}
User "1" -- "*" Order : places
Order "*" -- "*" Product : contains
@enduml
关系类型 :
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
展示对象之间的交互顺序和消息传递。
@startuml
actor User
participant "Web Browser" as Browser
participant "API Server" as API
participant "Database" as DB
User -> Browser: 输入登录信息
Browser -> API: POST /api/login
activate API
API -> DB: 查询用户信息
activate DB
DB --> API: 返回用户数据
deactivate DB
alt 验证成功
API -> API: 生成 JWT Token
API --> Browser: 返回 Token
Browser --> User: 登录成功
else 验证失败
API --> Browser: 返回错误信息
Browser --> User: 显示错误提示
end
deactivate API
@enduml
元素说明 :
展示系统功能和参与者之间的关系。
@startuml
left to right direction
actor 用户 as User
actor 管理员 as Admin
rectangle 电商系统 {
usecase "浏览商品" as UC1
usecase "搜索商品" as UC2
usecase "添加到购物车" as UC3
usecase "下单购买" as UC4
usecase "支付订单" as UC5
usecase "管理商品" as UC6
usecase "查看订单" as UC7
usecase "处理退款" as UC8
}
User --> UC1
User --> UC2
User --> UC3
User --> UC4
User --> UC5
User --> UC7
Admin --> UC6
Admin --> UC7
Admin --> UC8
UC4 ..> UC3 : <<include>>
UC5 ..> UC4 : <<include>>
@enduml
关系类型 :
展示业务流程或算法的执行流程。
@startuml
start
:用户提交订单;
if (库存充足?) then (是)
:锁定库存;
:创建订单;
fork
:发送确认邮件;
fork again
:更新库存;
fork again
:记录日志;
end fork
:等待支付;
if (支付成功?) then (是)
:确认订单;
:安排发货;
else (否)
:取消订单;
:释放库存;
endif
else (否)
:提示库存不足;
endif
stop
@enduml
元素说明 :
展示对象在生命周期中的状态变化。
@startuml
[*] --> 待支付 : 创建订单
待支付 --> 已支付 : 支付成功
待支付 --> 已取消 : 超时/用户取消
已支付 --> 配货中 : 开始配货
配货中 --> 已发货 : 发货
已发货 --> 已完成 : 确认收货
已发货 --> 退款中 : 申请退款
退款中 --> 已退款 : 退款成功
退款中 --> 已发货 : 拒绝退款
已完成 --> [*]
已取消 --> [*]
已退款 --> [*]
待支付 : entry / 锁定库存
待支付 : exit / 释放库存
已支付 : entry / 扣减库存
@enduml
展示系统的组件结构和依赖关系。
@startuml
package "前端层" {
[Web 应用]
[移动应用]
}
package "API 层" {
[API Gateway]
[认证服务]
}
package "业务层" {
[用户服务]
[订单服务]
[商品服务]
[支付服务]
}
package "数据层" {
database "MySQL" as DB
database "Redis" as Cache
queue "消息队列" as MQ
}
[Web 应用] --> [API Gateway]
[移动应用] --> [API Gateway]
[API Gateway] --> [认证服务]
[API Gateway] --> [用户服务]
[API Gateway] --> [订单服务]
[API Gateway] --> [商品服务]
[订单服务] --> [支付服务]
[订单服务] --> DB
[用户服务] --> DB
[商品服务] --> DB
[用户服务] --> Cache
[商品服务] --> Cache
[订单服务] --> MQ
[支付服务] --> MQ
@enduml
展示系统的物理部署架构。
@startuml
node "用户设备" {
[浏览器]
[移动 App]
}
node "负载均衡器" {
[Nginx]
}
node "应用服务器集群" {
node "服务器 1" {
[Node.js 实例 1]
}
node "服务器 2" {
[Node.js 实例 2]
}
}
node "数据库服务器" {
database "MySQL 主库"
database "MySQL 从库"
}
node "缓存服务器" {
database "Redis 集群"
}
node "文件存储" {
[OSS/S3]
}
[浏览器] --> [Nginx]
[移动 App] --> [Nginx]
[Nginx] --> [Node.js 实例 1]
[Nginx] --> [Node.js 实例 2]
[Node.js 实例 1] --> [MySQL 主库]
[Node.js 实例 2] --> [MySQL 主库]
[MySQL 主库] --> [MySQL 从库] : 主从复制
[Node.js 实例 1] --> [Redis 集群]
[Node.js 实例 2] --> [Redis 集群]
[Node.js 实例 1] --> [OSS/S3]
[Node.js 实例 2] --> [OSS/S3]
@enduml
最流行的文本驱动 UML 工具。
安装 :
# 使用 npm
npm install -g node-plantuml
# 使用 Java
# 下载 plantuml.jar
java -jar plantuml.jar diagram.puml
在线工具 :
Markdown 友好的图表工具。
classDiagram
class User {
+String username
+String email
+login()
+logout()
}
class Order {
+String orderNumber
+Decimal amount
+create()
+cancel()
}
User "1" --> "*" Order : places
✓ 遵循单一职责原则
✓ 使用清晰的命名
✓ 标注关键属性和方法
✓ 显示重要的关系
✓ 使用包组织大型系统
✗ 避免过度设计
✗ 不要包含所有细节
✗ 避免循环依赖
✓ 从左到右排列参与者
✓ 按时间顺序排列消息
✓ 使用清晰的消息名称
✓ 标注重要的条件和循环
✓ 保持图表简洁
✗ 避免过多的参与者
✗ 不要遗漏返回消息
✗ 避免交叉的消息线
✓ 使用用户视角描述功能
✓ 保持用例粒度适中
✓ 明确参与者角色
✓ 标注关键的关系
✓ 按功能模块组织
✗ 避免技术术语
✗ 不要过于细化
✗ 避免遗漏重要用例
@startuml
' 核心领域模型
class User {
- id: Long
- username: String
- email: String
- phone: String
+ register()
+ login()
+ updateProfile()
}
class Product {
- id: Long
- name: String
- description: String
- price: Decimal
- stock: Integer
+ updateStock()
+ getPrice()
}
class Order {
- id: Long
- orderNumber: String
- totalAmount: Decimal
- status: OrderStatus
- createdAt: DateTime
+ create()
+ cancel()
+ pay()
+ ship()
}
class OrderItem {
- id: Long
- quantity: Integer
- price: Decimal
+ calculateSubtotal()
}
class Payment {
- id: Long
- amount: Decimal
- method: PaymentMethod
- status: PaymentStatus
+ process()
+ refund()
}
class Address {
- id: Long
- province: String
- city: String
- detail: String
- phone: String
}
enum OrderStatus {
PENDING
PAID
SHIPPED
COMPLETED
CANCELLED
}
enum PaymentMethod {
ALIPAY
WECHAT
CREDIT_CARD
}
User "1" -- "*" Order : places
User "1" -- "*" Address : has
Order "1" *-- "*" OrderItem : contains
OrderItem "*" -- "1" Product : references
Order "1" -- "1" Payment : pays with
Order "1" -- "1" Address : ships to
@enduml
@startuml
!define RECTANGLE class
package "客户端" {
[Web 前端]
[移动 App]
}
package "API 网关层" {
[API Gateway]
[认证中心]
}
package "微服务层" {
RECTANGLE "用户服务" {
[用户管理]
[权限管理]
}
RECTANGLE "商品服务" {
[商品管理]
[库存管理]
}
RECTANGLE "订单服务" {
[订单管理]
[订单状态]
}
RECTANGLE "支付服务" {
[支付处理]
[退款处理]
}
}
package "基础设施层" {
database "MySQL 集群"
database "Redis 集群"
queue "Kafka"
[配置中心]
[服务注册]
}
[Web 前端] --> [API Gateway]
[移动 App] --> [API Gateway]
[API Gateway] --> [认证中心]
[API Gateway] --> [用户管理]
[API Gateway] --> [商品管理]
[API Gateway] --> [订单管理]
[订单管理] --> [支付处理]
[订单管理] --> [库存管理]
[用户管理] --> [MySQL 集群]
[商品管理] --> [MySQL 集群]
[订单管理] --> [MySQL 集群]
[用户管理] --> [Redis 集群]
[商品管理] --> [Redis 集群]
[订单管理] --> [Kafka]
[支付处理] --> [Kafka]
[用户管理] --> [配置中心]
[商品管理] --> [配置中心]
[订单管理] --> [配置中心]
[用户管理] --> [服务注册]
[商品管理] --> [服务注册]
[订单管理] --> [服务注册]
@enduml
# 系统设计文档
## 类图
\`\`\`plantuml
@startuml
class User {
+login()
}
@enduml
\`\`\`
## 时序图
\`\`\`mermaid
sequenceDiagram
User->>API: 请求
API->>DB: 查询
DB-->>API: 返回
API-->>User: 响应
\`\`\`
/**
* 用户服务类
*
* @startuml
* class UserService {
* +register(user: User): boolean
* +login(username: String, password: String): Token
* }
* @enduml
*/
public class UserService {
// 实现代码
}
Weekly Installs
65
Repository
GitHub Stars
11
First Seen
Jan 22, 2026
Security Audits
Installed on
codex49
gemini-cli48
cursor47
opencode47
github-copilot45
claude-code44
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
49,900 周安装
union-search-skill:跨平台联合搜索工具,支持20+平台无API密钥搜索
118 周安装
Ant Design Vue 4.x 中文指南:Vue 3 UI 组件库安装、使用与API详解
126 周安装
API认证最佳实践指南:JWT、OAuth 2.0、API密钥安全实现与Node.js示例
120 周安装
Google Workspace Python集成教程:OAuth认证Gmail和日历API操作指南
121 周安装
muapi-workflow AI工作流构建器 - 自然语言创建自动化AI生成流水线
70 周安装
iOS和Android设备日志查看与过滤完整指南 - 移动应用调试必备技能
122 周安装