Mermaid 中文网

主题

体验 Mermaid 在线编辑器！

指令 ​

🌐 Directives

警告

从 v10.5.0 起，不再推荐使用指令。请使用 frontmatter 中的 config 键来传递配置。更多详细信息请参见 Configuration。

指令 ​

🌐 Directives

指令使图表作者能够在呈现之前通过更改应用的配置来修改图表的外观。

🌐 Directives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.

使用指令的重要性在于，当你编写图表时可以使用它们，并且可以修改默认的全局和图表特定配置。因此，指令会应用在默认配置之上。指令的优点在于，你可以使用它们为特定图表修改配置设置，即在单个层面上进行调整。

🌐 The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram-specific configurations. So, directives are applied on top of the default configuration. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.

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

🌐 While directives allow you to change most of the default configuration settings, there are some that are not available, for security reasons. Also, you have the option to define the set of configurations that you wish to allow diagram authors to override with directives.

指令选项类型 ​

🌐 Types of Directives options

Mermaid 基本上支持两种可以通过指令覆盖的配置选项。

🌐 Mermaid basically supports two types of configuration options to be overridden by directives.

  1. 通用/顶层配置 ：这些是可用并应用于所有图表的配置。一些最重要的顶层配置包括：
    • theme
    • fontFamily
    • logLevel
    • securityLevel
    • startOnLoad
    • secure
  2. 特定图表的配置：这些是可用于特定图表并应用于该图表的配置。每个图表都有特定的配置，会改变该图表的外观和行为。例如，mirrorActors 是一个特定于 SequenceDiagram 的配置，用于调整角色是否镜像显示。因此，该配置仅适用于 SequenceDiagram 类型。

注意： 并非所有配置选项都列在这里。要获取所有配置选项，请参考源码中的 defaultConfig.ts。

信息

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

声明指令 ​

🌐 Declaring directives

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

🌐 Now that we have defined the types of configurations that are available, we can learn how to declare directives. A directive always starts and ends with %% signs with directive text in between, like %% {directive_text} %%.

这里指令文本的结构就像一个嵌套的键值对映射或 JSON 对象，其根为 init。所有的通用配置都在顶层定义，而所有特定图表的配置则在下一层定义，使用图表类型作为该部分的键/根。

🌐 Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being init. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.

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

🌐 The following code snippet shows the structure of a directive:

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

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

🌐 You can also define the directives in a single line, like this:

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

例如，下面的代码片段：

🌐 For example, the following code snippet:

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

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

带有简单图表的示例：

🌐 Example with a simple graph:

这里，指令声明将把渲染的 Mermaid 图表的 logLevel 设置为 debug，并将 theme 设置为 dark，从而改变图表本身的外观。

🌐 Here the directive declaration will set the logLevel to debug and the theme to dark for a rendered mermaid diagram, changing the appearance of the diagram itself.

注意：你可以使用 'init' 或 'initialize'，因为两者都可以作为初始化指令。还要注意，%%init%% 和 %%initialize%% 指令在解析后将会被归为一组。

🌐 Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that %%init%% and %%initialize%% directives will be grouped together after they are parsed.

例如，解析上述内容会生成一个单独的 %%init%% JSON 对象，如下所示，它将两个指令合并，并延续 loglevel 的最后一个值：

🌐 For example, parsing the above generates a single %%init%% JSON object below, combining the two directives and carrying over the last value given for loglevel:

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

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

🌐 This will then be sent to mermaid.initialize(...) for rendering.

指令示例 ​

🌐 Directive Examples

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

🌐 Now that the concept of directives has been explained, let us see some more examples of directive usage:

通过指令更改主题 ​

🌐 Changing theme via directive

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

🌐 The following code snippet changes theme to forest:

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

可能的主题值有：default、base、dark、forest 和 neutral。 默认值是 default。

🌐 Possible theme values are: default, base, dark, forest and neutral. Default Value is default.

示例：

🌐 Example:

通过指令更改字体族 ​

🌐 Changing fontFamily via directive

以下代码片段将字体系列更改为 Trebuchet MS、Verdana、Arial、无衬线字体：

🌐 The following code snippet changes fontFamily to Trebuchet MS, Verdana, Arial, Sans-Serif:

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

示例：

🌐 Example:

通过指令更改日志级别 ​

🌐 Changing logLevel via directive

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

🌐 The following code snippet changes logLevel to 2:

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

可能的 logLevel 值有：

🌐 Possible logLevel values are:

  • 1 用于 调试,
  • 2 用于 信息
  • 3表示_warn_
  • 4表示_错误_
  • 5 仅用于致命错误

默认值是 5。

🌐 Default Value is 5.

示例：

🌐 Example:

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

🌐 Changing flowchart config via directive

一些常见的流程图配置有：

🌐 Some common flowchart configurations are:

  • htmlLabels: true/false
  • curve: 线性/曲线
  • diagramPadding: 数字
  • useMaxWidth: 数字

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

🌐 For a complete list of flowchart configurations, see defaultConfig.ts in the source code. Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs.

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

🌐 The following code snippet changes flowchart config:

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

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

🌐 Here we are overriding only the flowchart config, and not the general config, setting htmlLabels to true and curve to linear.

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

🌐 Changing Sequence diagram config via directive

一些常见的时序图配置如下：

🌐 Some common sequence diagram configurations are:

  • width: 数字
  • height: 数字
  • messageAlign: 左, 居中, 右
  • mirrorActors: 布尔值
  • useMaxWidth：布尔型
  • rightAngles: 布尔值
  • showSequenceNumbers: 布尔值
  • wrap: 布尔值

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

🌐 For a complete list of sequence diagram configurations, see defaultConfig.ts in the source code. Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs.

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

🌐 So, wrap by default has a value of false for sequence diagrams.

让我们来看一个例子：

🌐 Let us see an example:

现在让我们为时序图启用换行功能。

🌐 Now let us enable wrap for sequence diagrams.

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

🌐 The following code snippet changes sequence diagram config for wrap to true:

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

通过将那段代码应用到上面的图表中，将启用 wrap：

🌐 By applying that snippet to the diagram above, wrap will be enabled:

Opens in MermaidChart.com