Markdown Mermaid 图表

908 字
5 分钟
Markdown Mermaid 图表

Markdown 中 Mermaid 图表完整指南#

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

流程图示例#

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

选项 1

选项 2

选项 3

子过程详情

子步骤 1

子步骤 2

子步骤 3

开始

条件检查

处理步骤 1

处理步骤 2

另一个决策

结果 1

结果 2

结果 3

结束

选项 1

选项 2

选项 3

子过程详情

子步骤 1

子步骤 2

子步骤 3

开始

条件检查

处理步骤 1

处理步骤 2

另一个决策

结果 1

结果 2

结果 3

结束

时序图示例#

时序图显示对象之间随时间的交互。

数据库服务器网页应用用户数据库服务器网页应用用户alt[认证成功][认证失败]提交登录请求发送认证请求查询用户凭据返回用户数据返回认证结果显示欢迎页面请求用户数据获取用户偏好返回偏好设置返回用户数据加载个性化界面显示错误消息提示重新输入
数据库服务器网页应用用户数据库服务器网页应用用户alt[认证成功][认证失败]提交登录请求发送认证请求查询用户凭据返回用户数据返回认证结果显示欢迎页面请求用户数据获取用户偏好返回偏好设置返回用户数据加载个性化界面显示错误消息提示重新输入

甘特图示例#

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

10/01 10/08 10/15 10/22 10/29 11/05 11/12 11/19需求分析 UI设计 数据库设计 原型创建 后端开发 前端开发 单元测试 集成测试 用户验收测试 生产环境部署 发布 设计阶段开发阶段测试阶段部署网站开发项目时间线
10/01 10/08 10/15 10/22 10/29 11/05 11/12 11/19需求分析 UI设计 数据库设计 原型创建 后端开发 前端开发 单元测试 集成测试 用户验收测试 生产环境部署 发布 设计阶段开发阶段测试阶段部署网站开发项目时间线

类图示例#

类图显示系统的静态结构,包括类、属性、方法及其关系。

写作

发表

拥有

属于

1

1

1

1

*

*

*

*

User

+String username

+String password

+String email

+Boolean active

+login()

+logout()

+updateProfile()

Article

+String title

+String content

+Date publishDate

+Boolean published

+publish()

+edit()

+delete()

Comment

+String content

+Date commentDate

+addComment()

+deleteComment()

Category

+String name

+String description

+addArticle()

+removeArticle()

写作

发表

拥有

属于

1

1

1

1

*

*

*

*

User

+String username

+String password

+String email

+Boolean active

+login()

+logout()

+updateProfile()

Article

+String title

+String content

+Date publishDate

+Boolean published

+publish()

+edit()

+delete()

Comment

+String content

+Date commentDate

+addComment()

+deleteComment()

Category

+String name

+String description

+addArticle()

+removeArticle()

状态图示例#

状态图显示对象在其生命周期中经历的状态序列。

提交

拒绝

批准

发布

归档

撤回

草稿

审核中

已批准

已归档

已发布

临时隐藏

恢复

活跃

隐藏

提交

拒绝

批准

发布

归档

撤回

草稿

审核中

已批准

已归档

已发布

临时隐藏

恢复

活跃

隐藏

饼图示例#

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

46%30%15%6%3%网站流量来源分析搜索引擎直接访问社交媒体推荐链接其他来源
46%30%15%6%3%网站流量来源分析搜索引擎直接访问社交媒体推荐链接其他来源

总结#

Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。

要使用 Mermaid,只需在代码块中指定 mermaid 语言,并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。

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

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!

打赏
Markdown Mermaid 图表
https://blog.z2m.store/posts/markdown-mermaid/
作者
深漂小鱼
发布于
1970-01-01
许可协议
CC BY-NC-SA 4.0

评论区

Profile Image of the Author
深漂小鱼
扫码关注公众号
公告
欢迎来到我的博客!这是一则示例公告。
音乐
封面

音乐

暂未播放

0:000:00
暂无歌词
分类
标签
站点统计
文章
33
分类
3
标签
16
总字数
69,466
运行时长
0
最后活动
0 天前
站点信息
构建平台
Cloudflare Pages
博客版本
Firefly v6.13.10
文章许可
CC BY-NC-SA 4.0