在 Markdown 中使用 Mermaid 绘制图表指南#

本文展示了如何在 Markdown 文档中使用 Mermaid 绘制各类复杂图表，包括流程图、时序图、甘特图、类图、状态图及饼图等。

流程图示例 (Flowchart)#

流程图非常适合用于展示业务逻辑流程或算法执行步骤。

graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[处理步骤 1]
    B -->|否| D[处理步骤 2]
    C --> E[子流程处理]
    D --> E
    subgraph E [子流程详细步骤]
        E1[子步骤 1] --> E2[子步骤 2]
        E2 --> E3[子步骤 3]
    end
    E --> F{二次决策}
    F -->|选项 1| G[结果 1]
    F -->|选项 2| H[结果 2]
    F -->|选项 3| I[结果 3]
    G --> J[结束]
    H --> J
    I --> J

时序图示例 (Sequence Diagram)#

时序图用于清晰地表示对象之间随着时间推移的交互顺序。

sequenceDiagram
    participant 用户
    participant 前端应用
    participant 后端服务
    participant 数据库

    用户->>前端应用: 提交登录请求
    前端应用->>后端服务: 发送身份验证 API
    后端服务->>数据库: 查询用户凭证
    Database-->>后端服务: 返回用户数据
    后端服务-->>前端应用: 返回验证结果

    alt 验证成功
        前端应用->>用户: 展示欢迎主页
        前端应用->>后端服务: 请求个性化数据
        后端服务->>数据库: 查询用户偏好设置
        Database-->>后端服务: 返回偏好数据
        后端服务-->>前端应用: 返回定制数据
        前端应用->>用户: 渲染个性化界面
    else 验证失败
        前端应用->>用户: 显示错误提示框
        前端应用->>用户: 提示重新输入
    end

甘特图示例 (Gantt Chart)#

甘特图是展示项目进度规划与时间线排期的最佳工具。

gantt
    title 网站开发项目进度规划甘特图
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d

    section 设计阶段
    需求分析与梳理       :a1, 2023-10-01, 7d
    UI 原型设计                 :a2, after a1, 10d
    交互设计确认        :a3, after a2, 5d

    section 开发阶段
    前端架构与页面开发      :b1, 2023-10-20, 15d
    后端 API 接口开发       :b2, after a2, 18d
    数据库建模与搭建           :b3, after a1, 12d

    section 测试阶段
    单元测试              :c1, after b1, 8d
    联调集成测试       :c2, after b2, 10d
    用户验收测试 (UAT)   :c3, after c2, 7d

    section 上线部署
    生产环境部署     :d1, after c3, 3d
    正式上线                :milestone, after d1, 0d

类图示例 (Class Diagram)#

类图展示了系统的静态类结构、属性、方法及其继承与关联关系。

classDiagram
    class User {
        +String username
        +String password
        +String email
        +Boolean active
        +login()
        +logout()
        +updateProfile()
    }

    class Article {
        +String title
        +String content
        +Date publishDate
        +Boolean published
        +publish()
        +edit()
        +delete()
    }

    class Comment {
        +String content
        +Date commentDate
        +addComment()
        +deleteComment()
    }

    class Category {
        +String name
        +String description
        +addArticle()
        +removeArticle()
    }

    User "1" -- "*" Article : 撰写
    User "1" -- "*" Comment : 发表
    Article "1" -- "*" Comment : 包含
    Article "1" -- "*" Category : 属于

状态图示例 (State Diagram)#

状态图用于展示一个对象在其生命周期内经历的状态变化流转。

stateDiagram-v2
    [*] --> 草稿状态

    草稿状态 --> 审核中 : 提交审核
    审核中 --> 草稿状态 : 驳回修改
    审核中 --> 已批准 : 审核通过
    已批准 --> 已发布 : 上线发布
    已发布 --> 已归档 : 归档处理
    已发布 --> 草稿状态 : 下架撤回

    state 已发布 {
        [*] --> 正常展示
        正常展示 --> 暂时隐藏 : 临时隐藏
        暂时隐藏 --> 正常展示 : 恢复展示
        正常展示 --> [*]
        暂时隐藏 --> [*]
    }

    已归档 --> [*]

饼图示例 (Pie Chart)#

饼图非常适合展示占比构成与百分比数据。

pie title 网站流量来源渠道分析
    "搜索引擎" : 45.6
    "直接访问" : 30.1
    "社交媒体" : 15.3
    "外部推荐链接" : 6.4
    "其他渠道" : 2.6

结语#

Mermaid 是在 Markdown 文档中绘制各类结构化图表的强大神器。无需借助外部绘图工具导出图片，直接编写纯文本代码即可自动渲染为矢量图表。快在您的技术文章或文档中尝试使用吧！