图表语法¶
Mermaid 的语法是用来创建图表的。你会发现它并不复杂，可以在一天之内学会。接下来的章节将深入研究每种图表类型的语法。
语法，与部署和配置一起构成了 Mermaid 的整体。
图例可以在 Mermaid 实时编辑器 中找到，它也是一个很好的实践区。
语法结构¶
人们会注意到，所有的 图定义都以图类型的声明开始，然后是图的定义和它的内容。这个声明通知解析器，代码应该生成哪种图。
例子：下面的代码是一个实体关系图，由 erDiagram 声明指定。下面是它所代表的不同 Entities 的定义。
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
入门 部分也可以提供一些 mermaid 语法的实际例子。
图表破坏¶
人们应该 小心使用一些可以破坏图表的词语或符号。这些词或符号很少，而且往往只影响特定类型的图。下面的表格将不断被更新。
图表破坏 |
原因 |
解决 |
|---|---|---|
注释 |
||
类似于 Directives 混淆了渲染器。 |
在使用 |
|
流程图 |
||
‘end’ |
词 “End” 会导致流程图和序列图的中断 |
用引号把它们包起来，防止破损。 |
Mermaid 被嵌套的形状所迷惑 |
用引号包住它们，以防止破坏 |
Mermaid Live Editor¶
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¶
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.
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.
The initialize() call,¶
Used when Mermaid is called via an API, or through a <script> tag.
Directives,¶
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 Manipulation:¶
An application of using Directives to change Themes. Theme is a value within Mermaid’s configuration that dictates the color scheme for diagrams.