Markdown 中画图

使用 Mermaid 画图

Markdown可以进行优秀的文本编辑和排版，而 Mermaid 是可以在 markdown 中的渲染流程图、甘特图、类图、饼图等图表的标记。主流的 Markdown基本支持 Mermaid 图表渲染，这样我们就可以在 Markdown 中画图了，还可以多次编辑和减少图片插入。

Mermaid 支持以下图表（跳转链接可以查看对应示例和标记教程）：

1. 流程图（Flowchart）
2. 时序图（Sequence diagrams）
3. 类图（Class diagrams）
4. 状态图（State diagrams）
5. 实体关系图（Entity Relationship diagrams）
6. 用户行程/计划图（User Journey Diagrams）
7. 甘特图（Gantt）
8. 饼图（Pie Chart）

Mermaid 的使用需要像添加代码一样

​```mermaid
mermaid 图表语法
​```

Mermaid 在线画图地址,好像要梯子才可以试试编写。不仅可以编写查看图表，还可以输出图片以便在不支持 mermid 的编辑器中使用。

流程图

流程图常用于逻辑描述，逻辑关系的图解。

完整语法参考 Flowcharts ，可以设置流程图方向、节点图形样式、节点添加 url 跳转、线条样式、子流程图

流程图方向

TB - top to bottom == TD top-down

BT - bottom to top

RL - right to left

LR - left to right

示例

以一个 App 是否登录为例

graph TB
A(开始)-->B{是否登录}
B--是-->C[进入首页]
B--否-->D[弹框提示登录]
C & D-->E(结束)

F[可以跳转的节点];
click F "http://www.baidu.com"

graph 可以使用 flowchart替换

子流程图

graph LR
A-->B
subgraph cd 流程图
	C-->D
end
A.->C

节点换行

使用<br/>标记即可换行，讨论参考https://github.com/mermaid-js/mermaid/issues/384

时序图

时序图描述对象之间发送消息的事件顺序，表达多个对象之间的动态协作。包括角色、对象、生命线、控制焦点和消息的元素。

关系

sequenceDiagram
A ->> B: a 到 b
B -->> A: b 返回 a
A -> B: 线条连接
A -x B: 同步关系
A --x B: 异步关系

注解

可以添加 Note 来为时序图添加注解

sequenceDiagram
A -->> B: a 到 b
Note right of A: a 右边的注释
A -->> C: a 到 c
Note over A,C: a c 之间的注释

支付时序图示例

以用户支付时序图为例

sequenceDiagram
用户->>+客户端: 发起支付操作
客户端->>支付后台: 提交支付请求
loop 校验
	支付后台->>支付后台: 解析验证参数，创建支付预订单
end
支付后台->>第三方支付平台: 请求第三方支付
第三方支付平台-->>用户: 跳转第三方支付页面
用户->>第三方支付平台: 完成支付操作
第三方支付平台->>第三方支付平台: 进行转账操作
第三方支付平台-->>支付后台: 回调后端 返回支付结果
Note right of 支付后台: 需要更新财务系统
支付后台-->>客户端: 返回支付结果
客户端-->>用户: 显示支付页面

类图

类图用于描述一个类的大概，包含类名、属性、方法。

classDiagram
	Animal <|--Dog
	Animal <|--Fish
	Animal <|--Zebra
	
	Animal: age: Int
	Animal: gender: String
	
	Animal: +init()
  Animal: +isMammal()
  Animal: +mate()
  
  class Dog{
  	breakColor: String
  	+eat()
  }
  class Fish{
  	- sizeInFeet: Int
  	-canEat()
  }
  class Zebra{
  	+is_wild: Bool
  	+run()
  }

甘特图

甘特图主要做任务拆解。

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

饼图

饼图用于数据展示与统计，可以方便看出占比。

语法：

pie title 标题
	"key":value
	"key2":value2

示例

养宠物占比图

pie title 养宠物占比图(饼图示例)
"小狗"：40
"小猫": 30
"其他": 30

渲染效果图