Typora一些简单图表

**原理：**Mermaid 强力驱动

Mermaid 是一种简单的类似 MarkDown 的脚本语言，通过 JavaScript 编程语言，将文本转换为图片

初始化空白图

**```**输入Mermaid 回车即可

通用注释 %%

---

流程图（graph）

所有流程图都由节点、几何形状和边、箭头或线组成

mermaid代码定义了这些节点和边的制作和交互方式

基本语法：

流程图方向

graph 用于定义流程局节点的走线方向

其中： TD (或者 TB ) 表示方向 Top-Down，由上至下

​ BT 表示方向 Down-Top，由下至上

​ LR 表示方向 Left-Right，从左到右

​ RL 表示方向 Right-Left，从右到左

参数	含义
TB或TD	From top to bottom
BT	From bottom to top
RL	From right to left
LR	From left to right

节点联系

可以使用 & 符号 使节点建立依赖关系

节点形状

默认情况下流程图的节点形状为直角矩形，可通过括号的组合来改变流程图节点的形状

案例： 常见的节点形状

添加括号语法后，括号内的内容就是节点里显示的内容且里面必须有内容，括号外面的内容变成了节点形状的name(在一个图表中name不能相同);

节点形状语法表

语法	说明
start [ start ]	直角矩形(默认)
start ( start )	圆角矩形
start ([ start ])	体育场形
start [[ start ]]	长灯光形
start [( start )]	圆柱体形
start (( start ))	正圆形
start **>**start ]	标签形
start { start }	菱形
start { { start }}	六角形
start [/ start /]	平行四边形
start **[\ ** start ]	反向平行四边行
start [/ start ]	梯形
start **[\ ** start **/] **	倒梯形

连接线

节点形状间可以添加各式各样的连线，并且可以在线上添加注释；

连接线注释

语法	说明
--注释---或`—	注释
--注释-->或`—>	注释
==注释==或`===	注释
==注释==>或`===>	注释
-.注释.-或`-.-	注释
-.注释.->或`-.->	注释

连接线长度

说明	短	中	长
直线	---	----	-----
箭头	-->	--->	--->
加粗直线	===	====	=====
加粗箭头	==>	===>	====>
虚线	-.-	-..-	-...-
虚线箭头	-.->	-..->	-...->

以此类推可以堆叠加长

箭头类型

语法	说明
-->	三角形
--o	圆形
--x	X号

箭头方向

语法	说明
-->	单向
<-->	双向

连接线注释信息

符号表情

使用双引号将注释信息转成字符串

转义字符

使用转义字符必须用双引号括起来，并且必须在节点形状括号内使用

多层嵌套

为流程添加子层

subgraph title 子图 标题
graph definition 图形定义(图表内容)
end 结束

tag 节点名称

type 节点类型

start 开始节点
end 结束节点
operation 操作节点
subroutine 子程序节点
condition 条件节点
inputoutput 输入或产出节点
content 节点描述

url 超连接，与文本绑定

用 -> 来关两个节点，如果是 condition 节点将会有 yes 和 no 两个分支

---

时序图（sequenceDiagram 序列图）

序列图是一种交互图，它显示了流程以何种顺序相互操作

基本语法：

参与者

参与者:participant (矩形)

参与者默认为participant，所以一般无需显示声明，但当参与者字符比较长时，可以通过显示声明定义一个简单别名

参与者:actor (小人形状)

角色的顺序按照定义顺序呈现

**隐式定义：**按照先后顺序呈现

**显式定义：**一般通过在角色名前添加 participant 通过添加的顺序来呈现

注意: 一个图标只能由一个定义方式

**别名：**可以为角色定义别名（别名在前），参与者可以有方便的标识符和描述性标示，也就是别名，参与者名称太长的话，就可以用别名来代替

案例 显示定义+别名

箭头样式

类型	描述
->	实线
-->	虚线
->>	实线箭头
-->>	虚线箭头
-X(或x)	带箭头实线末端有×
--X(或x)	带箭头虚线末端有×
-)	括号箭头
--)	括号虚线箭头

激活

角色可以选择激活或停用，可以以专用声明决定是否激活

activate 激活 (主动)

deactivate 停用 (被动)

案例 角色B的激活和停用