指令

警告

指令已从 v10.5.0 开始弃用。请使用 frontmatter 中的 config 键传递配置。有关更多详细信息，请参阅配置。

指令

指令使图表作者能够通过更改应用的配置来更改图表在渲染之前的显示方式。

使用指令的意义在于，它们在编写图表时可用，并且可以修改默认的全局和图表特定配置。因此，指令是在默认配置之上应用的。指令的优点是，可以使用它们来更改特定图表的配置设置，即在单个级别上。

虽然指令允许更改大多数默认配置设置，但出于安全原因，有些设置不可用。此外，可以选择定义要允许图表作者使用指令覆盖的配置集。

指令选项类型

Mermaid 主要支持两种类型的配置选项，这些选项可以通过指令覆盖。

通用/顶级配置：这些配置对所有图表可用并应用于所有图表。一些最重要的顶级配置包括
- theme
- fontFamily
- logLevel
- securityLevel
- startOnLoad
- secure
图表特定配置：这些配置对特定图表可用并应用于特定图表。对于每个图表，都有一些特定配置可以更改该特定图表的显示方式和行为。例如，mirrorActors 是特定于 SequenceDiagram 的配置，它会更改角色是否镜像。因此，此配置仅对 SequenceDiagram 类型可用。

注意：此处未列出所有配置选项。要获取所有配置选项，请参阅源代码中的 defaultConfig.ts。

信息

我们计划很快在文档中发布顶级配置和图表特定配置及其可能值的完整列表。

声明指令

现在我们已经定义了可用的配置类型，我们可以学习如何声明指令。指令始终以 %% 符号开头和结尾，中间是指令文本，例如 %% {directive_text} %%。

此处，指令文本的结构类似于嵌套的键值对映射或 JSON 对象，根为 init。所有通用配置都在顶级定义，所有图表特定配置都在更深一层定义，以图表类型作为该部分的键/根。

以下代码片段显示了指令的结构

%%{
  init: {
    "theme": "dark",
    "fontFamily": "monospace",
    "logLevel": "info",
    "flowchart": {
      "htmlLabels": true,
      "curve": "linear"
    },
    "sequence": {
      "mirrorActors": true
    }
  }
}%%

您也可以像这样在一行中定义指令

%%{init: { **insert configuration options here** } }%%

例如，以下代码片段

%%{init: { "sequence": { "mirrorActors":false }}}%%

注意：作为 {argument} 传递的 JSON 对象必须是有效的键值对并用引号括起来，否则它将被忽略。可以在 config 中找到有效的键值对。

使用简单图形的示例

此处，指令声明将为渲染的 mermaid 图表设置 logLevel 为 debug，并将 theme 设置为 dark，从而更改图表本身的外观。

注意：您可以使用 'init' 或 'initialize'，因为两者都作为 init 指令被接受。还要注意，%%init%% 和 %%initialize%% 指令将在解析后被分组在一起。

例如，解析上述内容会生成下面单个 %%init%% JSON 对象，将两个指令合并在一起，并保留为 loglevel 给出的最后一个值

json

{
  "logLevel": "fatal",
  "theme": "dark",
  "startOnLoad": true
}

然后，这将发送到 mermaid.initialize(...) 以进行渲染。

指令示例

现在已经解释了指令的概念，让我们看一些使用指令的更多示例

通过指令更改主题

以下代码片段将 theme 更改为 forest

%%{init: { "theme": "forest" } }%%

可能的主题值包括：default、base、dark、forest 和 neutral。默认值为 default。

示例

通过指令更改 fontFamily

以下代码片段将 fontFamily 更改为 Trebuchet MS、Verdana、Arial、Sans-Serif

%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%

示例

通过指令更改 logLevel

以下代码片段将 logLevel 更改为 2

%%{init: { "logLevel": 2 } }%%

可能的 logLevel 值包括

1 表示 debug，
2 表示 info
3 表示 warn
4 表示 error
5 表示 仅致命错误

默认值为 5。

示例

通过指令更改流程图配置

一些常见的流程图配置包括

htmlLabels：true/false
curve：linear/curve
diagramPadding：数字
useMaxWidth：数字

有关流程图配置的完整列表，请参阅源代码中的 defaultConfig.ts。我们计划很快在文档中发布所有图表特定配置的完整列表。

以下代码片段更改了流程图配置

%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%

此处，我们仅覆盖流程图配置，而不是通用配置，将 htmlLabels 设置为 true，并将 curve 设置为 linear。

通过指令更改序列图配置

一些常见的序列图配置包括

width：数字
height：数字
messageAlign：left、center、right
mirrorActors：布尔值
useMaxWidth：布尔值
rightAngles：布尔值
showSequenceNumbers：布尔值
wrap：布尔值

有关序列图配置的完整列表，请参阅源代码中的 defaultConfig.ts。我们计划很快在文档中发布所有图表特定配置的完整列表。

因此，wrap 默认情况下对序列图的值为 false。

让我们看一个例子

现在让我们为序列图启用 wrap。

以下代码片段将序列图配置的 wrap 更改为 true

%%{init: { "sequence": { "wrap": true} } }%%

将该代码片段应用于上面的图表后，将启用 wrap

指令 ​

指令 ​

指令选项类型 ​

声明指令 ​

指令示例 ​

通过指令更改主题 ​

通过指令更改 fontFamily ​

通过指令更改 logLevel ​

通过指令更改流程图配置 ​

通过指令更改序列图配置 ​

指令

指令