---
title: "Mermaid 图表"
description: "在 Movk Nuxt Docs 中启用可选的 Mermaid 图表支持，渲染流程图、时序图、类图、状态图、饼图、甘特图和实体关系图。内置自动主题切换、懒加载、复制代码和全屏查看功能，安装 mermaid 与 dompurify 后一键开启。"
canonical_url: "https://docs.mhaibaraai.cn/docs/typography/mermaid"
---
# Mermaid 图表

> 在 Movk Nuxt Docs 中启用可选的 Mermaid 图表支持，渲染流程图、时序图、类图、状态图、饼图、甘特图和实体关系图。内置自动主题切换、懒加载、复制代码和全屏查看功能，安装 mermaid 与 dompurify 后一键开启。

## 启用 Mermaid 支持

Mermaid 是可选功能，默认不启用。启用前需先安装依赖包，再在配置中开启。

### 安装依赖

```bash [pnpm]
pnpm add mermaid dompurify
```

```bash [npm]
npm install mermaid dompurify
```

```bash [yarn]
yarn add mermaid dompurify
```

```bash [bun]
bun add mermaid dompurify
```

### 开启配置

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  extends: ['@movk/nuxt-docs'],

  movkNuxtDocs: {
    mermaid: true
  }
})
```

> [!TIP]
> 
> 未安装依赖直接启用时，模块会打印警告并跳过注册，
> 
> mermaid
> 
>  代码块将回退为普通代码块展示。

## 基础用法

使用 ````mermaid` 代码块渲染图表。支持自动主题切换（深色/浅色模式）、懒加载、复制代码和全屏查看功能。

````md
```mermaid
graph TD
A[开始] --> B{是否有效?}
B -->|是| C[处理数据]
B -->|否| D[显示错误]
C --> E[完成]
D --> E
```
````

### 带文件名的图表

与代码块类似，可以在方括号中指定文件名，显示在图表顶部：

````md
```mermaid [auth-flow.mmd]
sequenceDiagram
participant U as 用户
participant A as 认证服务
...
```
````

## 图表类型

### 流程图

使用 `flowchart` 或 `graph` 定义流程图。支持方向：`TB`（上到下）、`LR`（左到右）、`BT`、`RL`。

```mermaid
flowchart LR
    A[输入] --> B{条件判断}
    B -->|是| C[处理 A]
    B -->|否| D[处理 B]
    C --> E[输出]
    D --> E
```

### 时序图

使用 `sequenceDiagram` 展示对象间的交互顺序：

```mermaid
sequenceDiagram
    participant C as 客户端
    participant S as 服务器
    participant D as 数据库

    C->>S: HTTP 请求
    activate S
    S->>D: 查询数据
    activate D
    D-->>S: 返回结果
    deactivate D
    S-->>C: HTTP 响应
    deactivate S
```

### 类图

使用 `classDiagram` 展示类的结构和关系：

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +String color
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat
```

### 状态图

使用 `stateDiagram-v2` 展示状态机：

```mermaid
stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中: 开始处理
    处理中 --> 已完成: 处理成功
    处理中 --> 失败: 处理错误
    失败 --> 待处理: 重试
    已完成 --> [*]
```

### 饼图

使用 `pie` 展示数据占比：

```mermaid
pie title 项目时间分配
    "开发" : 45
    "测试" : 25
    "文档" : 15
    "评审" : 15
```

### 甘特图

使用 `gantt` 展示项目计划：

```mermaid
gantt
    title 项目开发计划
    dateFormat YYYY-MM-DD
    section 设计阶段
        需求分析    :a1, 2024-01-01, 7d
        UI 设计     :a2, after a1, 5d
    section 开发阶段
        前端开发    :b1, after a2, 14d
        后端开发    :b2, after a2, 14d
    section 测试阶段
        集成测试    :c1, after b1, 7d
```

### 实体关系图

使用 `erDiagram` 展示数据库关系：

```mermaid
erDiagram
    USER ||--o{ ORDER : places
    USER {
        int id PK
        string name
        string email
    }
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        int id PK
        int user_id FK
        date created_at
    }
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"
    PRODUCT {
        int id PK
        string name
        float price
    }
    ORDER_ITEM {
        int order_id FK
        int product_id FK
        int quantity
    }
```

> [!TIP]
> See: https://mermaid.js.org/intro/
> 
> 查看 Mermaid 官方文档了解更多图表类型和语法。

## 自定义样式

在 `app/app.config.ts` 中自定义 Mermaid 组件样式：

```ts [app/app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      mermaid: {
        slots: {
          root: 'border-2 border-primary rounded-lg',
          header: 'bg-primary/10',
          diagram: 'bg-muted/50 p-6',
          toolbar: 'top-3 right-3',
          loading: 'text-primary',
          error: 'bg-error/20'
        }
      }
    }
  }
})
```

## API

### Props

```ts
/**
 * Props for the ProseMermaid component
 */
interface ProseMermaidProps {
  /**
   * 图表代码
   */
  code: string;
  /**
   * 图标
   */
  icon?: any;
  /**
   * 文件名
   */
  filename?: string | undefined;
  ui?: Partial<{ root: string; header: string; filename: string; icon: string; toolbar: string; diagram: string; loading: string; error: string; }> | undefined;
}
```

## Theme

```ts [app/app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      mermaid: {
        slots: {
          root: 'relative my-5 group border border-muted rounded-md overflow-hidden',
          header: 'flex items-center gap-1.5 border-b border-muted bg-default px-4 py-3',
          filename: 'text-default text-sm/6',
          icon: 'size-4 shrink-0',
          toolbar: 'absolute top-2 right-2 flex gap-1 z-10 opacity-0 group-hover:opacity-100 transition-opacity',
          diagram: 'p-4 flex justify-center bg-elevated overflow-x-auto',
          loading: 'p-4 flex items-center justify-center gap-2 text-sm text-muted',
          error: 'p-4 flex items-center justify-center gap-2 text-sm text-error bg-error/10'
        },
        variants: {
          fullscreen: {
            true: {
              root: 'fixed inset-0 z-50 m-0 rounded-none bg-default flex flex-col',
              diagram: 'flex-1 overflow-auto',
              toolbar: 'opacity-100'
            }
          },
          filename: {
            true: {
              root: ''
            }
          }
        }
      }
    }
  }
})
```

## Changelog

See commit history for [layer/modules/runtime/components/prose/Mermaid 图表.vue](https://github.com/mhaibaraai/movk-nuxt-docs/commits/main/layer/modules/runtime/components/prose/Mermaid 图表.vue).

---

- [GitHub](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/modules/runtime/components/prose/Mermaid.vue)


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.