Mermaid 是一种类似于 Markdown 的语法,您可以在其中使用文本来描述和自动生成图表。使用 Mermaid 的受 Markdown 启发的语法,您可以生成流程图、UML 图、饼图、甘特图等。
许多开发人员更喜欢使用文本来描述他们的数据结构和流程,从而避免上下文切换的需要。在基于 Markdown 的文本描述中记录它们之后,您可以将其插入到 diagrams.net 编辑器中以生成图表并自动对其进行布局。
插入美人鱼图
-
单击排列 > 插入 > 高级 > 美人鱼。或者,单击
+
工具栏中的图标,然后选择“高级”>“美人鱼”。
-
将您的文本粘贴到文本框中,然后单击“插入”。
您的图表将根据您的文本自动创建和格式化,并作为单个形状插入到绘图画布上。
在 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 中以根据文本描述创建图表。