tutorials/flowchart_tutorials/mermaid

Mermaid 流程图教程 📊

Mermaid 是一款基于 Markdown 的流程图绘制工具，支持多种图表类型如流程图、时序图、甘特图等。其语法简洁，适合开发者快速生成可视化图表。以下是 Mermaid 的基础用法：

1. 常见图表类型

• 流程图：graph TD 开始，用箭头连接节点
  示例：

  graph TD
    A[开始] --> B{判断}
    B -->|条件1| C[结果1]
    B -->|条件2| D[结果2]
  

• 时序图：sequenceDiagram 开始，展示对象间交互
  示例：

  sequenceDiagram
    participant User
    participant Server
    User->>Server: 发送请求
    Server-->>User: 返回响应
  

• 甘特图：gantt 开始，用于项目时间规划
  示例：

  gantt
    title 项目时间线
    dateFormat  YYYY-MM-DD
    section 开发阶段
    设计:            2023-10-01, 10d
    开发:           2023-10-11, 15d
    测试:           2023-10-26, 5d
  

2. 语法特点

• 节点用方括号 [] 包裹，箭头用 --> 或 -->> 表示
• 支持自定义样式和颜色，如 style A fill:#f9f
• 可嵌入 HTML 页面或 Markdown 文档中，无需额外依赖

3. 实用技巧

• 使用 %% 注释说明复杂逻辑
• 通过 classDef 定义节点样式
• 调用官方文档获取更多模板：https://mermaid.js.org

💡 小提示：Mermaid 图表会根据 Markdown 渲染引擎自动转换为 SVG，确保代码格式正确以获得最佳效果！