---
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.

````md
```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:

````md
```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.