LOADING
1007 字
5 分钟
Mermaid 图表示例
2011-11-02
统计加载中...

Mermaid 图表 Markdown 完全指南#

本文演示如何在 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 数据库 用户->>网页应用: 提交登录请求 网页应用->>服务器: 发送认证请求 服务器->>数据库: 查询用户凭证 数据库-->>服务器: 返回用户数据 Server-->>WebApp: 返回认证结果 alt 认证成功 网页应用->>用户: 显示欢迎页面 网页应用->>服务器: 请求用户数据 服务器->>数据库: 获取用户偏好 数据库-->>服务器: 返回偏好设置 服务器-->>网页应用: 返回用户数据 网页应用->>用户: 加载个性化界面 else 认证失败 网页应用->>用户: 显示错误信息 网页应用->>用户: 提示重新输入 end

甘特图示例#

甘特图非常适合显示项目进度和时间安排。

gantt title 网站开发项目时间线 dateFormat YYYY-MM-DD axisFormat %m/%d section 设计阶段 需求分析 :a1, 2023-10-01, 7d 界面设计 :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 图表——它们将使您的内容更加专业且易于理解!

Mermaid 图表示例
/posts/mermaids/
作者
观颐
发布于
2011-11-02
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

Profile Image of the Author
观颐
观以明理,颐以养正。

统计加载中...
公告
欢迎来我的博客!这里是分享知识和经验的地方。希望你能找到有用的信息,享受阅读的乐趣!