Markdown 中 Mermaid 图表完整指南
本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、甘特图、类图和状态图。
流程图示例
流程图非常适合表示流程或算法步骤。
1graph TD
2 A[开始] --> B{条件检查}
3 B -->|是| C[处理步骤 1]
4 B -->|否| D[处理步骤 2]
5 C --> E[子过程]
6 D --> E
7 subgraph E [子过程详情]
8 E1[子步骤 1] --> E2[子步骤 2]
9 E2 --> E3[子步骤 3]
10 end
11 E --> F{另一个决策}
12 F -->|选项 1| G[结果 1]
13 F -->|选项 2| H[结果 2]
14 F -->|选项 3| I[结果 3]
15 G --> J[结束]
16 H --> J
17 I --> J
时序图示例
时序图显示对象之间随时间的交互。
1sequenceDiagram
2 participant User as 用户
3 participant WebApp as 网页应用
4 participant Server as 服务器
5 participant Database as 数据库
6
7 User->>WebApp: 提交登录请求
8 WebApp->>Server: 发送认证请求
9 Server->>Database: 查询用户凭据
10 Database-->>Server: 返回用户数据
11 Server-->>WebApp: 返回认证结果
12
13 alt 认证成功
14 WebApp->>User: 显示欢迎页面
15 WebApp->>Server: 请求用户数据
16 Server->>Database: 获取用户偏好
17 Database-->>Server: 返回偏好设置
18 Server-->>WebApp: 返回用户数据
19 WebApp->>User: 加载个性化界面
20 else 认证失败
21 WebApp->>User: 显示错误消息
22 WebApp->>User: 提示重新输入
23 end
甘特图示例
甘特图非常适合显示项目进度和时间线。
1gantt
2 title 网站开发项目时间线
3 dateFormat YYYY-MM-DD
4 axisFormat %m/%d
5
6 section 设计阶段
7 需求分析 :a1, 2023-10-01, 7d
8 UI设计 :a2, after a1, 10d
9 原型创建 :a3, after a2, 5d
10
11 section 开发阶段
12 前端开发 :b1, 2023-10-20, 15d
13 后端开发 :b2, after a2, 18d
14 数据库设计 :b3, after a1, 12d
15
16 section 测试阶段
17 单元测试 :c1, after b1, 8d
18 集成测试 :c2, after b2, 10d
19 用户验收测试 :c3, after c2, 7d
20
21 section 部署
22 生产环境部署 :d1, after c3, 3d
23 发布 :milestone, after d1, 0d
类图示例
类图显示系统的静态结构，包括类、属性、方法及其关系。
1classDiagram
2 class User {
3 +String username
4 +String password
5 +String email
6 +Boolean active
7 +login()
8 +logout()
9 +updateProfile()
10 }
11
12 class Article {
13 +String title
14 +String content
15 +Date publishDate
16 +Boolean published
17 +publish()
18 +edit()
19 +delete()
20 }
21
22 class Comment {
23 +String content
24 +Date commentDate
25 +addComment()
26 +deleteComment()
27 }
28
29 class Category {
30 +String name
31 +String description
32 +addArticle()
33 +removeArticle()
34 }
35
36 User "1" -- "*" Article : 写作
37 User "1" -- "*" Comment : 发表
38 Article "1" -- "*" Comment : 拥有
39 Article "1" -- "*" Category : 属于
状态图示例
状态图显示对象在其生命周期中经历的状态序列。
1stateDiagram-v2
2 [*] --> 草稿
3
4 草稿 --> 审核中 : 提交
5 审核中 --> 草稿 : 拒绝
6 审核中 --> 已批准 : 批准
7 已批准 --> 已发布 : 发布
8 已发布 --> 已归档 : 归档
9 已发布 --> 草稿 : 撤回
10
11 state 已发布 {
12 [*] --> 活跃
13 活跃 --> 隐藏 : 临时隐藏
14 隐藏 --> 活跃 : 恢复
15 活跃 --> [*]
16 隐藏 --> [*]
17 }
18
19 已归档 --> [*]
饼图示例
饼图非常适合显示比例和百分比数据。
1pie title 网站流量来源分析
2 "搜索引擎" : 45.6
3 "直接访问" : 30.1
4 "社交媒体" : 15.3
5 "推荐链接" : 6.4
6 "其他来源" : 2.6
总结
Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。
要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。
尝试在您的下一篇技术博客文章或项目文档中使用 Mermaid 图表 - 它们将使您的内容更加专业且更易理解！
留言评论
期待你的想法评论加载中