Tip
本文介绍如何使用 Mermaid 绘制类图，以及相关的配置和语法规则。
前置知识：
- 基本的 Markdown 语法，可参考 markdown 文档风格
- 面向对象编程基础（了解类的概念）
介绍
Mermaid 是一个基于 JavaScript 的图表绘制工具，可渲染 Markdown 的文本定义以动态创建和修改图表。可以绘制的图表类型包括：
- 流程图
- 时序图
- 甘特图
- 类图
- Git 图
- 实体关系图
- 用户旅程图
- 象限图
- XY 图
Note
本文主要介绍类图的绘制，其他类型可以参考 Mermaid 官方文档。
安装
Tip
Obsidian 编辑器中自带 Mermaid 渲染，因此无需额外安装。
使用 npm 进行安装：
npm install -g yarn # 安装 `yarn`
yarn add mermaid # 安装 Mermaid使用
Tip
以下以在 Obsidian 中使用为例。在其他编辑器中的使用方法类似。
插入一个代码块，将语言设置为 mermaid，例如：
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
配置
Note
Mermaid 支持自定义图表的主题和外观。
可选的外观有：
- 手绘外观
- 经典外观
通过添加配置参数来选择外观：
---
config:
look: handDrawn
theme: neutral
---
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Continue]
B -->|No| D[Stop]
类图语法
基本语法
类成员(属性和方法)包含三个部分：
- 顶部：类名（粗体居中，首字母大写）
- 中间：类的属性（左对齐，首字母小写）
- 底部：类的方法（左对齐，首字母小写）
示例：
---
title: Bank example
---
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
定义类
有两种方法定义类：
- 使用
class关键字：class Animal - 通过关系定义：
Vehicle <|-- Car
Tip
可以为类添加标签：
class Animal["Animal with a label"]
类的关系
| 类型 | 描述 |
|---|---|
<|-- | 继承 |
*-- | 组合 |
o-- | 聚合 |
--> | 关联 |
-- | 链接(实线) |
..> | 依赖 |
..|> | 实现 |
.. | 链接(虚线) |
类的注释
使用 << 和 >> 添加注释：
classDiagram
class Shape{
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
}