Markdown流程图Mermaid语法

在 Markdown 中，可以使用 Mermaid 语法来绘制流程图。

Mermaid 是一种基于文本的图表生成工具，支持流程图、序列图、甘特图等多种图表类型。

Mermaid 的官方文档：https://mermaid-js.github.io/mermaid/#/flowchart

1.流程图的普通示例

```mermaid
flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作1]
    B -->|否| D[执行操作2]
    C --> E[结束]
    D --> E
```

效果如图：

如果想要连接连线不用弯的线，改为直线，可以在 flowchart TD 这一句前面加上下面这样一句：

%%{init: {'flowchart': {'curve': 'linear'}}}%%

2.语法说明：

1. 方向定义：

   • TD / TB：从上到下（Top to Bottom）
   • LR：从左到右（Left to Right）
   • RL：从右到左

2. 节点类型：

   • A[文本]：矩形节点
   • B{文本}：菱形（条件判断）
   • C(文本)：圆角矩形
   • D([文本])：两边半圆矩形
   • E[/文本/]：平行四边形
   • F((文本))：圆形节点

3. 连接线：

   • -->：实线箭头
   • ---：无箭头实线
   • -.->：虚线箭头
   • -- 文本 -->：带文字的连接线（如 |是|）

3.流程图的复杂示例

```mermaid
flowchart LR
    A[登录系统] --> B{验证成功?}
    B -->|是| C[进入主页]
    B -->|否| D[显示错误]
    C --> E[浏览内容]
    E --> F[退出系统]
```

效果如图：

4.Markdown编辑器中预览流程图效果

1.VS Code

若要在 VS Code 里的 Markdown 预览中看到 Mermaid 绘制的流程图，需要安装 Markdown Preview Mermaid Support 扩展。

2.Obsidian

Obsidian 好像已经自带了，直接可以看到效果。