首页markdown使用mermaid绘制流程图

markdown使用mermaid绘制流程图

时间: 2025-06-20 09:42:56 浏览: 13

### 如何在 Markdown 中使用 Mermaid 绘制流程图要在 Markdown 文件中嵌入 Mermaid 流程图，需遵循特定的语法结构。以下是详细的说明以及示例。 #### 基本语法 Mermaid 的流程图通过 `sequenceDiagram` 或 `flowchart` 关键字定义图表类型。对于流程图，通常使用 `flowchart` 定义节点和边的关系[^2]。 ```markdown ```mermaid flowchart TD A[开始] --> B{输入A,B,C} B -->|YES| C{A是否大于B} B -->|NO| F{A是否大于C} C -->|YES| D[输出A] C -->|NO| G{B是否大于C} F -->|YES| H[输出C] F -->|NO| I[输出B] G -->|YES| J[输出B] G -->|NO| K[输出C] D --> E[结束] H --> E I --> E J --> E K --> E ``` ``` 上述代码展示了一个完整的流程图逻辑，其中包含了条件判断（如 `A是否大于B`）、分支路径（如 `YES` 和 `NO`），并最终指向一个终点节点 `结束`。 #### 节点与连接符 - **节点**：可以表示为矩形 `[文本]`、菱形 `{文本}` 或椭圆 `(文本)`。 - **箭头**：用于描述两个节点之间的关系，默认方向是从左到右 (`-->`)；也可以指定上下方向 (`--v`) 或其他自定义样式[^3]。 #### 高级功能除了基本的流程控制外，还可以引入子图 (subgraph)，用来分组多个关联紧密的操作步骤： ```markdown ```mermaid graph TB subgraph 判断模块 A[A>B?] -- 是 --> B[B>C?] A -- 否 --> C[C>A?] end B -- 是 --> D[返回B] B -- 否 --> E[返回C] C -- 是 --> F[返回C] C -- 否 --> G[返回A] ``` ``` 此例子中的 `subgraph` 将几个相关的决策封装在一起，使整个图形更加清晰易读[^1]。 ---

阅读全文