使用 Mermaid 语法创建图表

Mermaid 是一种类似于 Markdown 的语法，您可以在其中使用文本来描述和自动生成图表。使用 Mermaid 的受 Markdown 启发的语法，您可以生成流程图、UML 图、饼图、甘特图等。

许多开发人员更喜欢使用文本来描述他们的数据结构和流程，从而避免上下文切换的需要。在基于 Markdown 的文本描述中记录它们之后，您可以将其插入到 diagrams.net 编辑器中以生成图表并自动对其进行布局。

插入美人鱼图

1. 单击排列 > 插入 > 高级 > 美人鱼。或者，单击+工具栏中的图标，然后选择“高级”>“美人鱼”。
   

   单击排列 > 插入 > 高级 > 美人鱼以从受美人鱼 Markdown 启发的代码创建图表

2. 将您的文本粘贴到文本框中，然后单击“插入”。
   

   以美人鱼语法粘贴文本，然后单击插入

您的图表将根据您的文本自动创建和格式化，并作为单个形状插入到绘图画布上。

在 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 
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 中打开此示例

甘特图

甘特图受到许多项目经理的喜爱，因为它们可以跟踪项目的任务、依赖关系和时间表。虽然在 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

从美人鱼代码插入的甘特图示例

在 diagrams.net 中打开此示例

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()  
    }           

美人鱼语法中来自 diagrams.net 的简单类示例模板

在 diagrams.net 中打开此示例

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 
 be delayed
    Admin-->>Student: Enrolment success
    Admin->>Professor: Assign student to tutor
    Professor-->>Admin: Student is assigned

使用 Mermaid 语法插入的简单序列图

在 diagrams.net 中打开此示例

饼形图

虽然您可以手动构建饼图 diagrams.net，但使用 Mermaid 语法可以很容易地准确获得饼切片的正确分布。在美人鱼代码中，您可以使用百分比值，也可以使用每组的实际值。在下面的示例中，您可以看到哪几天最繁忙的提交到 GitHub 上的 diagrams.net 主存储库。

pie title Commits to mxgraph2 on GitHub
    "Sunday" : 4
    "Monday" : 5
    "Tuesday" : 7
  "Wednesday" : 3

每天提交到 mxgraph2 GitHub 存储库，使用 Mermaid 语法插入到 diagrams.net

在 diagrams.net 中打开此示例

您知道吗： Mermaid 的语法类似于 Graphviz DOT 和 PlantUML，两者都可以插入到 diagrams.net 中以根据文本描述创建图表。

查看您可以插入到图表中的所有元素