图片来源:《星空列车与白的旅行》CG及二创
388 字
1 分钟
示例|MarkdownMermaid图表
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 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 User {
+String username
+String password
+String email
+Boolean active
+login()
+logout()
+updateProfile()
}
class Article {
+String title
+String content
+Date publishDate
+Boolean published
+publish()
+edit()
+delete()
}
class Comment {
+String content
+Date commentDate
+addComment()
+deleteComment()
}
class Category {
+String name
+String description
+addArticle()
+removeArticle()
}
User "1" -- "*" Article : 撰写
User "1" -- "*" Comment : 发表
Article "1" -- "*" Comment : 拥有
Article "1" -- "*" Category : 属于
状态图示例
状态图展示对象在其生命周期中经历的状态序列。
stateDiagram-v2
[*] --> 草稿
草稿 --> 审核中 : 提交
审核中 --> 草稿 : 驳回
审核中 --> 已批准 : 通过
已批准 --> 已发布 : 发布
已发布 --> 已归档 : 归档
已发布 --> 草稿 : 撤回
state 已发布 {
[*] --> 展示中
展示中 --> 已隐藏 : 临时隐藏
已隐藏 --> 展示中 : 恢复
展示中 --> [*]
已隐藏 --> [*]
}
已归档 --> [*]
饼图示例
饼图非常适合展示占比和百分比数据。
pie title 网站流量来源分析
"搜索引擎" : 45.6
"直接访问" : 30.1
"社交媒体" : 15.3
"引荐链接" : 6.4
"其他来源" : 2.6
总结
Mermaid 是一款可以在 Markdown 文档中创建各类图表的强大工具。本文演示了流程图、时序图、甘特图、类图、状态图和饼图的用法。这些图表可以帮助你更清晰地表达复杂的概念、流程和数据结构。
使用 Mermaid 非常简单,只需在代码块中指定 mermaid 语言,并用简洁的文本语法描述图表即可。Mermaid 会自动将这些描述转换为美观的可视化图表。
在你的下一篇技术博客或项目文档中试试 Mermaid 图表吧——它们会让你的内容更专业、更易于理解!
分享
如果这篇文章对你有帮助,欢迎分享给更多人!
示例|MarkdownMermaid图表
https://luq-blog.xyz/posts/markdown-mermaid/ 部分信息可能已经过时
相关文章 智能推荐
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)