Markdown Mermaid 图表

868 字
4 分钟
Markdown Mermaid 图表

Markdown 中 Mermaid 图表完整指南#

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

流程图示例#

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

子过程详情 选项 1 选项 2 选项 3 开始 条件检查 处理步骤 1 处理步骤 2 另一个决策 结果 1 结果 2 结果 3 结束 子步骤 1 子步骤 2 子步骤 3
子过程详情 选项 1 选项 2 选项 3 开始 条件检查 处理步骤 1 处理步骤 2 另一个决策 结果 1 结果 2 结果 3 结束 子步骤 1 子步骤 2 子步骤 3

时序图示例#

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

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

ER 图示例#

ER 图(实体关系图)非常适合表示数据库结构。

USER PK int id string username string email datetime created_at ARTICLE PK int id string title text content datetime published FK int author_id COMMENT PK int id text content datetime created_at FK int user_id FK int article_id CATEGORY PK int id string name string description writes posts has
USER PK int id string username string email datetime created_at ARTICLE PK int id string title text content datetime published FK int author_id COMMENT PK int id text content datetime created_at FK int user_id FK int article_id CATEGORY PK int id string name string description writes posts has

类图示例#

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

User + username: String + password: String + email: String + active: Boolean + login() + logout() + updateProfile() Article + title: String + content: String + publishDate: Date + published: Boolean + publish() + edit() + delete() Comment + content: String + commentDate: Date + addComment() + deleteComment() Category + name: String + description: String + addArticle() + removeArticle() 写作 1 * 发表 1 * 拥有 1 * 属于 1 *
User + username: String + password: String + email: String + active: Boolean + login() + logout() + updateProfile() Article + title: String + content: String + publishDate: Date + published: Boolean + publish() + edit() + delete() Comment + content: String + commentDate: Date + addComment() + deleteComment() Category + name: String + description: String + addArticle() + removeArticle() 写作 1 * 发表 1 * 拥有 1 * 属于 1 *

状态图示例#

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

已发布 提交 拒绝 批准 发布 归档 撤回 临时隐藏 恢复 草稿 审核中 已批准 已归档 活跃 隐藏
已发布 提交 拒绝 批准 发布 归档 撤回 临时隐藏 恢复 草稿 审核中 已批准 已归档 活跃 隐藏

XY 图示例#

XY 图表非常适合展示趋势和对比数据。

1月 2月 3月 4月 5月 6月 0 1000 2000 3000 4000 5000 访问量 月度访问量趋势 Bar 1 Line 1
1月 2月 3月 4月 5月 6月 0 1000 2000 3000 4000 5000 访问量 月度访问量趋势 Bar 1 Line 1

总结#

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

要使用 Mermaid,只需在代码块中指定 mermaid 语言,并使用简洁的文本语法描述图表。图表会在构建时自动渲染为 SVG,无需客户端 JavaScript 加载。

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

支持与分享

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

打赏
Markdown Mermaid 图表
https://blog.jerry-nis.top/posts/markdown-mermaid/
作者
Firefly
发布于
1970-01-01
许可协议
CC BY-NC-SA 4.0
Profile Image of the Author
Firefly
Hello, I'm Firefly.
公告
欢迎来到我的博客!这是一则示例公告。
音乐
封面

音乐

暂未播放

0:000:00
暂无歌词
分类
标签
站点统计
文章
12
分类
2
标签
17
总字数
13,358
运行时长
0
最后活动
0 天前
站点信息
构建平台
GitHub Actions
博客版本
Firefly v6.13.7
文章许可
CC BY-NC-SA 4.0