Mermaid 是一种类似于 Markdown 的语法，您可以在其中使用文本来描述和自动生成图表。使用 Mermaid 的受 Markdown 启发的语法，您可以生成流程图、UML 图、饼图、甘特图等。
许多开发人员更喜欢使用文本来描述他们的数据结构和流程，从而避免上下文切换的需要。在基于 Markdown 的文本描述中记录它们之后，您可以将其插入到 diagrams.net 编辑器中以生成图表并自动对其进行布局。
插入美人鱼图
-
单击排列 > 插入 > 高级 > 美人鱼。或者，单击
+工具栏中的图标，然后选择“高级”>“美人鱼”。
单击排列 > 插入 > 高级 > 美人鱼以从受美人鱼 Markdown 启发的代码创建图表 -
将您的文本粘贴到文本框中，然后单击“插入”。
以美人鱼语法粘贴文本，然后单击插入
您的图表将根据您的文本自动创建和格式化，并作为单个形状插入到绘图画布上。
在 Diagrams.net 中编辑美人鱼代码
要查看以这种方式插入的任何图表的美人鱼代码，请选择形状，然后按Enter。您可以在此处更改代码，然后单击应用以更新绘图画布上的图表。
美人鱼语法
图表是通过使用箭头连接器链接文本标签来创建的。您可以选择不同的形状、为连接线添加标签，以及为连接线和形状设置样式。
| 形状样式 | [rectangle] | (rounded rectangle) |
| | ((circle)) | {diamond} |
| 连接器样式 | 箭： A-->B | 加点： A-.-->B |
| | 没有箭头： A---B | 带标签： A-->|label|B |
| 图表类型 | graph | pie |
| | gantt | sequenceDiagram |
| | stateDiagram | classDiagram |
| | gitgraph | |
| 甘特图 | 任务状态：done, active, crit,after | section |
| 馅饼 | title | |
| gitgraph | 动作：commit, branch, checkout,merge | |
| UML | 生命线：participant | activate |
| | 容器：loop, alt,opt | class |
| 信息 | 评论： %% | note |
查看下面的示例，了解如何使用 Mermaid 语法定义文本中的各种图表。在 diagrams.net 中打开这些示例美人鱼图。
流程图
注意：标签可以包含新行以实现更清晰的布局。
graph TD
A(Coffee machine <br>not working) --> B{Machine has power?}
B -->|No| H(Plug in and turn on)
B -->|Yes| C{Out of beans or water?} -->|Yes| G(Refill beans and water)
C -->|No| D{Filter warning?} -->|Yes| I(Replace or clean filter)
D -->|No| F(Send for repair)
甘特图
甘特图受到许多项目经理的喜爱，因为它们可以跟踪项目的任务、依赖关系和时间表。虽然在 diagrams.net 中创建甘特图可能很繁琐，但从文本描述中生成甘特图要容易得多。
gantt
title Example Gantt diagram
dateFormat YYYY-MM-DD
section Team 1
Research & requirements :done, a1, 2020-03-08, 2020-04-10
Review & documentation : after a1, 20d
section Team 2
Implementation :crit, active, 2020-03-25 , 20d
Testing :crit, 20d
UML类图
以下是来自 diagrams.net 的简单类图模板在 Mermaid 语法中的外观。
classDiagram
Person <|-- Student
Person <|-- Professor
Person : +String name
Person : +String phoneNumber
Person : +String emailAddress
Person: +purchaseParkingPass()
Address "1" <-- "0..1" Person:lives at
class Student{
+int studentNumber
+int averageMark
+isEligibleToEnrol()
+getSeminarsTaken()
}
class Professor{
+int salary
}
class Address{
+String street
+String city
+String state
+int postalCode
+String country
-validate()
+outputAsLabel()
}
UML序列图
UML 序列图用于显示完成流程所采取的步骤和参与者。这些图在软件开发中被大量使用。
sequenceDiagram
autonumber
Student->>Admin: Can I enrol this semester?
loop enrolmentCheck
Admin->>Admin: Check previous results
end
Note right of Admin: Exam results may <br> be delayed
Admin-->>Student: Enrolment success
Admin->>Professor: Assign student to tutor
Professor-->>Admin: Student is assigned
饼形图
虽然您可以手动构建饼图 diagrams.net，但使用 Mermaid 语法可以很容易地准确获得饼切片的正确分布。在美人鱼代码中，您可以使用百分比值，也可以使用每组的实际值。在下面的示例中，您可以看到哪几天最繁忙的提交到 GitHub 上的 diagrams.net 主存储库。
pie title Commits to mxgraph2 on GitHub
"Sunday" : 4
"Monday" : 5
"Tuesday" : 7
"Wednesday" : 3
您知道吗： Mermaid 的语法类似于 Graphviz DOT 和 PlantUML，两者都可以插入到 diagrams.net 中以根据文本描述创建图表。
