Mermaid中文文档

Appearance

指令 ​

WARNING

从 v10.5.0 版本开始，指令已弃用。请使用 frontmatter 中的 `config` 键传递配置。更多详情请参见 [配置](./configuration.md)。

指令 ​

指令赋予图表作者在渲染前通过更改应用的配置来更改图表外观的能力。

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

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

指令选项类型 ​

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

  1. 通用/顶级配置: 这些配置可用于所有图表并应用于所有图表。一些最重要的顶级配置包括：

    • theme
    • fontFamily
    • logLevel
    • securityLevel
    • startOnLoad
    • secure

  2. 图表特定配置: 这些配置可用于特定图表并应用于特定图表。对于每个图表，都有特定的配置会改变该特定图表的外观和行为。 例如，mirrorActors 是特定于 SequenceDiagram 的配置，它会更改参与者是否镜像。因此，此配置仅适用于 SequenceDiagram 类型。

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

NOTE

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

声明指令 ​

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

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

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

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

您也可以在一行中定义指令，如下所示：

%%{init: { **在此处插入配置选项** } }%%

例如，以下代码片段：

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

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

带有简单图形的示例：

Code:
mermaid

此处，指令声明将为渲染的 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。

示例：

Code:
mermaid

通过指令更改 fontFamily ​

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

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

示例：

Code:
mermaid

通过指令更改 logLevel ​

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

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

可能的 logLevel 值为：

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

默认值为 5。

示例：

Code:
mermaid

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

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

  • htmlLabels: true/false
  • curve: linear/curve
  • diagramPadding: 数字
  • useMaxWidth: 数字

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

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

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

在这里，我们只覆盖流程图配置，而不是通用配置，将 htmlLabels 设置为 true，将 curve 设置为 linear。

Code:
mermaid

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

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

  • width: 数字
  • height: 数字
  • messageAlign: left, center, right
  • mirrorActors: 布尔值
  • useMaxWidth: 布尔值
  • rightAngles: 布尔值
  • showSequenceNumbers: 布尔值
  • wrap: 布尔值

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

因此，wrap 对于序列图的默认值为 false。

让我们来看一个例子：

Code:
mermaid

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

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

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

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

Code:
mermaid