使用Mermaid语法创建关系图

程序员布瓜
2,628 阅读4分钟

使用Mermaid语法创建关系图

drawio是一款强大的图表绘制软件，支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用，则直接输入网址drawon.cn或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能，并实现了云端存储，以及在线共创，分享，协作的功能。

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

许多开发人员更喜欢使用文本描述他们的数据结构和过程，从而避免了上下文切换的需要。在基于markdown的文本描述中记录它们之后，您可以将其插入drawon.cn中，生成图表并自动布局。

插入Mermaid图表

  1. 点击调整图形>插入>高级>Mermaid。或者，单击工具栏上的+图标，然后选择Advanced > Mermaid。

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

​ 

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

在drawon.cn中编辑Mermaid（美人鱼）代码

要查看以这种方式插入的任何图表的Mermaid代码，请选择该图形，然后按Enter。您可以对这里的代码进行更改，然后单击Apply以更新绘图画布上的关系图。

Mermaid语法

图表是通过使用箭头连接线链接文本标签创建的。你可以选择不同的图形，向连接线添加标签，以及设置连接线和图形的样式。

可以阅读Mermaid的文档查看完整的语法和样式选项：mermaid.js.org/#/

图形风格： [rectangle], (rounded renctangle), ((circle)), {diamond}

连接风格： 箭头: A-->B 带点的： A-.-->B 不带箭头 A---B 带标签： A-->|label|B

图表类型： graph, pie, gantt, sequenceDiagram, stateDiagram, classDiagram, erDiagram, journey, C4Context

甘特图： 任务状态：down, active, crit, after section

饼图： tittle

甘特图: 动作： commit, branch, checkout, merge

UML: 生命线： participant activate, 容器： loop, alt, opt, class

信息： 注释：%%， note

查看下面的示例，了解如何使用Mermaid语法在文本中定义各种图表。在drawon.cn中打开这些美人鱼图示例。

流程图

注意：标签可以包括新的行，以获得更清晰的布局。

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)

甘特图

甘特图受到许多项目经理的喜爱，因为他们可以跟踪项目的任务、依赖关系和时间表。在drawon.cn中创建甘特图可能很繁琐。但是如果用文本描述，则容易的多。

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类图

下面是如何从简单的类图模板中绘制。将使用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

饼状图

而你可以构建一个饼状图手动绘制。使用Mermaid语法可以非常容易地获得饼片的准确分布。在Mermaid代码中，您可以使用百分比值，也可以使用每个组的实际值。在下面的示例中，您可以看到哪些天是提交到mxgraph2最忙的日子。

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

您知道吗? Mermaid的语法类似于Graphviz DOT和PlantUML，两者都可以插入到drawon.cn中，从文本描述创建图表。

avatar
文章
阅读
粉丝