图表语法

Mermaid 的语法用于创建图表。你会发现它并不难，一天就能学会。接下来的部分深入探讨了每种图表类型的语法。

语法与部署和配置共同构成了 Mermaid 的全部。

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

语法结构

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

**示例**：以下代码用于实体关系图，由 erDiagram 声明指定。之后是其中表示的不同 实体 的定义。

入门 部分还可以提供一些 Mermaid 语法的实际示例。

图表中断

应该 **注意某些可能导致图表中断的词语或符号**。这些词语或符号很少，而且通常只影响特定类型的图表。下表将持续更新。

图表中断器	原因	解决方案
注释
%%{``}%%	类似于 指令 使渲染器感到困惑。	在使用 %% 的注释中，避免使用 "{}".
流程图
'end'	单词“End”可能会导致流程图和序列图中断	将它们用引号括起来以防止中断。
节点内的节点	Mermaid 对嵌套形状感到困惑	将它们用引号括起来以防止中断

Mermaid 实时编辑器

现在，你已经了解了不应该添加到图表中的内容，你可以在 Mermaid 实时编辑器 中随意使用它们。

配置

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

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

在 实时编辑器 中的配置部分。

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

initialize() 调用

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

指令

允许在渲染图表之前对其进行有限的重新配置。它可以改变图表的字体样式、颜色和其他美学方面。你可以在 %%{ }%% 中将指令与你的定义一起传递。它可以完成在你的图表定义之上或之下。

主题操作

使用指令更改 主题 的应用。Theme 是 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]

#### Using Dagre Layout with Classic Look:

另一个示例

---
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 时，你可以使用 initialize 调用包含外观和布局配置。这也是你添加 elk 加载的地方。