Mermaid

Gungnir

2022-03-12

2 min

信息

默认不启用该功能。

提示

对于没有启用的功能，与它们相关的代码并不会被打包。

配置

通过插件 plugin-mermaid 来在 Markdown 中使用 Mermaid，从而在文章中加入流程图、状态图、时序图、甘特图等：

theme: gungnirTheme({
  themePlugins: {
    mermaid: true
  }
})

如果你想自定义代码块 token（默认为 mermaidjs）：

theme: gungnirTheme({
  themePlugins: {
    mermaid: {
      token: "mermaid"
    }
  }
})

Mermaid 支持多种主题。Gungnir 主题默认在亮色模式下使用 default 主题，在夜间模式下使用 dark 主题。你也可以通过修改插件配置项来使用其他主题：

theme: gungnirTheme({
  themePlugins: {
    mermaid: {
      theme: "default",  // 默认："default"
      darkTheme: "dark"  // 默认："dark"
    }
  }
})

更多细节和用法请参考 plugin-mermaid 的文档。

代码块的 token 需要为 mermaidjs（或你自定义的 token），例子：

代码

```mermaidjs
sequenceDiagram
  Alice->John: Hello John, how are you?
  loop Every minute
    John-->Alice: Great!
  end
```

更详细的用法可以参考 Mermaid 文档。