Mermaid的使用

Mermaid的使用
 最后更新于 2025年05月14日 14:18:42

简介

Mermaid 可以使用文本和代码创建图表和可视化效果。它是一种基于 JavaScript 的图表和图表工具，可呈现受 Markdown 启发的文本定义以动态创建和修改图表。本质是一种标记语言，借由一个解析库 将文本 翻译渲染 成 图画。官方手册

Flowchart（流程图）

流程图方向

TD、TB：从上往下

BT：从下往上

RL：从右往左

LR：从左往右

flowchart TD
Start --> Stop

flowchart TD
Start --> Stop

节点形状

默认情况下流程图的节点形状为直角矩形，可通过括号的组合来改变流程图节点的形状

flowchart
  默认形状
  C(圆角矩形)
  D([椭圆])
  E[[子程序形状]]
  F[(圆柱形)]
  G((圆形))
  H>不对称形状]
  I{菱形}
  J{{六边形}}
  K[/平行四边形/]
  L[\\反向平行四边形\\]
  M[/梯形\\]

flowchart
  默认形状
  C(圆角矩形)
  D([椭圆])
  E[[子程序形状]]
  F[(圆柱形)]
  G((圆形))
  H>不对称形状]
  I{菱形}
  J{{六边形}}
  K[/平行四边形/]
  L[\\反向平行四边形\\]
  M[/梯形\\]

节点间的连线

graph TB
  A --> B
  C --- D
  E -- Run! --- F
  G ---|Run!| H
  I -.- J
  K .-> L
  M -.Run!.-> N
  O ==Run!==> P
  Q --Run!--> R --stop!--> S

graph TB
  A --> B
  C --- D
  E -- Run! --- F
  G ---|Run!| H
  I -.- J
  K .-> L
  M -.Run!.-> N
  O ==Run!==> P
  Q --Run!--> R --stop!--> S

flowchart TB
  T--> U & V --> W
  X & Y --> Z & ZZ

flowchart TB
  T--> U & V --> W
  X & Y --> Z & ZZ

特殊类型的连线

flowchart和graph比连线变得平滑了些许，而且flowchart 有更多的连线类型

flowchart TB
  A --o B --x C & D
  E & F --> G &  H
  I <--> J
  K x--x L
  M o--o N

flowchart TB
  A --o B --x C & D
  E & F --> G &  H
  I <--> J
  K x--x L
  M o--o N

较长连线

下面的代码要在 8.8 以上的 mermaid 上才能正常运行

graph TB
  subgraph one
    A[A0] --> B{B0}
    B -->|Yes| C[OK0]
    C --> D[Rethink0]
    D --> B
    B ----> |No| E[End0]
  end
  subgraph two
    F[A1] --> G{B1}
    G -->|Yes| H[OK1]
    H--> I[Rethink1]
    I --> G
    G -- NO ----> J[End1]
  end

graph TB
  subgraph one
    A[A0] --> B{B0}
    B -->|Yes| C[OK0]
    C --> D[Rethink0]
    D --> B
    B ----> |No| E[End0]
  end
  subgraph two
    F[A1] --> G{B1}
    G -->|Yes| H[OK1]
    H--> I[Rethink1]
    I --> G
    G -- NO ----> J[End1]
  end

更多线的修饰符:

Length123
Normal------------
Normal with arrow-->--->---->
Thick============
Thick with arrow==>===>====>
Dotted-.--..--...-
Dotted with arrow-.->-..->-...->

复杂的注释信息

在写注释的时候可能会使用到一些符号表情，这些符号表情可能会破坏代码结构，可以使用双引号将注释信息转成字符串

graph LR
  A--"Run! && ❤❤ "-->B--"?stop!"-->C

graph LR
  A--"Run! && ❤❤"-->B--"?stop!"-->C

转义字符

graph LR
  A["A double quote:#quot;"] -->B["A dec char:#9829;"]

graph LR
  A["A double quote:#quot;"] -->B["A dec char:#9829;"]

多层嵌套(子图)

为流程添加子层

graph TB
  c1-->a2
  subgraph one
    a1-->a2
  end
  subgraph two
    b1-->b2
  end
  subgraph three
    c1-->c2
  end

graph TB
  c1-->a2
  subgraph one
    a1-->a2
  end
  subgraph two
    b1-->b2
  end
  subgraph three
    c1-->c2
  end

graph TB
  c1-->a2
  subgraph ide1 [one]
    a1-->a2
  end

graph TB
  c1-->a2
  subgraph ide1 [one]
    a1-->a2
  end

Sequence Diagram（时序图）

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!

Gantt diagram（甘特图）

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

Class Diagram（类图）

classDiagram
  direction RL
  class Student {
    -idCard : IdCard
  }
  class IdCard{
    -id : int
    -name : string
  }
  class Bike{
    -id : int
    -name : string
  }
  Student "1" --o "1" IdCard : carries
  Student "1" --o "1" Bike : rides

classDiagram
  direction RL
  class Student {
    -idCard : IdCard
  }
  class IdCard{
    -id : int
    -name : string
  }
  class Bike{
    -id : int
    -name : string
  }
  Student "1" --o "1" IdCard : carries
  Student "1" --o "1" Bike : rides

Git图-实验

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

Entity Relationship Diagram（实体关系图）

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey Diagram（用户旅程图）

journey
  title My working day
  section Go to work
  Make tea: 5: Me
  Go upstairs: 3: Me
  Do work: 1: Me, Cat
  section Go home
  Go downstairs: 5: Me
  Sit down: 5: Me

journey
  title My working day
  section Go to work
  Make tea: 5: Me
  Go upstairs: 3: Me
  Do work: 1: Me, Cat
  section Go home
  Go downstairs: 5: Me
  Sit down: 5: Me

Pie（饼图）

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

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