图表语法

Mermaid 的语法用于创建图表。您会发现这并不太复杂，通常一天就能学会。接下来的部分将深入探讨每种图表类型的语法。

语法与部署和配置一起构成了 Mermaid 的整体。

图表示例可以在中文Mermaid编辑器中找到，这也是一个很好的练习区。

语法结构

人们会注意到，所有 图表定义都是以 图表类型的声明 开始，之后是图表及其内容的定义。该声明通知解析器代码应生成哪种图表。

示例 : 下面的代码是一个实体关系图，使用 erDiagram 声明进行指定。接下来是定义其中不同的 Entities。

Code:

mermaid

入门部分也提供了一些有关 mermaid 语法的实际示例。

图表破坏

人们应该 小心使用某些词或符号，它们可能会破坏图表。这些词或符号很少，并且通常只影响特定类型的图表。下表将持续更新。

图表破坏者	原因	解决方案
注释
%%{``}%%	与 Directives 类似，会使渲染器困惑。	在注释中使用 `%%` 时，避免使用 "{}"。
流程图
'end'	单词 "End" 可能会导致流程图和序列图破坏。	将其用引号括起来以防止破坏。
节点内节点	Mermaid 对嵌套形状感到困惑。	用引号括起来以防止破坏。

中文Mermaid编辑器

现在，您已经看到了不应该添加到图表中的内容，您可以在中文Mermaid编辑器中进行实验。

配置

配置是 Mermaid 的第三部分，位于部署和语法之后。它处理 Mermaid 可以在不同部署中自定义的不同方式。

如果您有兴趣修改和自定义您的 Mermaid 图表，您可以在这里找到配置可用的方法和值。它包括主题。本节将介绍配置 Mermaid 图表的行为和外观的不同方法。以下是最常用的方法，它们都与 Mermaid 部署方法相关联。

中文Mermaid编辑器中的配置部分

在这里，您可以编辑某些值以更改图表的行为和外观。

initialize() 调用

当通过 API 调用 Mermaid 或通过 <script> 标签调用时使用。

指令

允许在图表渲染之前进行有限的重新配置。它可以改变图表的字体样式、颜色及其他美学方面。您可以在 %%{ }%% 中的定义旁边传递一个指令。可以在图表定义的上方或下方进行。

主题操控

使用指令改变主题的应用。主题 是 Mermaid 配置中的一个值，决定图表的配色方案。

布局和外观

我们已经重构了 Mermaid 渲染图表的方式，使新的特性能够选择布局和外观。目前，这对流程图和状态图是支持的，计划扩展支持到所有图表类型。

选择图表外观

Mermaid 提供了各种样式或“外观”供您选择，允许您根据特定的需求或偏好定制视觉外观。无论您是喜欢手绘风格还是经典风格，您都可以轻松自定义图表。

可用外观：

手绘外观：更具个人和创意感的手绘外观为您的图表增添了草图般的质量。这种风格非常适合非正式场合或当您想为图表增添一些个性时。
经典外观：如果您更喜欢传统的 Mermaid 风格，经典外观保持了许多用户熟悉的原始外观。这对跨项目的一致性很好，或者当您想保持熟悉的美学时。

如何选择外观：

您可以在 Mermaid 图表代码的元数据部分添加外观参数来选择外观。下面是一个示例：

选择布局算法

除了自定义图表的外观外，Mermaid Chart 现在允许您选择不同的布局算法，以更好地组织和呈现图表，尤其是在处理更复杂的结构时。布局算法决定节点和边在页面上的排列方式。

支持的布局算法：

Dagre（默认）：这是一个经典的布局算法，已在 Mermaid 中使用很长时间。它提供了简单性和视觉清晰度的良好平衡，使其适用于大多数图表。
ELK：对于需要更复杂布局能力的人，尤其是在处理大型或复杂图表时，ELK（Eclipse Layout Kernel）布局提供了高级选项。它提供了更优化的排列，可能减少重叠并提高可读性。这不是现成的，需要在集成 mermaid 时添加以支持希望具备 elk 支持的网站/应用程序。

如何选择布局算法：

您可以直接在 Mermaid 图表代码的元数据部分指定布局算法。以下是一个示例：

在这个示例中，layout: elk 行配置图表使用 ELK 布局算法，同时使用手绘外观和深色主题。

自定义 ELK 布局：

在使用 ELK 布局时，您可以进一步细化图表的配置，例如节点的放置方式以及是否合并平行边：

要合并平行边，请使用 mergeEdges: true | false。
要配置节点放置，请使用 nodePlacementStrategy，并提供以下选项：
- SIMPLE
- NETWORK_SIMPLEX
- LINEAR_SEGMENTS
- BRANDES_KOEPF（默认）

示例配置：

---
config:
  layout: elk
  elk:
    mergeEdges: true
    nodePlacementStrategy: LINEAR_SEGMENTS
---
flowchart LR
  A[Start] --> B{Choose Path}
  B -->|Option 1| C[Path 1]
  B -->|Option 2| D[Path 2]

#### 使用 Dagre 布局与经典外观：

另一个示例：

---
config:
  layout: dagre
  look: classic
  theme: default
---

flowchart LR
A[Start] --> B{Choose Path}
B -->|Option 1| C[Path 1]
B -->|Option 2| D[Path 2]

这些选项提供了灵活性，让您创建不仅外观出色，而且排列方式最符合数据结构和流程的图表。

在集成 Mermaid 时，您可以通过初始化调用包含外观和布局配置。这也是加载 elk 的地方。

图表语法 ​

语法结构 ​

Code:

图表破坏 ​

中文Mermaid编辑器 ​

配置 ​

中文Mermaid编辑器 中的配置部分 ​

initialize() 调用 ​

指令 ​

主题操控 ​

布局和外观 ​

选择图表外观 ​

选择布局算法 ​

支持的布局算法： ​

如何选择布局算法： ​

自定义 ELK 布局： ​