当前位置：首页 > news >正文

Typora绘制-类图

news 2026/5/12 12:53:44

注意：类图的高亮新旧版本会正常显示

类图

mermaid官方网站文档教程链接(英文)

社区维护的中文文档站

1、新版本语法

classDiagram如下仅是基础的常用功能语法，如需更全面内容可参考官网教程文档

访问修饰符
```
+/-/#/~
```
+公共、-私有、#受保护、~包私有（核心用+/-即可）
类属性 / 方法
```
- name: String
```
属性：修饰符 + 名称 + 类型；方法：修饰符 + 名称 (参数) + 返回类型
接口定义
```
interface 接口名
```
接口用 interface 声明，方法无实现
抽象类 / 方法
```
abstract class 类名/abstract 方法()
```
抽象类 / 方法加 abstract 关键字

类间关系速查表（核心！）

关系类型	语法符号	示例	通俗解释
继承（泛化）	`--	>`	A --	> B	A 是 B 的子类（B 是父类）
实现接口	`..	>`	A ..	> B	A 实现 B 接口
组合	`--*`	A --* B	A 包含 B，B 不能脱离 A 存在
聚合	`--o`	A --o B	A 包含 B，B 可脱离 A 存在
关联	`-->`	A --> B	A 关联 B（单向，如用户有订单）
依赖	`..>`	A ..> B	A 临时使用 B（如方法参数）

注释规则
- 单行注释：%% 注释内容（必须以 %% 开头，可放在行首 / 行尾）；
- 多行注释：无原生支持，需每行加 %%；
特殊规则（避坑重点）
- 关系符号不能写反
  - 继承是「子类 --|> 父类」（如 Admin --|> User），写反会导致逻辑错乱；
  - 关联 / 依赖是「使用者 --> 被使用者」（如 User --> Order 表示用户关联订单）。
- 访问修饰符位置正确
  - 修饰符必须在属性 / 方法前（如 - id: Long ✅，id: Long - ❌）；
  - 无修饰符默认公共（+），但建议显式写清楚，提升可读性。
- 旧版 Typora 兼容
  - 旧版 Mermaid 不支持 abstract 关键字，可去掉，仅用注释标注；
  - 接口定义 interface 在旧版中会显示为普通类，可改用 class 接口名 <<interface>> 兼容。
- 特殊字符转义：类名 / 属性名含特殊符号（如 :/()）时，需用反斜杠转义
- 避免类名重复 / 关系过多
  - 类名必须唯一，重复会导致渲染异常；
  - 过多类间关系会让图杂乱，建议拆分多个类图（按模块分组）。

2、代码示例

示例1

classDiagram%% 类定义：类名 + 属性 + 方法class 类名 {访问修饰符 属性名: 类型访问修饰符 方法名(参数): 返回类型}%% 类间关系类A --|> 类B: 继承（泛化）类A --* 类B: 组合（整体包含部分，部分不能独立）类A --o 类B: 聚合（整体包含部分，部分可独立）类A --> 类B: 关联（单向依赖）类A ..> 类B: 依赖（临时使用）类A ..|> 类B: 实现接口

示例2

classDiagram%% 枚举class OrderStatus {<<enumeration>>PENDING_PAYMENTPAIDSHIPPEDCOMPLETEDCANCELLED}class PayType {<<enumeration>>WECHAT_PAYALIPAYUNION_PAY}%% 接口class Payable {<<interface>>pay(order, amount)refund(payRecord)}class Loggable {<<interface>>log(operation, content)}%% 抽象类class BaseEntity {<<abstract>>- id: Long- createTime: Date- updateTime: Date+ getId()+ getCreateTime()}class Product {<<abstract>>- name: String- price: Double- stock: Integer+ calculateFinalPrice()}%% 用户class User {- username: String- phone: String+ login()+ addAddress()}class Address {- province: String- city: String- detail: String+ getFullAddress()}%% 商品class PhysicalProduct {- weight: DoublecalculateFinalPrice()}class DigitalProduct {- downloadUrl: StringcalculateFinalPrice()}%% 订单class Order {- orderNo: String- totalAmount: Double- status: OrderStatus+ addOrderItem()+ calculateTotalAmount()+ changeStatus()+ log()}class OrderItem {- product: Product- quantity: Integer+ getItemTotal()}%% 支付class PayRecord {- payNo: String- amount: Double- payType: PayType+ log()}class WechatPay {+ pay()+ refund()}class Alipay {+ pay()+ refund()}%% 物流class Logistics {- logisticsNo: String- company: String+ updateTrack()}class LogisticsTrack {- status: String- time: Date- location: String}%% 继承User --|> BaseEntityProduct --|> BaseEntityPhysicalProduct --|> ProductDigitalProduct --|> ProductOrder --|> BaseEntityPayRecord --|> BaseEntity%% 实现接口Order ..|> LoggablePayRecord ..|> LoggableWechatPay ..|> PayableAlipay ..|> Payable%% 组合（整体-部分，不可分离）Order --* OrderItemLogistics --* LogisticsTrackUser --* Address%% 聚合（整体-部分，可分离）User --o OrderOrder --o Logistics%% 关联OrderItem --> ProductPayRecord --> OrderPayRecord --> PayTypeOrder --> OrderStatus%% 依赖WechatPay ..> OrderAlipay ..> PayRecord

3、效果示例

示例1

classDiagram%% 类定义：类名 + 属性 + 方法class 类名 {访问修饰符属性名: 类型访问修饰符方法名(参数): 返回类型}%% 类间关系类A --|> 类B: 继承（泛化）类A --* 类B: 组合（整体包含部分，部分不能独立）类A --o 类B: 聚合（整体包含部分，部分可独立）类A --> 类B: 关联（单向依赖）类A ..> 类B: 依赖（临时使用）类A ..|> 类B: 实现接口

示例2

classDiagram%% 枚举class OrderStatus {<<enumeration>>PENDING_PAYMENTPAIDSHIPPEDCOMPLETEDCANCELLED}class PayType {<<enumeration>>WECHAT_PAYALIPAYUNION_PAY}%% 接口class Payable {<<interface>>pay(order, amount)refund(payRecord)}class Loggable {<<interface>>log(operation, content)}%% 抽象类class BaseEntity {<<abstract>>- id: Long- createTime: Date- updateTime: Date+ getId()+ getCreateTime()}class Product {<<abstract>>- name: String- price: Double- stock: Integer+ calculateFinalPrice()}%% 用户class User {- username: String- phone: String+ login()+ addAddress()}class Address {- province: String- city: String- detail: String+ getFullAddress()}%% 商品class PhysicalProduct {- weight: DoublecalculateFinalPrice()}class DigitalProduct {- downloadUrl: StringcalculateFinalPrice()}%% 订单class Order {- orderNo: String- totalAmount: Double- status: OrderStatus+ addOrderItem()+ calculateTotalAmount()+ changeStatus()+ log()}class OrderItem {- product: Product- quantity: Integer+ getItemTotal()}%% 支付class PayRecord {- payNo: String- amount: Double- payType: PayType+ log()}class WechatPay {+ pay()+ refund()}class Alipay {+ pay()+ refund()}%% 物流class Logistics {- logisticsNo: String- company: String+ updateTrack()}class LogisticsTrack {- status: String- time: Date- location: String}%% 继承User --|> BaseEntityProduct --|> BaseEntityPhysicalProduct --|> ProductDigitalProduct --|> ProductOrder --|> BaseEntityPayRecord --|> BaseEntity%% 实现接口Order ..|> LoggablePayRecord ..|> LoggableWechatPay ..|> PayableAlipay ..|> Payable%% 组合（整体-部分，不可分离）Order --* OrderItemLogistics --* LogisticsTrackUser --* Address%% 聚合（整体-部分，可分离）User --o OrderOrder --o Logistics%% 关联OrderItem --> ProductPayRecord --> OrderPayRecord --> PayTypeOrder --> OrderStatus%% 依赖WechatPay ..> OrderAlipay ..> PayRecord

4、老版本语法

classDiagram新版本功能可以支持更丰富的内容，旧版写法差异明显，头部声明没有变化，不推荐使用就不介绍太多了。

classDiagramclass User {- name: String- age: int+ getName()}class Order {- orderId: String- price: double+ create()}User --> Order

classDiagramclass User {- name: String- age: int+ getName()}class Order {- orderId: String- price: double+ create()}User --> Order

5、新旧版本差异

新旧版本写法差异比较大，如下对比

对比项	旧版（Typora < 1.0，Mermaid < v9）	新版（Typora ≥ 1.0，Mermaid ≥ v9）	兼容性说明
头部声明	`classDiagram`	`classDiagram`	完全兼容
接口定义	必须写：`class 名称 <<interface>>`	支持标准：`interface 名称`	旧版不识别 `interface` 关键字
抽象类	必须写：`class 名称 <<abstract>>`	支持标准：`abstract class 名称`	旧版不识别 `abstract` 关键字
枚举	不支持 `<<enumeration>>`，写了必崩	支持：`class 名称 <<enumeration>>`	旧版必须当成普通类画
方法签名	极严格：仅支持 `方法名()`带参数 / 返回值极易渲染失败	完整支持：`+ 方法名(参数): 返回值`	旧版复杂签名高概率不渲染
属性格式	简单 `name: String`	支持访问修饰符：`- name: String`	旧版可兼容，但布局不稳定
继承	`A --	> B`	`A --	> B`	完全兼容
接口实现	`A ..	> B`	`A ..	> B`	完全兼容
组合	`A --* B`	`A --* B`	完全兼容
聚合	`A --o B`	`A --o B`	完全兼容
关联	`A --> B`	`A --> B`	完全兼容
依赖	`A ..> B`	`A ..> B`	完全兼容
样式配置	不支持 `%%{init: ...}%%`	支持全局样式、颜色、字体	旧版会直接忽略 / 报错
布局稳定性	关系多易乱、交叉严重、自动排版差	自动布局更稳定，关系线更清晰	新版明显更优