3-9 在Obsidian中绘制流程图

# 前文提要

* [[3-8 在Obsidian中阅读文档]]
* 接下来：流程图！
	* Mermaid语法
	* Excalidraw
		* 基础操作
		* 高级版：更强大的功能
* 那么今天——
	* 基于Mermaid语法的流程图！
	* （我的最爱）

# 从Obsidian的代码模块说起

* 代码模块
* 为代码模块指定语法
* 根据不同的语法高亮或执行

# 什么是Mermaid语法？

* 关系
	* Markdown：游戏本地
	* Mermaid：DLC
* 流程图的语法：Mermaid
	* Markdown的扩展语言
	* 用文字描述流程图
* 支持的绘图类型
	* [[#流程图]]
	* [[#序列图]]
	* [[#甘特图]]
	* 类图
	* [[#饼图]]
	* [[#行程图]]
	* [[#象限图]]
	* [[#思维导图]]
	* ……

## 流程图

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

## 序列图

```mermaid
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

## 甘特图

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

## 饼图

```mermaid
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
```

## 行程图

```mermaid
journey
	title My working day
	section Go to work
	  Make tea: 5: Me
	  Go upstairs: 3: Me
	  Do work: 1: Me, Cat
	section Go home
	  Go downstairs: 5: Me
	  Sit down: 5: Me
```

## 象限图

![](/media/202408/2024-08-20_081818_3863850.06537331650873401.png)

## 思维导图

![](/media/202408/2024-08-20_081845_3400580.43643182555036875.png)

# 用Mermaid语法绘制流程图

* 以流程图为例
* 步骤
	* 创建代码块
	* 指定语法 `mermaid`
	* 指定图表类型 `graph`
	* 指定图表方向
	* 编写流程图代码
* 流程图代码
	* ![image.png](https://sand-1307453643.cos.ap-guangzhou.myqcloud.com/sandox/pic/202408181415356.png)
	* 2：`graph`图表样式
	* 3：`TB` 图表方向
		* `TB / TD` 从上到下
		- `BT` 从下到上
		- `RL` 从右到左
		- `LR` 从左到右
	* 分号间隔
* 细节语法
	* 节点
		* 节点文字
			* `block[This is the text in the box]`
		* 节点样式
			* 方框 `[]`
			* 圆角方框 `()`
			* 圆形 `(())`
			* 菱形 `{}`
			* 飘带 `>]`
	* 连接线
		* 连接线样式
			* -->
			* \---
			* -.->
			* ==>

# 用Mermaid语法绘制思维导图

* mindmap
* 层级缩进

# 插件

![image.png](https://sand-1307453643.cos.ap-guangzhou.myqcloud.com/sandox/pic/202408181309335.png)

# 课后作业

> 课后作业
> * 在Obsidian中，使用Mermaid语法，绘制一个流程图。

# 课时预告

* [[3-10 无限白板Excalidraw]]