5.5 KiB
title, createTime, icon, permalink
| title | createTime | icon | permalink |
|---|---|---|---|
| Mermaid | 2025/10/08 19:34:16 | file-icons:mermaid | /en/guide/chart/mermaid/ |
Overview
The theme supports embedding diagrams generated by Mermaid within articles.
This feature is powered by @vuepress/plugin-markdown-chart.
Configuration
This feature is not enabled by default in the theme.
You need to install the mermaid library in your project.
::: npm-to
npm install mermaid
:::
Then, enable the feature in your .vuepress/config.ts configuration file:
export default defineUserConfig({
theme: plumeTheme({
markdown: {
mermaid: true, // [!code ++]
},
})
})
::: note The following documentation is forked from @vuepress/plugin-markdown-chart and is provided under theMIT license. :::
Syntax
```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:
```sequence Diagram Title
<!-- Sequence diagram code
... -->
```
Refer to the Mermaid documentation for configuration details.
Advanced Usage
You can import and use defineMermaidConfig in the
Client Configuration File to customize Mermaid settings:
import { defineMermaidConfig } from '@vuepress/plugin-markdown-chart/client'
import { defineClientConfig } from 'vuepress/client'
defineMermaidConfig({
// Set mermaid options here
})
export default defineClientConfig({
// ...
})
Examples
Flowchart
Input:
Output:
Sequence Diagram
Input:
Output:
Class Diagram
Input:
Output:
State Diagram
Input:
Output:
Entity Relationship Diagram
Input:
Output:
User Journey Diagram
Input:
Output:
Gantt Chart
Input:
:::: details View Code
::::
Output:
Pie Chart
Input:
```pie
title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
```
Output:
title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
Git Graph
Input:
:::: details View Code
::::
Output:
C4 Diagram
Input:
:::: details View Code
::::
Output:
Mindmap
Input:
Output:
Timeline Diagram
Input:
Output:
Sankey Diagram
Input:
:::: details View Code
::::
Output:
Requirement Diagram
Input:
Output:
Quadrant Chart
Input:
Output:
XY Chart
Input:
Output:
Block Diagram
Input:
Output:
Complex Example
Input:
:::: details View Code
::::
Output: