一、前言

作为程序员，我们在使用markdown编写文本时，有时需要话一些流程图、数据结构图、时序图等，使用传统的工具visio、flow.io等耗时是比较久的，流程繁琐。而typora内部是支持mermaid语法，根据文本自动渲染图片。网络上有很多mermaid语法的详细教学，**本文的目的是编写一些demo示例，方便使用时copy，**这些不常用的语言语法，基本上是很容易忘记的，学习一遍有个大致了解，后续使用基于demo进行修改即可。

二、示例

1. 流程图(Flow Chart)

• 顺序流程图

graph LR
  A[起床] --> B[吃饭]
  B -->C[打游戏]
  C --> D[睡觉]

• 带判断的流程图

graph LR
  A[开始] --> B{晴天?}
  B -->|Yes| C[旅行]
  B -->|No| D[刷剧]
  C --> D

• 从上到下流程图

graph TB
  A[开始] --> B{晴天?}
  B -->|Yes| C[旅行]
  B -->|No| D[刷剧]
  C --> D

1. flowchart 和 graph关键字效果一样
2. 方向定义：常用的画图方向

TB - 从上到下
LR - 从左到右

3. 形状：

[] 方框
{} 棱形判断框
() 圆角矩形

2. 类图(数据结构关系)(class Diagram)

在走读代码时经常需要画数据结构关系图，使用画图工具非常慢，使用mermaid根据文本形式渲染非常快，大幅提升效率。

  classDiagram
  
  class Animal {
  	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()
    }
 Animal <|-- Duck
 Animal <|-- Fish
 Animal <|-- Zebra

1. <|-- 定义箭头顺序
2. Animal: xxx 表示某个类型的某个属性。

3. 状态图 (State Diagram)

stateDiagram
  init --> discovery : dhcp获取IP
  discovery --> configure : 探测成功
  discovery --> init : 探测失败
  configure --> run : 配置成功
  run --> init :  离线

日常画状态图，其实主要两点状态和条件画出来即可，最简语法如下：

状态A --> 状态B : 条件

4. 时序图(Sequence Diagram)

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: Hello Bob, how are you?
  Bob-->>Alice: I am good thanks!

1. participant: 定义对象
2. 线条

->> 实现
-->> 虚线

3. 线条标语, 冒号后跟随，语法和状态图类似。

时序图，主要元素对象和来回交流，按照时间顺序一条一条画出来即可，相对比较简单。以下是设计3个对象的时序图。

sequenceDiagram
  participant Alice
  participant Bob
  participant merry
  Alice->>Bob: Hello Bob, how are you?
  Bob->>merry: Hello merry, how are you?
  merry-->>Bob: I am good thanks!
  Bob-->>Alice: I am good thanks!
  

5. 甘特图(gantt Diagram)

甘特图通常用于项目汇报，任务计划中，平时工作中使用也较多。

gantt
  title A Gantt Diagram
  dateFormat  YYYY-MM-DD
  section zhangsan
  采购           :a1, 2014-01-01, 30d
  出差     :after a1  , 20d
  section lisi
  写文案      :2014-01-12  , 12d
  客户交流    : 24d

甘特图主要涉及3个对象：

1）人：section字段

2）任务

3）持续时间，起始时间，耗时。语法如下：

section 人
  任务      :起始时间  , 耗时

6. 语法速查

1） 箭头形状

graph LR
实线 --- A --> B --> |线上文字| C

粗实线 --- D ==> E ==> |线上文字| F

虚线 --- G -.-> H -.-> |线上文字| I

无箭头线 --- J --- |线上文字| K

双向箭头线 --- L <--> M <--> |线上文字| N

2）方框形状

graph LR

id1[ 矩形 ]
id2( 圆角矩形 )
id3([ 体育场形 ])
id4[[ 子程序形 ]]
id5[( 圆柱形 )]
id6(( 圆形 ))
id7{ 菱形 }
id8{{ 六边形 }}
id9[/ 平行四边形 /]
id10[\ 反向平行四边形 \]
id11[/ 梯形 \]
id12[\ 反向梯形 /]
id13> 不对称矩形 ]
id14((( 双圈节点 )))

其他如饼图、用户旅程图实际使用不多，详细教程请前往 mermaid中文网 查阅。

三、参考资料

mermaid中文网

https://blog.csdn.net/asa12138/article/details/136463515

https://blog.csdn.net/weixin_44878336/article/details/145095671