Mobile wallpaper 1Mobile wallpaper 2Mobile wallpaper 3Mobile wallpaper 4
1013 字
5 分钟
Markdown Mermaid 图表完全指南

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 界面设计 :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 图表——它们将使您的内容更加专业且易于理解!

Markdown Mermaid 图表完全指南
https://qiandaos.top/posts/markdown-mermaid/
作者
千岛寒流
发布于
2024-12-01
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

封面
Sample Song
Sample Artist
封面
Sample Song
Sample Artist
0:00 / 0:00