---
title: "Mermaid 图表"
description: "在 Movk Nuxt Docs 中启用可选的 Mermaid 图表支持，渲染流程图、时序图、类图、状态图、饼图、甘特图和实体关系图。内置自动主题切换、懒加载、复制代码和全屏查看功能，安装 mermaid 与 dompurify 后一键开启。"
seo_title: "Mermaid Diagrams"
seo_description: "Enable optional Mermaid diagram support in Movk Nuxt Docs for flowcharts, sequence diagrams, class diagrams, state diagrams, and more."
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 ```` 代码块渲染图表。支持自动主题切换（深色/浅色模式）、懒加载、复制代码和全屏查看功能。
```vue
B{是否有效?}
B -->|是| C[处理数据]
B -->|否| D[显示错误]
C --> E[完成]
D --> E
language=mermaid meta= style=>
graph
TD
A
[
开始
]
-->
B
{
是否有效?
}
B
-->|
是
|
C
[
处理数据
]
B
-->|
否
|
D
[
显示错误
]
C
-->
E
[
完成
]
D
-->
E
B{是否有效?}
B -->|是| C[处理数据]
B -->|否| D[显示错误]
C --> E[完成]
D --> E
```
language=md meta= style=>
```
mermaid
graph TD
A[开始] --> B{是否有效?}
B -->|是| C[处理数据]
B -->|否| D[显示错误]
C --> E[完成]
D --> E
```
```
### 带文件名的图表
与代码块类似，可以在方括号中指定文件名，显示在图表顶部：
```vue
>A: 登录请求
A->>D: 验证凭证
D-->>A: 返回用户信息
A-->>U: 返回 Token
filename=auth-flow.mmd language=mermaid meta= style=>
sequenceDiagram
participant
U
as
用户
participant
A
as
认证服务
participant
D
as
数据库
U
->>
A
:
登录请求
A
->>
D
:
验证凭证
D
-->>
A
:
返回用户信息
A
-->>
U
:
返回 Token
```
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).
## Sitemap
See the full [sitemap](/sitemap.md) for all pages.