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{
<
noOfVertices
draw()
}
class Color{
<
RED
BLUE
GREEN
}