Markdown 流程图制作指南

Markdown 本身并不原生支持流程图，但通过集成如 Mermaid 等工具，你可以在 Markdown 文档中轻松嵌入流程图、序列图、甘特图等。

什么是 Mermaid？

Mermaid 是一个基于 JavaScript 的图表生成库，支持用简洁的文本语法描述图表，并实时渲染为 SVG 图形。它被广泛用于 GitHub、GitLab、Typora、Obsidian 等平台（部分需开启支持）。

基本流程图语法示例

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

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

如何在网页中使用 Mermaid？

只需引入 Mermaid 的 CDN 脚本，并初始化即可：

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

<div class="mermaid">
graph LR
  A --> B
  B --> C
</div>

注意事项

• GitHub 原生不支持 Mermaid 渲染（截至 2025 年），但可通过第三方插件或预渲染图片实现。
• 本地 Markdown 编辑器如 Typora、Obsidian 需在设置中启用 Mermaid 支持。
• 确保 HTML 页面正确加载 Mermaid 库，否则流程图将无法显示。

更多资源

想在线编辑 Word 文档或转换格式？试试以下工具：