Markdown流程图完全指南

Markdown 本身不支持绘制流程图，但借助 Mermaid 等扩展语法，你可以在支持的编辑器或平台上轻松创建专业流程图。

什么是 Mermaid？

Mermaid 是一个基于 JavaScript 的图表生成工具，支持流程图（Flowchart）、序列图、甘特图等。它使用简洁的文本语法定义图形结构，非常适合集成到 Markdown 文档中。

基础流程图语法示例

以下是一个简单的 Mermaid 流程图代码：

```mermaid
graph TD
    A[开始] --> B{是否登录?}
    B -- 是 --> C[进入主页]
    B -- 否 --> D[跳转到登录页]
    C --> E[结束]
    D --> E
```

如何在 Markdown 中使用流程图？

你需要在支持 Mermaid 的环境中使用上述语法，例如：

• Typora（需开启 Mermaid 支持）
• Obsidian
• GitLab / GitHub（部分支持）
• VS Code + 插件（如 Markdown Preview Mermaid Support）
• 在线编辑器：Mermaid Live Editor

常用流程图节点类型

• [文本]：矩形节点（默认）
• {文本}：菱形（判断/分支）
• ((文本))：圆形
• [/文本\]：平行四边形
• ["文本"]：圆角矩形

小贴士

• 使用 graph TD 表示从上到下布局，graph LR 表示从左到右。
• 节点 ID 可自定义，如 A1[第一步]，便于连接复杂逻辑。
• 注释用 %% 这是注释。