Mermaid在线生成类图

在线类图绘制工具介绍

说明: C++/C 类图没有特别合适的一键生成工具，所以出了这个教程，通过mermaid工具进行手动描画类图（还能加深对代码的理解噢~）

网址：https://mermaid-js.github.io/mermaid-live-editor/

可以举一个例子来看下类图绘制后的效果：

---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

下面会通过示例，介绍类图的描画语句 ~

定义类

classDiagram
class Animal

注：制作类图时，要先输入classDiagram，此时mermaid工具会识别出，你要描画的是类图。

如果你想给类赋予一个标签，可以参考下面的写法 [“你要描述的标签”]

classDiagram
    class Animal["Animal with a label"]

classDiagram
    class Animal["Animal with a label"]
   

定义类的成员（方法/变量）

注：在mermaid工具中，会通过（）来区分属性和方法，带（）是函数/方法，反之被视为属性。

classDiagram
class BankAccount
BankAccount : +String owner 
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)

如果是同个类的多个成员，也可以用{}来进行描画（效果和上面一样，只不过不用重复的去写类名了），写法如下：

classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount)
    +withdrawal(amount)
}

泛型

在mermaid工具中，可以通过~将类型括起来，表示泛型。

PS： ①目前mermaid工具中不支持包含逗号的泛型，比如：List<List<K, V>>

​ ②支持嵌套类型声明，比如：List<List>

具体的写法如下：

classDiagram
class Square~Shape~{
    int id
    List~int~ position
    setPoints(List~int~ points)
    getPoints() List~int~
}

描述类中的属性或者方法的可见性时，可以在成员名称前加入符号来表示特定的可见性：

• +（Public 公有）
• -（Private 私有）
• #（Protected 保护）
• ~ （Package/Internal 包/内部）

定义类间关系

在mermaid工具中，可以通过特定符号表示类间的关系。

大概的结构是：

[classA][Arrow][ClassB]

如下：

Type	Description
`<	–`
*--	Composition 组合
o--	Aggregation 聚合
-->	Association 关联
--	Link (Solid) 链接（实线）
..>	Dependency 依赖
`…	>`
..	Link (Dashed) 链接（虚线）

上述的描述可能太过严谨，下面是对应关系的解释：

1. 继承（Inheritance）: 使用 <|-- 来表示，箭头指向父类。例如：子类A <|-- 父类B
2. 组合（Composition）: 使用 *-- 来表示，表示强的拥有关系，整体与部分的生命周期相同。例如：整体 *-- 部分
3. 聚合（Aggregation）: 使用 o-- 来表示，表示弱的拥有关系，整体与部分的生命周期不同。例如：整体 o-- 部分
4. 关联（Association）: 使用 --> 来表示，表示两个类之间有关联，但不属于组合或聚合关系。例如：类A --> 类B
5. 链接（实线）: 使用 -- 表示普通的关联关系，没有特定的含义，只表示两个类之间有某种关系。
6. 依赖（Dependency）: 使用 ..> 表示，表示一个类的实现依赖于另一个类。例如：类A ..> 类B
7. 实现（Realization）: 使用 ..|> 表示，表示一个类实现了接口或抽象类。例如：类A ..|> 接口B
8. 链接（虚线）: 使用 .. 表示普通的链接关系，没有特定的含义，只表示两个类之间有某种关系。

示例如下：

classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP

在类与类间的连线处，也可以加入备注

classDiagram
classA --|> classB : 继承

在类与类间的关系也可以彼此关联，而不是必须单向的

classDiagram
Animal <|--|> Zebra

定义命名空间

在mermaid工具中，支持对命名空间的定义

举例如下：

classDiagram
namespace BaseShapes {
    class Triangle
    class Rectangle {
      double width
      double height
    }
}

classDiagram
namespace BaseShapes {
    class Triangle
    class Rectangle {
      double width
      double height
    }
}

其他：

上述就是常用的类图的一些属性和描绘方法，还有一些细节没有介绍，大家有兴趣可以在说明文档自己找下。

说明文档链接如下：https://mermaid.js.org/intro/