Mermaid 类图语法教程 - 边学边练
Mermaid 是一个基于 JavaScript 的图表绘制工具，支持使用简单的文本语法来创建各种图表。本教程采用"边学边练"的方式，每个知识点都配有可交互的练习环节。
在开始学习之前，请先打开我们的 UML 在线编辑器，这样你可以一边学习一边练习。
提示：点击下方的"开始练习"按钮，代码会自动加载到编辑器中！
第一课：定义一个简单的类
让我们从最基础的类定义开始。请看下面的代码：
classDiagram
class Animal {
+String name
+int age
+void eat()
}
代码解析：
- 第1行：classDiagram - 声明这是一个类图
- 第2行：class Animal - 定义一个名为 Animal 的类
- 第3行：+String name - 定义公有属性，+ 表示 public
- 第4行：+int age - 定义另一个公有属性
- 第5行：+void eat() - 定义公有方法
练习任务：
1. 点击"开始练习"按钮，代码会加载到编辑器
2. 观察生成的类图
3. 尝试添加一个新属性 +String color
4. 点击"立即渲染"查看效果
第二课：理解可见性符号
面向对象编程中，类成员有不同的可见性。Mermaid 使用符号来表示：
| 符号 | 名称 | 说明 | 示例 |
|---|---|---|---|
+ |
Public | 任何地方都可以访问 | +String name |
- |
Private | 只有类内部可以访问 | -double balance |
# |
Protected | 类及其子类可以访问 | #int id |
~ |
Package | 同一包内的类可以访问 | ~String data |
示例代码：
classDiagram
class BankAccount {
-double balance
#String accountNumber
~String bankName
+void deposit(double amount)
+double getBalance()
-void validateTransaction()
}
练习任务：
1. 加载代码到编辑器
2. 观察不同可见性的显示效果
3. 尝试将 balance 改为公有属性（将 - 改为 +）
4. 思考：为什么余额应该是私有的？
第三课：类继承关系
继承是面向对象编程的核心特性。使用 <|-- 表示继承关系：
classDiagram
class Animal {
+String name
+int age
+void eat()
}
class Dog {
+String breed
+void bark()
}
class Cat {
-int lives
+void meow()
}
Animal <|-- Dog : 继承
Animal <|-- Cat : 继承
代码解析：
- Animal <|-- Dog - Dog 继承自 Animal
- : 继承 - 可选的关系标签
练习任务：
1. 加载代码并观察继承关系
2. 添加一个新的类 Bird 继承自 Animal
3. 为 Bird 添加属性 +boolean canFly 和方法 +void fly()
4. 添加继承关系 Animal <|-- Bird
第四课：关系类型大全
Mermaid 支持多种类关系，每种都有特定的语法和用途：
| 语法 | 关系类型 | 说明 | 使用场景 |
|---|---|---|---|
<|-- |
继承 | A 继承自 B | 类继承 |
*-- |
组合 | 强拥有关系 | 生命周期绑定 |
o-- |
聚合 | 弱拥有关系 | 可分离的拥有 |
--> |
关联 | 一般关联 | 对象引用 |
-- |
链接 | 实线连接 | 简单连接 |
..> |
依赖 | 虚线箭头 | 依赖关系 |
..|> |
实现 | 接口实现 | 接口实现 |
综合示例：
classDiagram
class Engine {
+int horsepower
+void start()
}
class Car {
+String model
+void drive()
}
class Person {
+String name
+void buyCar()
}
class IDriver {
<<interface>>
+void drive()
}
Car *-- Engine : 组合
Person o-- Car : 聚合
Person ..> IDriver : 依赖
Car ..|> IDriver : 实现
练习任务：
1. 加载代码并观察不同关系的显示
2. 理解组合和聚合的区别
3. 尝试添加一个新的关系：Person --> Car : 拥有
第五课：多重性标注
在关系上标注多重性，可以更清晰地表达数量关系：
classDiagram
Animal "1" --> "many" Food : 吃
Student "n" --> "1" Class : 属于
Department "1" *-- "n" Employee : 包含
练习任务：
1. 加载代码并观察多重性标注
2. 添加新关系：Teacher "1" --> "n" Student : 教授
第六课：添加注释
使用 note for 为类添加注释，增强可读性：
classDiagram
class Animal {
+String name
+int age
}
note for Animal "这是所有动物的基类\n包含基本属性"
class Dog {
+String breed
}
note for Dog "狗类，继承自 Animal"
练习任务：
1. 加载代码并观察注释显示
2. 为 Dog 类添加更详细的注释
第七课：布局方向控制
使用 direction 设置布局方向，优化图表展示：
classDiagram
direction LR
class A {
+void methodA()
}
class B {
+void methodB()
}
class C {
+void methodC()
}
A --> B
B --> C
布局方向选项：
- TB：从上到下（默认）
- BT：从下到上
- LR：从左到右
- RL：从右到左
练习任务：
1. 加载代码并观察布局
2. 尝试将 direction LR 改为 direction TB
3. 观察布局变化
实战练习：设计模式
单例模式
classDiagram
class Singleton {
-static Singleton instance
-Singleton()
+static Singleton getInstance()
}
note for Singleton "私有构造函数\n静态获取实例方法"
练习任务：
1. 加载代码并理解单例模式的结构
2. 思考：为什么构造函数是私有的？
工厂模式
classDiagram
class Product {
<<interface>>
+void use()
}
class ConcreteProductA {
+void use()
}
class ConcreteProductB {
+void use()
}
class Factory {
+Product createProduct(String type)
}
Product <|.. ConcreteProductA
Product <|.. ConcreteProductB
Factory ..> Product : creates
练习任务：
1. 加载代码并理解工厂模式的结构
2. 添加一个新的产品类 ConcreteProductC
学习总结
恭喜你完成了 Mermaid 类图的学习！现在你已经掌握了：
- 类定义和成员可见性
- 各种类关系（继承、组合、聚合等）
- 多重性标注和注释
- 布局方向控制
- 设计模式应用
下一步：
- 在 UML 在线编辑器 中创建自己的类图
- 学习更多 Mermaid 图表类型（时序图、流程图等）
- 参考 Mermaid 官方文档
本文由 yanleaf.com 提供，转载请注明出处。
评论区