使用Typora绘制类图、流程图、时序图

Typora并不是只能写文档，它还能“画图”。说是画图，但并不像其他专业的绘图软件那样，通过拖拖拽拽一些元素，画出流程图、时序图等。它的制图功能是由 Mermaid 驱动。

Mermaid：是一种简单的类似 Markdown 的脚本语言，通过 JavaScript 编程语言，将文本转换为图片。因此，真正实现画图功能的并不是 Typora 本身，它只是内置了对 Mermaid 的支持。

Mermaid 支持绘制非常多种类的图，常见的有时序图、流程图、类图、甘特图等等。下面分享一下如何绘制这些图，语法非常容易掌握。

先在 Typora 中，输入 ```mermaid 然后敲击回车，即可初始化一张空白图。（注：mermaid前面有三个`）

流程图

语法解释：graph 关键字就是声明一张流程图，TD 表示的是方向，这里的含义是 Top-Down 由上至下。

 

graph TD;
    A-->B;
    A-->C;
    B-->D;

时序图

语法解释：sequenceDiagram 声明一张时序图，  ->> 代表实线箭头，-->> 则代表虚线。

sequenceDiagram
    小明->>韩梅梅: 小明, 你好?
    韩梅梅-->>小明: 你好!

状态图

语法解释：stateDiagram 声明一张状态图，[*] 表示开始或者结束，如果在箭头右边则表示结束。

stateDiagram
    [*] --> s
     s --> [*]
     s --> s1
     s1 --> [*]

类图

语法解释：classDiagram 声明一张类图，<|-- 表示继承，+ 表示 public，- 表示 private，学过面向对象语言的应该都知道。

classDiagram
      动物 <|-- 天鹅
      动物 <|-- 鱼
      动物 <|-- 驴
      动物 : +int age
      动物 : +String gender
      动物: +isMammal()
      动物: +mate()
      class 天鹅{
          +String color
          +swim()
          +quack()
      }
      class 鱼{
          -int size
          -canEat()
      }
      class 驴{
          +bool is_wild
          +run()
      }

甘特图

语法解释：gantt 声明一张甘特图，，title标题、dateFormat日期格式、section项目、项目细分的任务。

gantt
    title 工作计划
    dateFormat  YYYY-MM-DD
    section Section
    A task           :b1, 2022-03-01, 30d
    Another task     :after b1  , 20d
    section Another
    Task in sec      :2022-03-12  , 12d
    another task      : 24d

饼图

语法解释：pie 声明一张饼图，title 标题

pie
    title 进口货物
    "衣物" : 40.86
    "粮食" : 40.05
    "生活用品" : 12.01
    "钢材" :  15

小结

Mermaid 使用非常简洁优雅的语法，让使用者可以快速地画出相应的图形，并且图片也非常美观，配色和谐。