Appearance
图语法
¥Diagram Syntax
Mermaid 的语法用于创建图表。你会发现它并不太棘手，一天之内就能学会。接下来的部分将深入探讨每种图表类型的语法。
¥Mermaid's syntax is used to create diagrams. You'll find that it is not too tricky and can be learned in a day. The next sections dive deep into the syntax of each diagram type.
语法与部署和配置一起构成了 Mermaid 的整体。
¥Syntax, together with Deployment and Configuration constitute the whole of Mermaid.
图表示例可以在 Mermaid 在线编辑器 中找到，这也是一个很好的练习区域。
¥Diagram Examples can be found in the Mermaid Live Editor, it is also a great practice area.
语法结构
¥Syntax Structure
人们会注意到，所有图表定义都以图表类型的声明开始，后面是图表及其内容的定义。该声明通知解析器代码应该生成哪种图表。
¥One would notice that all Diagrams definitions begin with a declaration of the diagram type, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate.
示例：下面的代码用于实体关系图，由 erDiagram 声明指定。下面是其中代表的不同 Entities 的定义。
¥Example : The code below is for an Entity Relationship Diagram, specified by the erDiagram declaration. What follows is the definition of the different Entities represented in it.
入门 部分还可以提供一些 mermaid 语法的实用示例。
¥The Getting Started section can also provide some practical examples of mermaid syntax.
图解
¥Diagram Breaking
人们应该小心使用一些可能破坏图表的文本或符号。这些文本或符号很少，并且通常只影响特定类型的图表。下表将持续更新。
¥One should beware the use of some words or symbols that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.
| 图表破坏者 | 原因 | 解决方案 |
|---|---|---|
| 注释 | ||
%%{``}%% | 类似于 指令 混淆渲染器。 | 在使用 %% 的注释中，避免使用“{}”。 |
| 流程图 | ||
| 'end' | "结尾" 这个词可能会导致流程图和序列图中断 | 将它们用引号括起来以防止损坏。 |
| 节点内的节点 | Mermaid 对嵌套形状感到困惑 | 将它们用引号括起来以防止破坏 |
Mermaid 在线编辑器
¥Mermaid Live Editor
现在，你已经了解了不应该添加到图表中的内容，你可以在 Mermaid 在线编辑器 中使用它们。
¥Now, that you've seen what you should not add to your diagrams, you can play around with them in the Mermaid Live Editor.
配置
¥Configuration
配置是 Mermaid 的第三部分，位于部署和语法之后。它涉及在不同部署中定制 Mermaid 的不同方式。
¥Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments.
如果你有兴趣更改和自定义 Mermaid 图，你可以在此处找到适用于 配置 的方法和值。它包括主题。本节将介绍配置 Mermaid 图的行为和外观的不同方法。以下是最常用的方法，它们都与 Mermaid 部署 方法相关。
¥If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for Configuration here. It includes themes. This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams. The following are the most commonly used methods, and they are all tied to Mermaid Deployment methods.
在线编辑器 中的配置部分。
¥Configuration Section in the Live Editor.
你可以在此处编辑某些值以更改图表的行为和外观。
¥Here you can edit certain values to change the behavior and appearance of the diagram.
initialize() 调用
当通过 API 或通过 <script> 标签调用 Mermaid 时使用。
¥Used when Mermaid is called via an API, or through a <script> tag.
指令
允许在渲染图表之前对其进行有限的重新配置。它可以改变图表的字体样式、颜色和其他美学方面。你可以在 %%{ }%% 内传递指令和定义。它可以在图表定义的上方或下方完成。
¥Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside %%{ }%%. It can be done either above or below your diagram definition.
主题操控
使用指令更改 主题 的应用。Theme 是 Mermaid 配置中的一个值，它规定了图表的颜色方案。
¥An application of using Directives to change Themes. Theme is a value within Mermaid's configuration that dictates the color scheme for diagrams.