Markdown画流程图完全指南

在技术文档、项目说明或笔记中，流程图是表达逻辑结构的重要工具。虽然原生 Markdown 不支持绘图，但通过集成 Mermaid 语法，你可以在 Markdown 中轻松绘制流程图、时序图、甘特图等。

什么是 Mermaid？

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

基础流程图语法

使用 graph 关键字定义流程图方向：

• graph TD：从上到下（Top Down）
• graph LR：从左到右（Left Right）

示例：简单流程图

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

节点类型

Mermaid 支持多种节点样式：

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

连接线样式

• -->：带箭头实线
• ---：无箭头实线
• -.->：带箭头虚线
• ==>：粗箭头（部分环境支持）

使用建议

1. 在支持 Mermaid 的编辑器（如 Typora、Obsidian）中直接预览。
2. 在网页中使用需引入 Mermaid.js 库：
<script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script>
3. GitHub 原生暂不渲染 Mermaid，但可通过插件或导出为图片嵌入。

总结

借助 Mermaid，你可以在 Markdown 中以代码方式高效绘制流程图，保持文档的纯文本特性，同时提升可读性与专业性。掌握基础语法后，即可应对大多数流程图需求。