学习使用Markdown Mermaid 图表#

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

1.流程图示例#

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

1.1代码：#

第一行```mermaid

后面代码：

1
graph 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

1.2图#

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

2.时序图示例#

2.1代码#

第一行```mermaid

后面代码：

1
sequenceDiagram
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

2.2图#

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

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

3.甘特图示例#

3.1代码#

第一行```mermaid

后面代码：

1
gantt
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

3.2图#

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

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

4.类图示例#

4.1代码#

第一行```mermaid

后面代码：

1
classDiagram
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 : 属于

4.2图#

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

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 : 属于

5.状态图示例#

5.1代码#

第一行```mermaid

后面代码：

1
stateDiagram-v2
2
    [*] --> 草稿
3

4
    草稿 --> 审核中 : 提交
5
    审核中 --> 草稿 : 拒绝
6
    审核中 --> 已批准 : 批准
7
    已批准 --> 已发布 : 发布
8
    已发布 --> 已归档 : 归档
9
    已发布 --> 草稿 : 撤回
10

11
    state 已发布 {
12
        [*] --> 活跃
13
        活跃 --> 隐藏 : 临时隐藏
14
        隐藏 --> 活跃 : 恢复
15
        活跃 --> [*]
16
        隐藏 --> [*]
17
    }
18

19
    已归档 --> [*]

5.2图#

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

stateDiagram-v2 [*] --> 草稿草稿 --> 审核中 : 提交审核中 --> 草稿 : 拒绝审核中 --> 已批准 : 批准已批准 --> 已发布 : 发布已发布 --> 已归档 : 归档已发布 --> 草稿 : 撤回 state 已发布 { [*] --> 活跃活跃 --> 隐藏 : 临时隐藏隐藏 --> 活跃 : 恢复活跃 --> [*] 隐藏 --> [*] } 已归档 --> [*]

6.饼图示例#

6.1代码#

第一行```mermaid

后面代码：

1
pie title 网站流量来源分析
2
    "搜索引擎" : 45.6
3
    "直接访问" : 30.1
4
    "社交媒体" : 15.3
5
    "推荐链接" : 6.4
6
    "其他来源" : 2.6

6.2图#

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

pie title 网站流量来源分析 "搜索引擎" : 45.6 "直接访问" : 30.1 "社交媒体" : 15.3 "推荐链接" : 6.4 "其他来源" : 2.6

总结#

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

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

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

学习使用Markdown Mermaid 图表

学习使用Markdown Mermaid 图表#

1.流程图示例#

1.1代码：#

1.2图#

2.时序图示例#

2.1代码#

2.2图#

3.甘特图示例#

3.1代码#

3.2图#

4.类图示例#

4.1代码#

4.2图#

5.状态图示例#

5.1代码#

5.2图#

6.饼图示例#

6.1代码#

6.2图#

总结#

文章分享

目录