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 Web应用 participant 服务器 participant 数据库 用户->>Web应用: 提交登录请求 Web应用->>服务器: 发送认证请求 服务器->>数据库: 查询用户凭证 数据库-->>服务器: 返回用户数据 服务器-->>Web应用: 返回认证结果 alt 认证成功 Web应用->>用户: 显示欢迎页面 Web应用->>服务器: 请求用户数据 服务器->>数据库: 获取用户偏好 数据库-->>服务器: 返回偏好设置 服务器-->>Web应用: 返回用户数据 Web应用->>用户: 加载个性化界面 else 认证失败 Web应用->>用户: 显示错误信息 Web应用->>用户: 提示重新输入 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 会自动将这些描述转换为美观的可视化图表。

尝试在你的下一篇技术博客或项目文档中使用 Mermaid 图表 - 它们会让你的内容更加专业且易于理解!

Profile Image of the Author
测试管理员

评论