十分钟入门mermaind

发表于 分类于 阅读次数： 本文字数： 4.6k 阅读时长 ≈ 12 分钟

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改,广泛集成于许多 Markdown 编辑器中。

Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。

Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。

vs code中需要安装Markdown Preview Mermaid Support扩展启用支持

官方语法示例

流程图

Mermaid流程图 在markdown中基本语法如下：

```mermaid
flowchart 方向描述
  图表中的其他语句...
```
方向描述 含义
TB 从上到下
BT 从下到上
RL 从右到左
LR 从左到右

后面的教程为了方便起见,省略掉markdown代码块相关语法,只写mermaid语法

节点形状

flowchart BT
  id
  id1(圆角)
  id2([体育场])
  id3[[子程序]]
  id4[(数组库)]
  id5((圆形))
  id6>不对称]
  id7{菱形}
  id8{{六边形}}
  id9[/平行/]
  id10[\梯形/]
  id11(((双园)))

如果节点的文字中包含标点符号，需要时用双引号包裹起来

flowchart BT
  id
  id1(圆角)
  id2([体育场])
  id3[[子程序]]
  id4[(数组库)]
  id5((圆形))
  id6>不对称]
  id7{菱形}
  id8{{六边形}}
  id9[/平行/]
  id10[\梯形/]
  id11(((双园)))

连线形状

使用至少三个-或>或者.或者=或者o或者x连接节点.

处于中间的符号每多一个，则长度增加一个单位

Length 1 2 3
Normal --- ---- -----
NormalWithArrow --> ---> ---->
Thick === ==== =====
ThickWithArrow ==> ===> ====>
Dotted -.- -..- -...-
DottedWithArrow -.-> -..-> -...->

多重链：可以使用&字符,前后用空格隔开

flowchart BT
  a ---- |直线2| b
  c o---o |圆点2|d
  c x---x |叉叉2|d
  e <---> |箭头2| f 
  g -..- |虚线2|h
  i ==> |粗实线1| j & l -.虚线1.-> k
  m & n --> o & p-->q
  style c fill:#f9f
flowchart BT
  a ---- |直线2| b
  c o---o |圆点2|d
  c x---x |叉叉2|d
  e <---> |箭头2| f 
  g -..- |虚线2|h
  i ==> |粗实线1| j & l -.虚线1.-> k
  m & n --> o & p-->q
  style c fill:#f9f

长度控制如下表所示

长度 1 2 3
普通 --- ---- -----
带箭头 --> ---> ---->
加粗 === ==== =====
加粗带箭头 ==> ===> ====>
点线 -.- -..- -...-
点线带箭头 -.-> -..-> -...->

子图

子图使用direction来设置方向

flowchart LR
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

    three --> one --> two
    c2 --> a1

    subgraph TOP
      direction TB
      subgraph B1
          direction RL
          i1 -->f1
      end
      subgraph B2
          direction BT
          i2 -->f2
      end
    end
  A --> TOP --> B
  B1 --> B2
flowchart LR
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

    three --> one --> two
    c2 --> a1

    subgraph TOP
      direction TB
      subgraph B1
          direction RL
          i1 -->f1
      end
      subgraph B2
          direction BT
          i2 -->f2
      end
    end
  A --> TOP --> B
  B1 --> B2

时序图

序列图是一种交互图，显示流程如何相互操作以及以何种顺序运行。

参与者

participant:参与者,使用文字框表示 actor:参与者,使用小人图表示 as:指定别名来简化 +:参与者前添加+号,表示激活此消息接收者.可嵌套,必须配对 -:参与者前添加-号,表示反激活消息发送者.可嵌套,必须配对

参与者按在图表源文本中的出现顺序呈现。有时，可能希望以与参与者在第一条消息中的显示顺序不同的顺序显示参与者。这时就需要首先单独声明参与者,而不是在消息发送中默认声明参与者

sequenceDiagram
    actor A as Alice
    participant J as John
    A->>+J: Hello John, how are you?
    A->>+J: John, can you hear me?
    J-->>-A: Hi Alice, I can hear you!
    J-->>-A: I feel great!
sequenceDiagram
    actor A as Alice
    participant J as John
    A->>+J: Hello John, how are you?
    A->>+J: John, can you hear me?
    J-->>-A: Hi Alice, I can hear you!
    J-->>-A: I feel great!

消息发送

消息可以是两个，可以实心显示或用虚线显示。[Actor][Arrow][Actor]:Message text

类型 描述
-> 不带箭头的实线
--> 不带箭头的虚线
->> 带箭头的实线
-->> 带箭头的虚线
-x 末端有十字的实线
--x 末端有十字的虚线。
-) 末端有一个打开箭头的实线（异步）
--) 末尾带有打开箭头的虚线（异步）

创建笔记和循环

可以向序列图添加笔记。还可以创建跨越两个参与者的笔记 通过Note创建笔记,用过loop创建循环

sequenceDiagram
    participant Alice
    participant John
    Note right of John: 仔细倾听
    Note left of Alice: 正在敲门
    Alice->John: 胃,你好吗
    Note over Alice,John: 阳光明媚的早上
    loop Alice敲门
        John-->>Alice: 不要停!
    end
sequenceDiagram
    participant Alice
    participant John
    Note right of John: 仔细倾听
    Note left of Alice: 正在敲门
    Alice->John: 胃,你好吗
    Note over Alice,John: 阳光明媚的早上
    loop Alice敲门
        John-->>Alice: 不要停!
    end

分支结构

用过alt开启分支,else转换分支,end结束分支,opt可选分支

sequenceDiagram
    Alice->>Bob: 病否?
    alt 病了
        Bob->>Alice: 已躺平
    else 没病
        Bob->>Alice: 走两步
    end
    opt 又病又不病
        Bob->>Alice: 量子力学
    end
sequenceDiagram
    Alice->>Bob: 病否?
    alt 病了
        Bob->>Alice: 已躺平
    else 没病
        Bob->>Alice: 走两步
    end
    opt 又病又不病
        Bob->>Alice: 量子力学
    end

并发结构

par开启并发,and添加并发者,end结束并发.可以嵌套并行块。

sequenceDiagram
    par 去吧
        Alice->>Bob: Go help John
    and 去吧
        Alice->>John: I want this done today
        par 快来
            John->>Charlie: Can we do this today?
        and 快来
            John->>Diana: Can you help us today?
        end
    end
sequenceDiagram
    par 去吧
        Alice->>Bob: Go help John
    and 去吧
        Alice->>John: I want this done today
        par 快来
            John->>Charlie: Can we do this today?
        and 快来
            John->>Diana: Can you help us today?
        end
    end

修改背景颜色和自动编号

用过rect启用又给rgb,end结束.支持嵌套

autonumber开启消息编号

sequenceDiagram
    participant Alice
    participant John
    autonumber
    rect rgb(191, 223, 255)
    note right of Alice: Alice calls John.
    Alice->>+John: Hello John, how are you?
    rect rgb(200, 150, 255)
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    end
    John-->>-Alice: I feel great!
    end
    Alice ->>+ John: Did you want to go to the game tonight?
    John -->>- Alice: Yeah! See you there.
sequenceDiagram
    participant Alice
    participant John
    autonumber
    rect rgb(191, 223, 255)
    note right of Alice: Alice calls John.
    Alice->>+John: Hello John, how are you?
    rect rgb(200, 150, 255)
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    end
    John-->>-Alice: I feel great!
    end
    Alice ->>+ John: Did you want to go to the game tonight?
    John -->>- Alice: Yeah! See you there.

添加链接菜单

通过links对参与者添加一个下拉菜单,菜单项由json指定

sequenceDiagram
    participant Alice
    participant John
    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
sequenceDiagram
    participant Alice
    participant John
    links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
    links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

类图

有关uml类图概念,参考这一篇博文uml类图

定义类

使用特定的标记文本对类进行注释，该文本类似于类的元数据，从而清楚地表明其性质。

<<Interface>> To represent an Interface class
<<abstract>> To represent an abstract class
<<Service>> To represent a service class
<<enumeration>> To represent an enum

使用 direction 语句来设置图将呈现的方向

classDiagram
direction TB
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount) bool
    +withdrawal(amount) int
}
class Square~Shape~{
    int id
    List~int~ position
    setPoints(List~int~ points)
    getPoints() List~int~
}
class Shape{
    <<interface>>
    noOfVertices
    draw()
}
class Color{
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}

成员可见性

+ Public
- Private
# Protected
~ Package/Internal

定义关系

可在关系后添加注释

classDiagram
classA <|-- classB:继承
classC *-- classD:组合
classE o-- classF:聚合
classG <-- classH:关联
classI -- classJ:连接实线
classK <.. classL:依赖
classM <|.. classN:实现
classO .. classP:连接虚线
classDiagram
classA <|-- classB:继承
classC *-- classD:组合
classE o-- classF:聚合
classG <-- classH:关联
classI -- classJ:连接实线
classK <.. classL:依赖
classM <|.. classN:实现
classO .. classP:连接虚线

关系的多重性

  • 1 Only 1
  • 0..1 Zero or One
  • 1..* One or more
  • * Many
  • n n {where n>1}
  • 0..n zero to n {where n>1}
  • 1..n one to n {where n>1}
classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : Contains

饼图

没啥好说的.showData可选,是否开启legend上的数字.title可选,是否显示标题

pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5