Markdown本身并不直接支持绘制流程图,但通过集成 Mermaid 等图表库,可以在支持该语法的编辑器或平台中轻松绘制流程图。
1. 使用 Mermaid 语法
Mermaid 是一种流行的 Markdown 扩展语法,用于生成流程图、序列图、甘特图等。以下是一个简单的流程图示例:
```mermaid
graph TD
A[开始] --> B{条件判断}
B -->|是| C[执行操作1]
B -->|否| D[执行操作2]
C --> E[结束]
D --> E
```
2. 支持 Mermaid 的编辑器/平台
- Typora(需开启 Mermaid 支持)
- Obsidian
- VS Code(配合插件如 Markdown Preview Mermaid Support)
- GitLab / GitHub(部分支持)
- Notion(需使用第三方嵌入方式)
3. 在线工具推荐
如果你不想安装软件,也可以使用在线工具直接编写和预览 Mermaid 流程图:
4. 注意事项
- 标准 Markdown 解析器(如 GitHub README)通常不渲染 Mermaid,需确认平台是否支持。
- 导出为 PDF 或 HTML 时,确保目标环境包含 Mermaid 渲染脚本。
5. 示例:完整 HTML 页面嵌入 Mermaid
你也可以在自己的网页中引入 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>
<div class="mermaid">
graph LR
A --> B
B --> C
</div>