# Typora-Markdown 画图🎄

💠

markdown 画图也是轻量级的

mermaid 是一个用于画流程图，状态图，时序图，甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中，mermaid 作为一个使用 JS 渲染的库，生成的不是一个 “图片”，而是一段 HTML 代码

📋

在 Typora 中输入 "```mermaid " 回车就会出现一个代码块，在里面进行代码画图操作

# 1. 流程图🎄

语法:🎲

graph 方向描述
 图表中其它的语句...

关键字 graph 表示一个流程图的开始，同时需要指定该图的方向。

其中 “方向描述” 为：🌠

T = TOP , B = BOTTOM , L = LEFT , R = RIGHT , D = DOWN

简单演示:

graph TB
 A-->B
 B-->C
 C-->A

• 流程图演示🌠

graph TB

 A-->B

 B-->C

 C-->A

graph LR

 A-->B

 B-->C

 C-->A

# 2. 流程图常用符号以及含义！🌴

节点形状 ⭐️

简单演示:

graph TB
  A
  B(圆角矩形节点)
  C[矩形节点]
  D((圆形节点))
  E{菱形节点}
  F>右向旗帜状节点] 
  G{{六边形}}
  H[/平行四边形/]
  I[\反向平行四边形\]
  J(((双层圆形)))
  K[[子程序型]]

• 图形演示🌠

graph TB

  A

  B(圆角矩形节点)

  C[矩形节点]

  D((圆形节点))

  E{菱形节点}

  F>右向旗帜状节点] 

  G<!--swig1-->

  H[/平行四边形/]

  I[\反向平行四边形\]

  J(((双层圆形)))

  K[[子程序型]]

# 连线🎄

💠

不同的线的形状

graph TB
  A1-->B1
  A2---B2
  A3--text---B3
  A4--text-->B4
  A5-.-B5
  A6-.->B6
  A7-.text.-B7
  A8-.text.->B8
  A9===B9
  A10==>B10
  A11==text===B11
  A12==text==>B12
  A13o--oB13
  A14<-->B14
  A15x--xB15

• 线的演示🌠

graph TB

  A1-->B1

  A2---B2

  A3--text---B3

  A4--text-->B4

  A5-.-B5

  A6-.->B6

  A7-.text.-B7

  A8-.text.->B8

  A9===B9

  A10==>B10

  A11==text===B11

  A12==text==>B12

  A13o--oB13

  A14<-->B14

  A15x--xB15

# 子图表🎄

💠

使用 <font style="color:red">subgraph</font> 关键字 来定义子图表，当然有子图表前必须先定义 graph.

subgraph 子图表名称
    子图表中的描述语句...
end

• 效果:🌠

graph TB

 subgraph 子图表

 	db[(MySQL)]-->depicted(持久化,关系型数据库)-->contact((联系))

 end

 contact-.->db1[(Redis)]-->contact1(存储缓存,非关系型数据库)

# 序列图🎄

💠

使用 <font style="color:red">sequenceDiagram</font> 关键字，里面的参与者使用 participant。

sequenceDiagram
	Title: 标题名
	[participant1][关系线][participant2]: 消息体
	...

sequenceDiagram 为每幅时序图的固定开头

• 效果:🌠

sequenceDiagram

	Title: 刘桑与小明

	participant liu as 刘桑

	note left of liu: 男

	participant xiao as 小明

	note right of xiao:女

	note over liu,xiao: 聊天

	liu->>+xiao: 在吗

	xiao-->-liu: 不在

	liu-->>xiao: 好的

	xiao->liu: 在吗

	liu--x+xiao: 不在

	xiao-x-liu: 好的

♦️

处理中 - 激活框.

从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。

在消息线末尾增加 + ，则消息接收者进入当前消息的 “处理中” 状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的 “处理中” 状态。

💫

注解：(note)

语法:

note 位置表述 参与者:标注文字

其中位置表述可以为:

# 循环 (loop)🎄

💠

在条件满足时，重复发出消息序列

sequenceDiagram
	Title: loop
	participant liu as 刘桑
	participant xiao as 小明
	liu ->> xiao: 在吗
	xiao ->> liu: 怎么了
	loop 过了三分钟...
		xiao ->> liu: 还活着吗
		liu ->> xiao: 在呢在呢
	end
	xiao -->> liu: 我以为你没了呢

• 效果:🌠

sequenceDiagram

	Title: loop

	participant liu as 刘桑

	participant xiao as 小明

	liu ->> xiao: 在吗

	xiao ->> liu: 怎么了

	loop 过了三分钟...

		xiao ->> liu: 还活着吗

		liu ->> xiao: 在呢在呢

	end

	xiao -->> liu: 我以为你没了呢

# 选择 (alt)🎄

💠

在多个条件中作出判断，每个条件将对应不同的消息序列

sequenceDiagram
	Title: alt
	participant liu as 刘桑
	participant xiao as 小明
	liu -->> +xiao: 在吗
	xiao -->> -liu: 在呢
	alt 可对话次数 > 3
		liu -->> xiao: 你明天有空吗
	else 1 < 可对话次数 < 3
		xiao -->> liu: 有啊怎么了
	else 可对话次数 < 1
		liu -->> xiao: 我们一起去爬山把
	end
	xiao ->> liu: 好啊

• 效果🌠

sequenceDiagram

	Title: alt

	participant liu as 刘桑

	participant xiao as 小明

	liu -->> +xiao: 在吗

	xiao -->> -liu: 在呢

	alt 可对话次数 > 3

		liu -->> xiao: 你明天有空吗

	else 1 < 可对话次数 < 3

		xiao -->> liu: 有啊怎么了

	else 可对话次数 < 1

		liu -->> xiao: 我们一起去爬山把

	end

	xiao ->> liu: 好啊

# 可选 (opt)🎄

💠

在某条件满足时执行消息序列，否则不执行。相当于单个分支的 if 语句。

sequenceDiagram
	Title: opt
	participant liu as 刘桑
	participant xiao as 小明
	liu -->> xiao:在吗
	opt 对方正忙,请勿打扰
		xiao -->> liu: 下次再来吧
	end

• 效果🌠

sequenceDiagram

	Title: opt

	participant liu as 刘桑

	participant xiao as 小明

	liu -->> xiao:在吗

	opt 对方正忙,请勿打扰

		xiao -->> liu: 下次再来吧

	end

# 并行 (Par)🎄

💠

将消息序列分成多个片段，这些片段并行执行。

sequenceDiagram
	Title: Par
	participant liu as 刘桑
	participant xiao as 小明
	liu ->> xiao: 在吗
	par 并行执行
		xiao ->> xiao: 吃饭
	and
		xiao ->> xiao: 吃完
	end
	xiao ->> liu: 在

• 效果:🌠

sequenceDiagram

	Title: Par

	participant liu as 刘桑

	participant xiao as 小明

	liu ->> xiao: 在吗

	par 并行执行

		xiao ->> xiao: 吃饭

	and

		xiao ->> xiao: 吃完

	end

	xiao ->> liu: 在

# 饼图 (pie)🎄

💠

pie
 title Pie Chart
 "Dogs":386
 "Cats":85
 "Rats":150

• 效果🌠

pie

 title Pie Chart

 "Dogs":386

 "Cats":85

 "Rats":150

# 甘特图 (gantt)🎄

💠

title 标题
dateFormat 日期格式化
section 部分名
任务名 :参数一，参数二，参数三，参数四，参数五
参数一：crit (是否重要，红框) 或者 不填
参数二：done(已完成),active(正在进行)或者 不填(表示为待完成状态)
参数三：des，不要写重复用于after哪个des任务后开始执行的
参数四：任务开始时间
参数五：任务结束时间

• 演示💫

gantt
	title 每日任务总结
	dateFormat yyyy-MM-dd
	section A 窦凯欣
	Completed task :done,des1,2023-04-24,1d
	Active task :active,des2,2023-04-25,3d
	Future task :des3,after des2,1d
	Future task1 :after des3,2d
	Future task2 :2023-04-28,4d
	
	section B 刘桑
	Completed task :crit,done,des,2023-04-24,12h
	Future task :crit,3d
	Future task1 :crit,active,des1,2023-04-27,3d
	Future task2 :1d
	Future task3 :2d

• 效果🌠

gantt

	title 每日任务总结

	dateFormat yyyy-MM-dd

	section A 窦凯欣

	Completed task :done,des1,2023-04-24,1d

	Active task :active,des2,2023-04-25,3d

	Future task :des3,after des2,1d

	Future task1 :after des3,2d

	Future task2 :2023-04-28,4d

	section B 刘桑

	Completed task :crit,done,des,2023-04-24,12h

	Future task :crit,3d

	Future task1 :crit,active,des1,2023-04-27,3d

	Future task2 :1d

	Future task3 :2d

# click 事件和 & 间隔符🎄

💠

& 标记，用来间隔多个节点，简化描述

graph
 a-->b & c-->d
 A[<u>百度</u>] %% 跳转到百度
 click A "http://www.baidu.com"

• 效果🌠

graph

 a-->b & c-->d

 A[<u>百度</u>] %% 跳转到百度

 click A "http://www.baidu.com"

# 状态图🎄

💠

语法解释： [*] 表示开始或者结束，如果在箭头右边则表示结束。

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

• 效果🌠

stateDiagram

	[*]--> A

	A --> [*]

# 类图🎄

💠

语法解释： <|-- 表示继承， + 表示 public ， - 表示 private ，学过 Java 的应该都知道。

classDiagram
	Person <|-- Dog
	Person <|-- Cat
	Person : +String name
	Person : +int age
	Person : +Person(String name,int age)
	class Dog {
		+String name
		+eat()
		+play()
	}
	class Cat {
		+String name
		-eat()
		-play()
	}

• 效果🌠

classDiagram

	Person <|-- Dog

	Person <|-- Cat

	Person : +String name

	Person : +int age

	Person : +Person(String name,int age)

	class Dog {

		+String name

		+eat()

		+play()

	}

	class Cat {

		+String name

		-eat()

		-play()

	}