Jay's Blog

Appearance

在VitePress中使用Mermaid图表 ​

Mermaid是一个基于JavaScript的图表和图形工具，它允许你使用类似Markdown的文本语法来创建和修改图表。本指南将介绍如何在VitePress网站中使用Mermaid创建各种图表。

基本用法 ​

在Markdown文件中，你可以使用以下语法创建Mermaid图表：

markdown
```mermaid
图表代码放在这里
```

图表类型 ​

流程图 (Flowchart) ​

流程图是最常用的图表类型之一，用于表示流程或算法。

示例：

代码：

markdown
```mermaid
flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[处理1]
    B -->|否| D[处理2]
    C --> E[结束]
    D --> E
```

时序图 (Sequence Diagram) ​

时序图用于显示对象之间的交互，按时间顺序排列。

示例：

代码：

markdown
```mermaid
sequenceDiagram
    participant 客户端
    participant 服务器
    客户端->>服务器: 请求数据
    服务器-->>客户端: 响应数据
    客户端->>服务器: 提交表单
    服务器-->>客户端: 确认提交
```

类图 (Class Diagram) ​

类图用于显示系统中的类、属性、方法以及它们之间的关系。

示例：

代码：

markdown
```mermaid
classDiagram
    class Animal {
        +name: string
        +age: int
        +makeSound(): void
    }
    class Dog {
        +breed: string
        +bark(): void
    }
    class Cat {
        +color: string
        +meow(): void
    }
    Animal <|-- Dog
    Animal <|-- Cat
```

甘特图 (Gantt Chart) ​

甘特图用于项目管理，显示项目、任务和里程碑的时间线。

示例：

代码：

markdown
```mermaid
gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 阶段1
    需求分析    :a1, 2023-01-01, 7d
    设计        :a2, after a1, 10d
    section 阶段2
    开发        :a3, after a2, 15d
    测试        :a4, after a3, 5d
    部署        :a5, after a4, 2d
```

饼图 (Pie Chart) ​

饼图用于显示数据的比例关系。

示例：

代码：

markdown
```mermaid
pie title 网站访问来源
    "搜索引擎" : 45.2
    "直接访问" : 30.3
    "社交媒体" : 24.5
```

状态图 (State Diagram) ​

状态图用于描述系统或对象的不同状态及其转换。

示例：

代码：

markdown
```mermaid
stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中: 开始处理
    处理中 --> 已完成: 完成处理
    处理中 --> 已取消: 取消
    已完成 --> [*]
    已取消 --> [*]
```

实体关系图 (Entity Relationship Diagram) ​

ER图用于数据库设计，显示实体及其关系。

示例：

代码：

markdown
```mermaid
erDiagram
    用户 ||--o{ 订单 : 下单
    订单 ||--|{ 商品 : 包含
    用户 {
        int id
        string 姓名
        string 邮箱
    }
    订单 {
        int id
        date 创建时间
        float 总价
    }
    商品 {
        int id
        string 名称
        float 价格
    }
```

旅程图 (Journey Diagram) ​

旅程图用于显示用户体验或流程中的不同阶段和满意度。

示例：

代码：

markdown
```mermaid
journey
    title 用户购物体验
    section 浏览
      找到产品: 5: 用户
      查看详情: 4: 用户
    section 购买
      添加到购物车: 5: 用户
      结账: 3: 用户
      支付: 4: 用户
    section 售后
      收到产品: 5: 用户
      评价: 4: 用户
```

自定义样式 ​

你可以通过在图表代码中添加样式定义来自定义Mermaid图表的外观。

示例：

代码：

markdown
```mermaid
flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[处理1]
    B -->|否| D[处理2]
    C --> E[结束]
    D --> E
    
    classDef green fill:#9f6,stroke:#333,stroke-width:2px;
    classDef orange fill:#f96,stroke:#333,stroke-width:2px;
    class A,E green
    class B,C,D orange
```

主题配置 ​

VitePress中的Mermaid插件支持亮色和暗色主题，会根据网站的主题自动切换。你可以在VitePress配置文件中自定义Mermaid的主题设置。

更多资源 ​

常见问题 ​

图表不显示或显示错误 ​

如果你的图表不显示或显示错误，请检查以下几点：

  1. 确保Mermaid语法正确
  2. 确保代码块使用了mermaid标记
  3. 尝试在Mermaid在线编辑器中验证你的图表代码

如何在图表中使用中文 ​

Mermaid完全支持中文字符，你可以直接在图表代码中使用中文，如上面的示例所示。

如何调整图表大小 ​

Mermaid图表的大小会自动适应内容。如果你需要调整图表大小，可以通过CSS来实现：

css
.mermaid-diagram {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

结语 ​

Mermaid是一个强大的图表工具，可以帮助你在VitePress网站中创建各种类型的图表和图形。通过本指南，你应该能够开始在你的网站中使用Mermaid创建专业的图表了。