---
title: Mermaid
createTime: 2025/10/08 19:34:16
icon: file-icons:mermaid
permalink: /en/guide/chart/mermaid/
---

## Overview

The theme supports embedding diagrams generated by [Mermaid](https://mermaid.js.org/) within articles.

This feature is powered by [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/).

## Configuration

This feature is not enabled by default in the theme.

You need to install the [mermaid](https://mermaid.js.org/) library in your project.

::: npm-to

```sh
npm install mermaid
```

:::

Then, enable the feature in your `.vuepress/config.ts` configuration file:

```ts title=".vuepress/config.ts"
export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      mermaid: true, // [!code ++]
    },
  })
})
```

::: note
The following documentation is forked from [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/mermaid.html)
and is provided under the[MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) license.
:::

## Syntax

````md
```mermaid

<!-- Place mermaid code here -->

```
````

In addition to using the `mermaid` code block, you can also directly use the following code block types:

- class: `classDiagram`
- c4c: `C4Context`
- er: `erDiagram`
- gantt: `gantt`
- git-graph: `gitGraph`
- journey: `journey`
- mindmap: `mindmap`
- pie: `pie`
- quadrant: `quadrantChart`
- requirement: `requirementDiagram`
- sankey: `sankey-beta`
- sequence: `sequenceDiagram`
- state: `stateDiagram-v2`
- timeline: `timeline`
- xy: `xychart-beta`

You do not need to declare the diagram type again, nor do you need to indent the diagram code.

When the diagram supports setting a title, you can add the title directly after the code block info:

````md
```sequence Diagram Title
<!-- Sequence diagram code
... -->
```
````

Refer to the [Mermaid documentation](https://mermaid.js.org/) for configuration details.

## Advanced Usage

You can import and use `defineMermaidConfig` in the
[Client Configuration File](https://vuejs.press/guide/configuration.html#client-configuration-file) to customize Mermaid settings:

```ts
import { defineMermaidConfig } from '@vuepress/plugin-markdown-chart/client'
import { defineClientConfig } from 'vuepress/client'

defineMermaidConfig({
  // Set mermaid options here
})

export default defineClientConfig({
  // ...
})
```

## Examples

### Flowchart

**Input:**

<!-- @include: ../../../snippet/mermaid-1.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-1.snippet.md{2-20} -->

### Sequence Diagram

**Input:**

<!-- @include: ../../../snippet/mermaid-2.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-2.snippet.md{2-11} -->

### Class Diagram

**Input:**

<!-- @include: ../../../snippet/mermaid-3.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-3.snippet.md{2-25} -->

### State Diagram

**Input:**

<!-- @include: ../../../snippet/mermaid-4.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-4.snippet.md{2-9} -->

### Entity Relationship Diagram

**Input:**

<!-- @include: ../../../snippet/mermaid-5.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-5.snippet.md{2-15} -->

### User Journey Diagram

**Input:**

<!-- @include: ../../../snippet/mermaid-6.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-6.snippet.md{2-11} -->

### Gantt Chart

**Input:**

:::: details View Code
<!-- @include: ../../../snippet/mermaid-7.snippet.md -->
::::

**Output:**

<!-- @include: ../../../snippet/mermaid-7.snippet.md{2-31} -->

### Pie Chart

**Input:**

````md
```pie
title What Voldemort doesn't have?
  "FRIENDS" : 2
  "FAMILY" : 3
  "NOSE" : 45
```
````

**Output:**

```pie
title What Voldemort doesn't have?
  "FRIENDS" : 2
  "FAMILY" : 3
  "NOSE" : 45
```

### Git Graph

**Input:**

:::: details View Code
<!-- @include: ../../../snippet/mermaid-8.snippet.md-->
::::

**Output:**

<!-- @include: ../../../snippet/mermaid-8.snippet.md{2-44} -->

### C4 Diagram

**Input:**

:::: details View Code
<!-- @include: ../../../snippet/mermaid-9.snippet.md -->
::::

**Output:**

<!-- @include: ../../../snippet/mermaid-9.snippet.md{2-34} -->

### Mindmap

**Input:**

<!-- @include: ../../../snippet/mermaid-10.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-10.snippet.md{2-19} -->

### Timeline Diagram

**Input:**

<!-- @include: ../../../snippet/mermaid-11.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-11.snippet.md{2-11} -->

### Sankey Diagram

**Input:**

:::: details View Code
<!-- @include: ../../../snippet/mermaid-12.snippet.md -->
::::

**Output:**

<!-- @include: ../../../snippet/mermaid-12.snippet.md{2-71} -->

### Requirement Diagram

**Input:**

<!-- @include: ../../../snippet/mermaid-13.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-13.snippet.md{2-15} -->

### Quadrant Chart

**Input:**

<!-- @include: ../../../snippet/mermaid-14.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-14.snippet.md{2-16} -->

### XY Chart

**Input:**

<!-- @include: ../../../snippet/mermaid-15.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-15.snippet.md{2-8} -->

### Block Diagram

**Input:**

<!-- @include: ../../../snippet/mermaid-16.snippet.md -->

**Output:**

<!-- @include: ../../../snippet/mermaid-16.snippet.md{2-12} -->

### Complex Example

**Input:**

:::: details View Code
<!-- @include: ../../../snippet/mermaid-17.snippet.md -->
::::

**Output:**

<!-- @include: ../../../snippet/mermaid-17.snippet.md{2-24} -->