博客优化网站seo怎么写网络科技公司起名大全免费

Mermaid 中的 graph TD 用于绘制从上到下（Top-Down）的流程图。以下是核心语法规则和示例：

---

​1. 基础结构

​

graph TDStart --> Stop

• graph TD 声明流程图方向为 ​从上到下​（LR 表示从左到右）。
• 每行定义一个节点或节点间的关系。

---

​2. 节点定义​

• ​默认矩形节点​：标识[文本]

• 

  graph TDA[Start] --> B[End]

• ​圆角矩形​：标识(文本)

• 

  graph TDA(Start) --> B(End)

• ​菱形（决策）​​：标识{文本}

• 

  graph TDA{Decision} -->|Yes| B[Action]

• ​圆形​：标识((文本))

• 

  graph TDA((Start)) --> B((End))

---

​3. 连接线样式​

• ​实线箭头​：-->

• 

  graph TDA --> B

• ​无箭头实线​：---

• 

  graph TDA --- B

• ​虚线箭头​：-.->

• 

  graph TDA -.-> B

• ​粗实线​：===

• 

  graph TDA ==> B

• ​添加文字​：

• 

  graph TDA -->|Label| B   // 或 A -- Label --> B

---

​4. 特殊语法​

• ​多节点连接​：

• 

  graph TDA --> B & C --> D  // A 同时指向 B 和 C，C 指向 D

• ​双向箭头​：

• 

  graph TDA <--> B

• ​子图（Subgraph）​​：

• 

  graph TDsubgraph "Group"A --> BendC --> A

---

​5. 转义特殊字符

• 文本中含 []、() 等时用英文引号包裹：
• 

• graph TDA["[重要]步骤"] --> B["(下一步)"]

---

​6. 注释​

• 单行注释：%% 这是注释
• 

• graph TD%% 这是一个节点A --> B

---

完整示例

graph TDA[开始] --> B{条件判断}B -->|是| C[操作1]B -->|否| D[操作2]C --> E((结束))D --> Esubgraph "分组"C --> F[子步骤]end

​注意​：在支持 Mermaid 的环境（如 GitHub、Obsidian）直接渲染。语法错误会导致渲染失败，需检查括号/箭头是否闭合。