生成类图
你会学到什么：在 Claude Code 中用自然语言生成标准的 UML 类图，从 Mermaid 语法到前端项目实战，掌握类图这一描述代码结构的蓝图工具。本文涵盖类图基础概念、Mermaid 语法详解、Claude Prompt 技巧、Vue 3/TypeScript 实战场景，以及 PlantUML 替代方案。
类图是什么
类图（Class Diagram）是 UML（统一建模语言）中最常用的图之一，用来描述系统中类的静态结构和它们之间的关系。对于前端开发者来说，类图就是"代码结构的蓝图"——一眼看懂组件继承、类型依赖、模块关系。
核心概念
| 概念 | 说明 | 示例 |
|---|---|---|
| 类（Class） | 具有相同属性和方法的抽象 | Button 组件有 size、disabled 属性和 click() 方法 |
| 接口（Interface） | 定义行为规范，不包含实现 | IComponent 接口规定所有组件必须有 render() 方法 |
| 继承（Inheritance） | 子类继承父类的属性和方法 | IconButton 继承 Button，复用基础逻辑 |
| 组合（Composition） | 强关联，部分不能脱离整体存在 | Form 组件由多个 FormItem 组成，表单项不能独立于表单 |
| 聚合（Aggregation） | 弱关联，部分可以独立存在 | Department 聚合多个 Teacher，教师可以独立存在 |
| 依赖（Dependency） | 一个类使用另一个类 | Button 依赖 Icon 组件来显示图标 |
一句话总结
类图 = 蓝图，描述代码中"有什么类"以及"它们怎么关联"，比看 500 行代码快 10 倍。
Mermaid classDiagram 语法详解
Mermaid 是最流行的文本绘图工具，GitHub、GitLab、Notion 原生支持。classDiagram 是它的类图语法，简单到"一天就能学会"。
基础语法
语法拆解：
classDiagram声明图类型class定义类+String name是属性：+表示 public，String是类型，name是名称+makeSound()是方法：括号内为参数列表
访问修饰符
| 符号 | 含义 | 前端场景示例 |
|---|---|---|
+ | Public | props、emits |
- | Private | 内部状态 _state |
# | Protected | 子类可访问的 _baseConfig |
关系类型
| Mermaid 语法 | UML 关系 | 说明 | 前端示例 |
|---|---|---|---|
| `< | --` | 继承（Inheritance） | 实线三角箭头 |
*-- | 组合（Composition） | 实线菱形箭头 | Form *-- FormItem |
o-- | 聚合（Aggregation） | 空心菱形箭头 | Page o-- Header |
| `..> | ` | 依赖（Dependency） | 虚线开放箭头 |
| `.. | >` | 实现（Realization） | 虚线三角箭头 |
完整示例：Vue 3 组件继承体系
解读：Button、Input、Select 都继承自 BaseComponent，共享 mount、unmount 等基础方法，各自扩展特定属性。
Claude Code 生成类图的 Prompt 技巧
Claude Code 读代码 + 懂语法 = 自动生成类图。关键是怎么问才能得到精确结果。
基础 Prompt 模板
分析这段代码，用 Mermaid classDiagram 画出类关系图：
[粘贴代码]
要求：
1. 只包含主要的类/接口
2. 标注 public 属性和方法
3. 显示继承和依赖关系
text
高级 Prompt 模板
场景1：关注接口关系
阅读 src/types/interface.ts，生成 Mermaid 类图：
- 只显示 interface，不显示实现类
- 用 ..>| 标注接口继承关系
- 省略方法签名，只显示接口名称
text
场景2：组件依赖分析
分析 src/components/Button.vue 的依赖关系，生成类图：
- Button 作为核心类
- 用 ..>| 箭头指向它依赖的组件（Icon、Tooltip）
- 用 o-- 显示它聚合的子组件（ButtonGroup）
text
场景3：泛型关系
将这段 TypeScript 代码转为 Mermaid 类图，保留泛型信息：
interface Store {
state: T
getters: U
}
text
迭代优化技巧
第一次生成后：
补充完善：
1. BaseComponent 的 protected 属性没显示，加上 _componentId 和 _isMounted
2. Button 和 Icon 之间是依赖关系，用 ..>| 箭头
3. 增加接口 IClickable，Button 实现它
text
调整样式：
给上图的类加上样式：
- 接口用绿色填充
- 抽象类用灰色填充
- 普通类用白色填充
text
2-3 个实用 Prompt 模板
模板1：快速概览
生成 [文件路径] 的类图，只显示类名和继承关系，省略属性和方法
text
模板2：深度分析
分析 [目录路径] 下的所有 TypeScript 文件，生成完整的类关系图，包括：
- 类和接口
- 属性类型和访问修饰符
- 方法签名
- 继承、组合、依赖关系
text
模板3：对比视图
用两个 Mermaid 图对比重构前后的类结构变化：
左图：[旧代码]
右图：[新代码]
text
前端项目类图实战
场景1：Vue 3 组件库类图
一个典型的组件库包含基础组件、表单组件、布局组件、反馈组件。
解读要点：
- 所有组件实现
IComponent接口（<|..表示实现，不是类继承——Vue 3 用 composition，不用 class extends） Form组合FormItem（*--表示强组合，表单项不能独立于表单工作）Select聚合SelectOption（o--表示弱聚合，选项可以独立定义）Form和FormItem都依赖FormRule（..>表示依赖，使用但不持有）
场景2：TypeScript 类型关系图
TypeScript 的 interface 和 type 在类图中表示为接口，泛型关系用 < > 标注。
TypeScript 特有技巧：
- 用
<<interface>>标注接口 - 泛型用
Array~T~或Map~K,V~表示（Mermaid 中<>有特殊含义） - 联合类型用
|表示在注释中
场景3：Pinia Store 类图
Pinia 的 Store 本质上是包含 state、getters、actions 的类。
Pinia 特有表示：
state用普通属性表示getters和actions分开为单独的"类"- 用
..>依赖关系表示包含关系
PlantUML 类图方案
Mermaid 不是唯一选择，PlantUML 是更老牌的 UML 工具，功能更强大。
Mermaid vs PlantUML 对比
| 特性 | Mermaid | PlantUML |
|---|---|---|
| 当前版本 | 12.3.0（2026-11-07 核实） | 1.2026.9（2026-10，月更） |
| 安装依赖 | 无需安装（浏览器原生） | 需要 Java 11+（可让 AI 用 ASDF 一句话装好，见 02节） |
| 语法学习曲线 | 简单，1天上手 | 复杂，需要 3-5 天 |
| 平台支持 | GitHub、GitLab、Notion | IDEA、VS Code（需插件） |
| 样式定制 | 有限（classDef） | 强大（skinparam） |
| UML 完整性 | 基础类图 | 完整 UML 2.0 |
| 渲染性能 | 快（浏览器渲染） | 慢（Java 生成） |
| 适用场景 | 文档、快速绘图 | 复杂架构图、出版物 |
PlantUML 特有能力
1. skinparam 样式定制
@startuml
skinparam class {
BackgroundColor White
ArrowColor Black
BorderColor Black
AttributeIconSize 0
}
skinparam classAttribute {
FontSize 10
}
class Button {
+ size: String
+ disabled: Boolean
+ click(): void
}
@enduml
plantuml
2. 包图（Package）
@startuml
package "Components" {
class Button
class Input
class Select
}
package "Utils" {
class Validator
class Formatter
}
Button ..> Validator : uses
@enduml
plantuml
3. 注解和说明
@startuml
class Button {
+ size: String
+ click(): void
}
note left of Button
这是基础按钮组件
支持三种尺寸
end note
note right of Input
输入框组件
支持双向绑定
end note
@enduml
plantuml
同样场景的 PlantUML 代码
@startuml
' Vue 3 组件继承体系
abstract class BaseComponent {
# {field} componentId: String
# isMounted: Boolean
+ mount(): void
+ unmount(): void
+ emit(event, data): void
}
class Button {
+ size: String
+ type: String
+ variant: String
+ disabled: Boolean
+ handleClick(): void
}
class Input {
+ modelValue: String
+ placeholder: String
+ readonly: Boolean
+ handleInput(): void
}
class Select {
+ options: Array<Option>
+ modelValue: String
+ multiple: Boolean
+ handleChange(): void
}
BaseComponent <|-- Button
BaseComponent <|-- Input
BaseComponent <|-- Select
@enduml
plantuml
何时选择 PlantUML：
- 需要复杂 UML 图（时序图、状态图、部署图）
- 需要精确控制样式（发布到技术文档）
- 项目已使用 PlantUML，保持一致性
- 不在乎 Java 依赖
实战场景：SQL 建表语句转类图
类图是 PlantUML 在真实工作里最划算的切入点。对比前面 Mermaid 生成的类图，PlantUML 输出的类图元素更丰富：实体框可以带批注（note）、字段可以标 <<PK>>/<<FK>> 构造型、支持 hide/show 控制细节层级；同一个 .puml 文件改个关键词就能出时序图、用例图、对象图、活动图——交付文档时经常是"类图 + 时序图 + 用例图"一整套，PlantUML 一站式覆盖。
把数据库表结构转成类图交付，是政企项目文档的常见需求（数据库里的表 → 面向对象的类视图）。环境配置和 skill 的创建过程在 02节 已经完整演示过（AI + ASDF 装 Java → 下载 jar → 创建 skill），这里只看类图场景的用法——skill 就绪后一句话：
把这个 SQL 文件里的建表语句转成 PlantUML 类图，
主键标 <<PK>>、外键标 <<FK>> 并画出关联关系，输出最终 PNG。
markdown
转换规则很机械（AI 做这类映射非常稳）：每张表 → 一个 class；字段 → 属性（带类型）；主键加 <<PK>> 构造型；外键字段 → 类之间的关联连线（TableA "1" --> "*" TableB）。生成的 .puml 源文件保留下来，表结构变更后改源文件重新渲染即可，类图从此和代码一样进入版本管理。
渲染与导出
详细的 Mermaid 预览和导出方法已在上一章 02-AI图表生成实战 讲解，这里简要回顾：
实时预览方式
- VS Code 插件：安装 "Markdown Preview Mermaid Support" 或 "Mermaid Preview"
- 在线编辑器：Mermaid Live Editor 实时渲染
- Obsidian：原生支持，直接输入代码块即可
- GitHub/GitLab：在 Markdown 文件中写代码块，自动渲染
导出格式
- PNG/SVG：Mermaid Live Editor → 导出
- PDF：先导出 SVG，再用浏览器打印为 PDF
- 嵌入文档：直接复制代码块到 Markdown
实战案例：智能组件库 TypeScript 类型体系类图
设计思路
为课程中的组件库项目设计类型关系图，需要体现：
- 基础类型定义：
Size、Variant、Color等通用类型 - 组件 Props 类型：每个组件的属性接口
- 组件继承体系：基础组件 → 业务组件
- 类型复用关系：通用类型如何被多个组件引用
完整的 Mermaid 代码
设计思路解读
- 类型复用优先：定义
ComponentSize、ComponentVariant等通用枚举，多个组件共享 - Props 组合模式：
ButtonProps同时继承BaseProps、DisabledProps、LoadingProps，避免重复定义 - 关注点分离：类型定义（Props）与组件实例分离，类图清晰显示两层关系
- 标注关键信息：用
note给关键 Props 添加说明，帮助理解设计意图
Claude Code 生成实战
Prompt：
为我的 Vue 3 组件库项目生成 TypeScript 类型体系类图。
项目结构：
- types/common.ts：定义 ComponentSize、ComponentVariant、ComponentColor
- types/button.ts：定义 ButtonProps
- types/form.ts：定义 FormProps、FormRules
- components/ 目录：Button、Input、Select、Form、Table
要求：
1. 显示类型继承关系（ButtonProps 继承 BaseProps）
2. 显示类型依赖（ButtonProps 使用 ComponentSize）
3. 区分类型定义和组件实例（用注释标注）
4. 给关键类型添加说明注释
text
迭代优化：
补充完善：
1. 增加 DisabledProps 和 LoadingProps 通用接口
2. 显示组件如何使用对应的 Props 类型（用 ..> 箭头）
3. 用 <<enumeration>> 标注枚举类型
4. 调整布局，让类型定义在上，组件实例在下
text
小结
| 要点 | 说明 |
|---|---|
| 类图价值 | 代码结构的蓝图，比阅读源代码快 10 倍 |
| Mermaid 优势 | 零依赖、语法简单、平台原生支持 |
| PlantUML 优势 | 功能完整、样式强大、适合复杂图 |
| Claude 提示词技巧 | 明确范围、指定关系、迭代优化 |
| 前端实战重点 | 组件继承、Props 类型、Store 结构 |
下一步行动：
- 用 Claude Code 分析自己项目的类型定义，生成类图
- 对比重构前后的类图，验证架构改进
- 在技术文档中嵌入类图，提升新人理解速度
相关章节：
- 上一章 02-AI图表生成实战：Mermaid 基础语法、预览与导出
- 01-专业图表方案选型：ER 图和类图的工具选择
- 02-生成ER图：数据库实体关系图
- 04-固定docx风格：将图表嵌入统一风格的 Word 文档
↑