渲染Mermaid流程图

<think>我们正在讨论如何使用Mermaid语法来渲染流程图。根据引用[2]和引用[3]，我们可以总结出Mermaid流程图的基本语法规则。 首先，流程图的基本结构以`graph`关键字开始，后面跟随流程图的流向（如TD表示从上到下，TB也是从上到下，BT从下到上，RL从右到左，LR从左到右）。 节点用字母或单词表示，节点之间用箭头（`-->`）连接。 节点可以有不同的形状，通过不同的语法表示： - 矩形节点：id[文字] - 圆角矩形节点：id(文字) - 圆形节点：id((文字)) - 菱形节点：id{文字} - 右向旗帜状节点：id>文字] 另外，我们还可以为连接线添加文字说明，使用`|`符号在连接线上添加文字，例如：`A-->|文字|B` 或者 `A-- 文字 -->B`。 下面是一个具体的例子，展示一个简单的流程图，包括开始、处理、判断和结束节点： ```mermaid graph TD A[开始] --> B[处理数据] B --> C{判断条件} C -->|是| D[执行操作1] C -->|否| E[执行操作2] D --> F[结束] E --> F ``` 在这个例子中： - 开始节点A是一个矩形节点。 - 处理数据节点B也是矩形节点。 - 判断条件节点C是一个菱形节点。 - 执行操作1和操作2是矩形节点，结束节点也是矩形节点。 - 连接线上有文字“是”和“否”。 另外，Mermaid还支持子图（subgraph），可以使用`subgraph 子图名称`和`end`来定义。 注意：在Markdown中，我们使用三个反引号（```）来包裹Mermaid代码，并标注语言类型为mermaid。 如果你需要更复杂的流程图，可以查阅Mermaid的官方文档，但以上基本元素已经可以满足大多数需求。 现在，你可以尝试使用上述语法来创建你自己的流程图。 §§相关问题§§ 1. Mermaid流程图支持哪些节点形状？ 2. 如何在Mermaid流程图中添加连接线上的文字？ 3. Mermaid流程图中的子图如何定义？ 4. Mermaid流程图中的流向（如TD、LR）分别代表什么？</think>### 如何使用 Mermaid 语法渲染流程图 Mermaid 是一个基于 JavaScript 的图表绘制工具，通过简单的文本语法即可生成流程图。以下是核心语法规则（基于引用[2][3]）： #### 1. 基础结构 ```mermaid graph TD A[开始] --> B[处理数据] B --> C{判断条件} C -->|是| D[执行操作] C -->|否| E[结束] D --> E ``` - `graph TD` 声明流程图（TD = 从上到下） - 可用流向：`TB`（上→下）、`LR`（左→右）、`RL`（右→左）、`BT`（下→上） #### 2. 节点类型 | 语法 | 形状 | 示例 | |--------------|------------------|------------------| | `id[文本]` | 矩形 | `A[开始]` | | `id(文本)` | 圆角矩形 | `B(处理)` | | `id{文本}` | 菱形（判断） | `C{条件?}` | | `id((文本))` | 圆形 | `D((结束))` | | `id>文本]` | 右向旗帜 | `E>结果]` | #### 3. 连接线语法 ```mermaid graph LR A --> B // 实线箭头 A -.-> C // 虚线箭头 A -- 文本 --> D // 带文字连接 A -->|文本| E // 带文字连接（简写） A --o F // 空心圆箭头 A --x G // X形箭头 ``` #### 4. 子图定义 ```mermaid graph TB subgraph 子流程 A[输入] --> B[处理] end B --> C[输出] ``` #### 5. 完整示例 ```mermaid graph LR S(开始) --> A[登录系统] A --> B{验证身份} B -->|成功| C>进入主页] B -->|失败| D[提示错误] D --> A C --> E((结束)) ``` ### 使用步骤 1. 在 Markdown 文件中创建代码块： ````markdown ```mermaid graph TD A[开始] --> B[处理] ``` ```` 2. 支持 Mermaid 的平台（如 GitHub/GitLab）会自动渲染 3. 本地可使用 [Mermaid Live Editor](https://mermaid.live/) 预览 > 提示：节点 ID 可省略，如 `[开始] --> [处理]`，但显式 ID 更易维护[^3]。