---
title: "Mermaid Diagrams"
description: "Enable optional Mermaid diagram support in Movk Nuxt Docs to render flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Gantt charts, and entity-relationship diagrams. Includes automatic theme switching, lazy loading, copy code, and full-screen viewing, and is enabled in one step after installing mermaid and dompurify."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/typography/mermaid"
---
# Mermaid Diagrams
> Enable optional Mermaid diagram support in Movk Nuxt Docs to render flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Gantt charts, and entity-relationship diagrams. Includes automatic theme switching, lazy loading, copy code, and full-screen viewing, and is enabled in one step after installing mermaid and dompurify.
## Enabling Mermaid support
Mermaid is an optional feature, disabled by default. Before enabling it, install the dependencies first, then turn it on in the configuration.
### Install the dependencies
```bash [pnpm]
pnpm add mermaid dompurify
```
```bash [npm]
npm install mermaid dompurify
```
```bash [yarn]
yarn add mermaid dompurify
```
```bash [bun]
bun add mermaid dompurify
```
### Enable the configuration
```ts [nuxt.config.ts]
export default defineNuxtConfig({
extends: ['@movk/nuxt-docs'],
movkNuxtDocs: {
mermaid: true
}
})
```
> [!TIP]
>
> If you enable it without installing the dependencies, the module prints a warning and skips registration, and
>
> mermaid
>
> code blocks fall back to being displayed as plain code blocks.
## Basic usage
Use a ````mermaid` code block to render a diagram. It supports automatic theme switching (dark/light mode), lazy loading, copying code, and full-screen viewing.
```vue
B{Valid?}
B -->|Yes| C[Process data]
B -->|No| D[Show error]
C --> E[Done]
D --> E
language=mermaid meta= style=>
graph
TD
A
[
Start
]
-->
B
{
Valid?
}
B
-->|
Yes
|
C
[
Process data
]
B
-->|
No
|
D
[
Show error
]
C
-->
E
[
Done
]
D
-->
E
B{Valid?}
B -->|Yes| C[Process data]
B -->|No| D[Show error]
C --> E[Done]
D --> E
```
language=md meta= style=>
```
mermaid
graph TD
A[Start] --> B{Valid?}
B -->|Yes| C[Process data]
B -->|No| D[Show error]
C --> E[Done]
D --> E
```
```
### Diagrams with a filename
Similar to code blocks, you can specify a filename in square brackets to display it at the top of the diagram:
```vue
>A: Login request
A->>D: Verify credentials
D-->>A: Return user info
A-->>U: Return token
filename=auth-flow.mmd language=mermaid meta= style=>
sequenceDiagram
participant
U
as
User
participant
A
as
Auth service
participant
D
as
Database
U
->>
A
:
Login request
A
->>
D
:
Verify credentials
D
-->>
A
:
Return user info
A
-->>
U
:
Return token
```
mermaid [auth-flow.mmd]
sequenceDiagram
participant U as User
participant A as Auth service
...
```
```
## Diagram types
### Flowchart
Use `flowchart` or `graph` to define a flowchart. Supported directions: `TB` (top to bottom), `LR` (left to right), `BT`, `RL`.
```mermaid
flowchart LR
A[Input] --> B{Condition}
B -->|Yes| C[Process A]
B -->|No| D[Process B]
C --> E[Output]
D --> E
```
### Sequence diagram
Use `sequenceDiagram` to show the order of interactions between objects:
```mermaid
sequenceDiagram
participant C as Client
participant S as Server
participant D as Database
C->>S: HTTP request
activate S
S->>D: Query data
activate D
D-->>S: Return result
deactivate D
S-->>C: HTTP response
deactivate S
```
### Class diagram
Use `classDiagram` to show the structure and relationships of classes:
```mermaid
classDiagram
class Animal {
+String name
+int age
+eat()
+sleep()
}
class Dog {
+String breed
+bark()
}
class Cat {
+String color
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
```
### State diagram
Use `stateDiagram-v2` to show a state machine:
```mermaid
stateDiagram-v2
[*] --> Pending
Pending --> Processing: Start processing
Processing --> Completed: Processing succeeded
Processing --> Failed: Processing error
Failed --> Pending: Retry
Completed --> [*]
```
### Pie chart
Use `pie` to show data proportions:
```mermaid
pie title Project time allocation
"Development" : 45
"Testing" : 25
"Documentation" : 15
"Review" : 15
```
### Gantt chart
Use `gantt` to show a project schedule:
```mermaid
gantt
title Project development plan
dateFormat YYYY-MM-DD
section Design phase
Requirements analysis :a1, 2024-01-01, 7d
UI design :a2, after a1, 5d
section Development phase
Frontend development :b1, after a2, 14d
Backend development :b2, after a2, 14d
section Testing phase
Integration testing :c1, after b1, 7d
```
### Entity-relationship diagram
Use `erDiagram` to show database relationships:
```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/
>
> See the official Mermaid documentation for more diagram types and syntax.
## Custom styling
Customize the Mermaid component styles in `app/app.config.ts`:
```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 Diagrams.vue](https://github.com/mhaibaraai/movk-nuxt-docs/commits/main/layer/modules/runtime/components/prose/Mermaid Diagrams.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.