Markdown 中使用 Mermaid 图表完全指南#

本文演示如何在 Markdown 文档中使用 Mermaid 创建各类复杂图表，包括流程图、时序图、甘特图、类图和状态图。

流程图示例#

流程图非常适合表示流程或算法步骤。

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

时序图示例#

时序图展示对象之间随时间发生的交互过程。

sequenceDiagram participant 用户 participant 前端 participant 服务器 participant 数据库用户->>前端: 提交登录请求前端->>服务器: 发送认证请求服务器->>数据库: 查询用户凭证数据库-->>服务器: 返回用户数据服务器-->>前端: 返回认证结果 alt 认证成功前端->>用户: 显示欢迎页面前端->>服务器: 请求用户数据服务器->>数据库: 获取用户偏好数据库-->>服务器: 返回偏好数据服务器-->>前端: 返回用户数据前端->>用户: 加载个性化界面 else 认证失败前端->>用户: 显示错误提示前端->>用户: 提示重新输入 end

甘特图示例#

甘特图非常适合展示项目计划和时间线。

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 后端开发 :b2, after a2, 18d 数据库设计 :b3, after a1, 12d section 测试阶段单元测试 :c1, after b1, 8d 集成测试 :c2, after b2, 10d 用户验收测试 :c3, after c2, 7d section 上线生产部署 :d1, after c3, 3d 正式发布 :milestone, after d1, 0d

类图示例#

类图展示系统的静态结构，包括类、属性、方法及其相互关系。

classDiagram class 用户 { +String 用户名 +String 密码 +String 邮箱 +Boolean 状态 +登录() +退出() +更新资料() } class 文章 { +String 标题 +String 内容 +Date 发布日期 +Boolean 已发布 +发布() +编辑() +删除() } class 评论 { +String 内容 +Date 评论日期 +添加评论() +删除评论() } class 分类 { +String 名称 +String 描述 +添加文章() +移除文章() } 用户 "1" -- "*" 文章 : 撰写用户 "1" -- "*" 评论 : 发表文章 "1" -- "*" 评论 : 拥有文章 "1" -- "*" 分类 : 属于

状态图示例#

状态图展示一个对象在其生命周期中经历的状态变化序列。

stateDiagram-v2 [*] --> 草稿草稿 --> 审核中 : 提交审核中 --> 草稿 : 退回审核中 --> 已批准 : 批准已批准 --> 已发布 : 发布已发布 --> 已归档 : 归档已发布 --> 草稿 : 撤回 state 已发布 { [*] --> 显示中显示中 --> 已隐藏 : 临时隐藏已隐藏 --> 显示中 : 恢复显示显示中 --> [*] 已隐藏 --> [*] } 已归档 --> [*]

饼图示例#

饼图非常适合展示比例和百分比数据。

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

总结#

Mermaid 是在 Markdown 文档中绘制各类图表的强大工具。本文演示了流程图、时序图、甘特图、类图、状态图和饼图的用法。这些图表能帮助你更清晰地表达复杂的概念、流程和数据结构。

使用方法非常简单：在代码块中指定 mermaid 语言标识，然后用简洁的文本语法描述图表，Mermaid 会自动将其渲染为精美的可视化图表。

在你的下一篇技术博客或项目文档中试试 Mermaid 吧——它会让你的内容更专业、更易于理解！

Rain Log