307 lines
5.5 KiB
Markdown
307 lines
5.5 KiB
Markdown
---
|
|
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} -->
|