vuepress-theme-plume/docs/notes/theme/guide/chart/mermaid.md

title, createTime, icon, permalink

title	createTime	icon	permalink
mermaid	2024/03/16 19:34:16	file-icons:mermaid	/guide/chart/mermaid/

概述

主题支持在 文章中 嵌入由 Mermaid 。

该功能由 vuepress-plugin-md-enhance 提供支持。

配置

主题默认不启用该功能。

你需要在你的项目中安装 mermaid 库。

::: npm-to @tab pnpm

npm install mermaid

:::

然后在 .vuepress/config.ts 配置文件中，启用该功能：

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      mermaid: true, // [!code ++]
    },
  })
})

::: note 以下文档 Fork 自 vuepress-theme-hope, 遵循 MIT 许可证。 :::

语法

```mermaid

<!-- 在此处放置 mermaid 代码 -->

```

除了使用 mermaid 代码块，你也可以直接使用以下代码块：

• 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

你不需要再声明图表类型，也不需要缩进图表代码。

当图表支持设置标题时，你可以直接在代码块信息后添加标题:

```sequence 代码标题
<!-- 顺序图代码内容
... -->
```

配置文档详见 Mermaid 文档

高级

你可以在 客户端配置文件 中导入并使用 defineMermaidConfig 来自定义 Mermaid 配置:

import { defineMermaidConfig } from 'vuepress-plugin-md-enhance/client'
import { defineClientConfig } from 'vuepress/client'

defineMermaidConfig({
  // 在此设置 mermaid 选项
})

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

示例

流程图

输入：

输出：

循序图

输入：

输出：

类图

输入：

输出：

状态图

输入：

输出：

关系图

输入：

输出：

用户日记图

输入：

输出：

甘特图

输入：

:::: details 查看代码

::::

输出：

饼图

输入：

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

输出：

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

Git 图表

输入：

:::: details 查看代码

::::

输出：

C4C 图表

输入：

:::: details 查看代码

::::

输出：

思维导图

输入：

输出：

时序图

输入：

输出：

桑基图

输入：

:::: details 查看代码

::::

输出：

依赖图

输入：

输出：

象限图

输入：

输出：

XY图

输入：

输出：

块图

输入：

输出：

复杂例子

输入：

:::: details 查看代码

::::

输出：