图表语法 ​

Mermaid的语法用于创建图表。你会发现它并不太复杂，可以在一天内学会。接下来的部分将深入探讨每种图表类型的语法。

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

图表示例可以在Mermaid Live Editor中找到，它也是一个很好的练习区域。

语法结构 ​

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

示例 : 下面的代码用于实体关系图，由erDiagram声明指定。接下来是其中表示的不同实体的定义。

入门指南部分也可以提供一些实用的mermaid语法示例。

图表中断 ​

应该注意使用某些可能破坏图表的单词或符号。这些单词或符号很少，通常只影响特定类型的图表。下表将持续更新。

Mermaid 实时编辑器 ​

现在，你已经了解了不应该添加到图表中的内容，你可以在Mermaid Live Editor中尝试使用它们。

配置 ​

配置是Mermaid的第三部分，紧随部署和语法之后。它涉及Mermaid在不同部署中可以进行定制的各种方式。

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

在Live Editor中的配置部分。 ​

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

initialize() 调用 ​

当通过API或

指令 ​

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

主题操作 ​

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

布局和外观 ​

我们已经重新构建了Mermaid渲染图表的方式，启用了选择布局和外观等新功能。目前，这支持流程图和状态图，并计划扩展到所有图表类型。

选择图表外观 ​

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

可用的外观：

• 手绘风格：为了更个性化、更具创意的触感，手绘风格为您的图表带来了类似草图的质量。这种风格非常适合非正式场合，或者当您想为图表增添一些个性时。
• 经典外观：如果您喜欢传统的Mermaid风格，经典外观保持了原始的外观，许多用户都熟悉这种风格。它非常适合在项目之间保持一致，或者当您想要保持熟悉的美感时。

如何选择一个外观：

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

选择布局算法 ​

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

支持的布局算法: ​

• Dagre（默认）：这是Mermaid长期以来使用的经典布局算法。它在简单性和视觉清晰度之间提供了良好的平衡，使其成为大多数图表的理想选择。
• ELK: 对于那些需要更复杂布局功能的用户，尤其是在处理大型或复杂图表时，ELK（Eclipse Layout Kernel）布局提供了高级选项。它提供了更优化的排列方式，可能减少重叠并提高可读性。这不是默认包含的，但需要在集成mermaid时添加，以便支持elk的网站/应用程序。

如何选择布局算法：​

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

在这个例子中，layout: elk 行配置了图表使用 ELK 布局算法，同时具有手绘外观和森林主题。

自定义ELK布局: ​

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

• 要合并平行边，请使用 mergeEdges: true | false。
• 要配置节点放置，请使用nodePlacementStrategy，并提供以下选项：
  • SIMPLE
  • NETWORK_SIMPLE
  • 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时，您可以在初始化调用中包含外观和布局配置。这也是您添加elk加载的地方。