当mermaid启动时，会提取配置以确定图表所需要的配置，配置一共有4个来源：

• 默认配置：即mermaid的默认配置。
• 站点配置：即各个站点会对mermaid做各自个性化的默认配置。
• Frontmatter(v10.5.0+)：在图表前使用yaml前言设定配置参数，这些参数会用于渲染。
• Directives(已被Frontmatter取代，在v11.12.2中依然有效)：作用和前言一致，也是在图表前使用指令设定配置参数。

参见Mermaid Config Schema ，相应的Json Schema， 同时也是MermaidConfig的定义。

站点默认配置

这里以vitepress-plugin-mermaid 为例，以下是官方示例配置：

.vitepress/config.js

import {withMermaid} from "vitepress-plugin-mermaid";

export default withMermaid({
    // your existing vitepress config...
    // optionally, you can pass MermaidConfig
    mermaid: {
        // refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
        // 这里扩展mermaid的站点配置 用于覆盖mermaid的默认配置
        theme: "forest"
    },
    // optionally set additional config for plugin itself with MermaidPluginConfig
    mermaidPlugin: {
        // 扩展样式
        class: "mermaid my-class", // set additional css classes for parent container 
    },
});

Frontmatter

FrontMatterMetadata 定义如下，可以在图表最前面使用yaml覆盖默认配置。

interface FrontMatterMetadata {
    // 标题
    title?: string;
    // Allows custom display modes. Currently used for compact mode in gantt charts.
    // 用于甘特图的显示模式
    displayMode?: GanttDiagramConfig['displayMode'];
    // mermaid配置
    config?: MermaidConfig;
}

Frontmatter示例：

---
title: Custom Title
config:
  theme: base
  themeVariables:
    primaryColor: "#00ff00"
  flowchart:
    padding: 50
---

flowchart LR
A --> B --> C

Directives

Directives的作用跟Frontmatter是类似的，只是格式和语法不太一样，在 v10.5.0就声明不建议使用，后期某个版本可能会永久移除。 参考utils.ts 中提取指令源码。跟Frontmatter类似，除了title属性外， init/initialize块中的对象定义即为MermaidConfig ，只是使用json定义的。

提示

JSON对象必须是有效的键值对且key必须用引号括起来，有效的键值对会在config中生效。

Directives示例：

%%{
  init: { 
    'logLevel': 'debug', 
    'theme': 'dark' 
  } 
}%%
graph LR
A --> B --> C