Markdown Mermaid 绘制类图和饼图教程（以Joplin为例）-Light

在上一篇文章当中讲解了使用Mermaid插件绘制流程图和时序图，这篇文章我们讲解一下使用它绘制类图和饼图，这两种类型的图也非常有用。同理，本文使用Joplin作为示例程序，所有提供的样例代码可以直接拷贝到Joplin里面进行渲染，使用其它编辑器的小伙伴方法也差不多。

使用Mermaid绘制类图

在讲解如何绘制类图之前我们先了解一下什么是类图！如果你是计算机专业或者会计算机编程的话应该就懂面向对象编程，对象是类的实例，而这里要绘制的类图就和面向对象编程里面的类相关。

对于编程人员来说，函数具有参数和返回值，属性具有变量类型，我们举一个例子来说一下：

class BankAccount{
  +String owner
  +BigDecimal balance
  +deposit(amount) bool
  +withdrawl(amount)
}

上面的代码的渲染结果为：

上面的代码是我直接从官方借鉴的，可以直观地看出对于银行账户（BankAccount），一共有两个属性和两个方法，属性都是具有对应的变量类型，而对于函数具有参数（amount），并且deposit函数还具有bool类型的返回值。你或许看到了前面的+号，这个是对应变量或属性的可见性，分别有：

如果我们想要定义的函数是抽象函数咋办呢？在括号的后面添加*即可：

someAbstractMethod()*

在渲染过后抽象函数会使用斜体进行显示，这里就不截图展示了。对于静态函数，将后面的*换为$即可，在显示时静态函数会具有下划线。

在编程中我们常常会用到的关系：

下面我们举一个例子：“狗”继承自“动物”类别

```mermaid
classDiagram
	class 动物{
		特点1：能动
		特点2：能叫
	}
	class 狗{
		特点1：4条腿
		特点2：会汪汪叫
		特点3：可爱至极
		汪汪叫(陌生人)
	}
    动物 <|-- 狗
```

渲染结果为：

结合代码和展示结果应该很好理解，这就是一个狗继承自动物的简单例子，我们还可以对关系结果打标签：

```mermaid
classDiagram
	class 动物{
		特点1：能动
		特点2：能叫
	}
	class 狗{
		特点1：4条腿
		特点2：会汪汪叫
		特点3：可爱至极
		汪汪叫(陌生人)
	}
    动物 <|-- 狗:属于（继承）
```

我们在关系指示后面加上冒号，然后后面加上关系说明，这样在渲染结果当中我们就可以看到箭头上出现了我们需要的标签说明：

好了，使用mermaid绘制类图就讲到这里，还有一些用法不是很常用，我就不讲了。

绘制饼图的需求比较多，很多数据展示需要我们绘制饼图，幸运的是mermaid给我们提供了绘制饼图的功能，使用方法极其简单：

```mermaid
pie
    title LightZhan创作，允许规范转载（http://lightzhan.xyz）
    "Joplin" : 42.96
    "Qdown" : 50.05
    " 黑科技" : 10.01
    "其它" :  5
```

在上面的代码中，pie关键字指定我们要绘制饼图，然后tiltile指定我们的标题，后面是数据分布，注意，mermaid会将我们输入的数据进行计算，上面的数据加起来并不是100，所以我们看到在下面的渲染结果中数据对应不上。