MarkDown(mermaid)绘制流程图详细教程

以下是使用Mermaid绘制流程图的详细教程，涵盖基础语法、节点样式、连接线、子图、进阶技巧及常见问题解决：

一、基础语法

1. 声明图表类型与方向

   • graph TD：从上到下（Top-Down）的流程图（默认方向）。
   • graph LR：从左到右（Left-Right）的流程图。
   • graph BT：从下到上（Bottom-Top）。
   • graph RL：从右到左（Right-Left）。

2. 定义节点

   • 矩形节点（默认）：A[节点文本]
   • 圆角矩形：B(节点文本)
   • 菱形（判断）：C{节点文本}
   • 圆形：D((节点文本))
   • 圆柱形（数据库）：E[(节点文本)]
   • 旗帜形：F>节点文本]
   • 六边形：G{{节点文本}}
   • 平行四边形：H[/节点文本/]
   • 反平行四边形：I[\节点文本\]
   • 梯形：J[/节点文本\]
   • 倒梯形：K[\节点文本/]
   • 双圈：L(((节点文本)))

3. 连接节点

   • 实线箭头：A --> B
   • 无箭头实线：A --- B
   • 虚线箭头：A -.-> B
   • 粗线箭头：A ==> B
   • 带文本的连接线：
     • A -- 文本 --> B
     • A ---|文本| B
   • 特殊箭头：
     • 末端圆形：A --o B
     • 末端星形：A --x B
     • 双箭头：A <--> B
     • 双圈箭头：A o--o B
     • 双叉箭头：A x--x B

二、子图（Subgraph）

用于分组节点，例如模块或阶段：

• 子图方向：在子图内通过 direction 指定方向，如 subgraph 阶段一 [direction LR]。

三、进阶技巧

1. 节点样式自定义
   通过 classDef 定义样式，再应用到节点：

   graph LR
       classDef start fill:#f9f,stroke:#333;
       classDef end fill:#bbf,stroke:#333;
       classDef process fill:#9f9,stroke:#333;
   
       A([开始]):::start --> B[处理]:::process
       B --> C((结束)):::end
   

2. 长文本换行
   使用 <br> 标签强制换行：

3. 隐藏节点
   创建空节点调整布局：

4. 动态交互（HTML环境）
   添加点击事件（需配合JavaScript）：

   <script>
     mermaid.initialize({ securityLevel: 'loose' });
   </script>
   

四、完整案例：用户登录流程

graph LR
    classDef start fill:#f9f,stroke:#333;
    classDef end fill:#bbf,stroke:#333;
    classDef process fill:#9f9,stroke:#333;
    classDef decision fill:#ff9,stroke:#333;

    A([开始]):::start --> B[输入用户名密码]:::process
    B --> C{验证成功?}:::decision
    C -->|是| D[生成Token]:::process
    C -->|否| E[提示错误]:::process
    D --> F((结束)):::end
    E --> B

五、常见问题解决

1. 渲染失败

   • 检查语法是否正确（如括号匹配、关键字拼写）。
   • 确保平台支持Mermaid（如GitHub需更新版本）。
   • 本地预览可安装VS Code插件 Markdown Preview Mermaid Support。

2. 节点重叠

   • 调整方向（如改用 TB 纵向布局）。
   • 拆分复杂流程为子图。

3. 样式不生效

   • 确认 classDef 定义在节点引用之前。
   • 检查CSS类名是否拼写正确。

4. 特殊字符处理

   • 节点文本包含 [] 等符号时，用双引号包裹：

六、工具推荐

1. 在线编辑器

   • Mermaid Live Editor：实时预览与调试。
   • Draw.io：导出Mermaid代码。

2. 本地工具

   • VS Code插件：Markdown Preview Enhanced（支持Mermaid渲染）。
   • 智能生成工具：通过自然语言生成Mermaid代码（如DeepSeek、Kimi）。

3. 官方资源

   • Mermaid官方文档：语法参考与配置指南。
   • GitHub集成教程：在Markdown中使用Mermaid。

通过以上教程，你可以快速掌握Mermaid流程图的绘制技巧，适用于技术文档、项目管理、学习笔记等场景。