vuepress-theme-plume/skills/vuepress-plume-markdown/resources/mermaid.md

Mermaid

The theme supports embedding diagrams generated by Mermaid within articles.

Configuration

Enable the feature in .vuepress/config.ts:

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      mermaid: true,
    },
  })
})

You also need to install the mermaid library:

npm install mermaid

Syntax

Use the mermaid code block or specific diagram type code blocks (e.g., sequence, class, flow, etc.).

```mermaid
flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No --> E[End]
```

Supported Diagram Types

You can use these aliases directly:

• 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

Example with title:

```sequence Diagram Title
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```