Bootstrap

【工具系列0】mermaid应用案例

mermaid应用案例

介绍

关于mermaid

Mermaid 允许您使用文本和代码创建图表和可视化。

它是一个基于 Javascript 的图表和图表工具，它呈现受 Markdown 启发的文本定义以动态创建和修改图表。

参考地址：https://mermaid-js.github.io/mermaid/#/

图标类型

流程图
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
A
B
C
D
序列图
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
Alice Bob John Hello John, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts prevail! Great! How about you? Jolly good! Alice Bob John
甘特图
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 Completed task Active task Future task Future task2 A section Adding GANTT diagram to mermaid
类图
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
Cool
Where am i?
Cool label
Class01
int chimp
int gorilla
size()
AveryLongClass
Class03
Class04
Class05
Class06
Class07
Object[] elementData
equals()
Class08
Class09
C2
C3
Git图 --！实验
gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

master, bc52c63

8909da9

02776c9

0e6953a

newbranch, b653fd5

1f494f3
实体关系图 --！ 实验
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses 
erDiagram
          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
          CUSTOMER ||--o{ ORDER : places
          CUSTOMER ||--o{ INVOICE : "liable for"
          DELIVERY-ADDRESS ||--o{ ORDER : receives
          INVOICE ||--|{ ORDER : covers
          ORDER ||--|{ ORDER-ITEM : includes
          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
CUSTOMER DELIVERY-ADDRESS ORDER INVOICE ORDER-ITEM PRODUCT-CATEGORY PRODUCT has places liable for receives covers includes contains ordered in
用户旅程图
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
Cat Me
Go to work
Go to work Me
Make tea
Make tea Me
Go upstairs
Go upstairs Me Cat
Do work
Do work
Go home
Go home Me
Go downstairs
Go downstairs Me
Sit down
Sit down My working day

图表语法

flowchart与graph所显示的图形基本相同，但前者在绘制曲线时更加圆润一些。

图形

一个节点（默认）
graph LR
	id
id
带文本的节点

也可以在不同于 id 的框中设置文本。如果多次这样做，它将是为将使用的节点找到的最后一个文本。此外，如果您稍后为节点定义边，则可以省略文本定义。渲染框时将使用先前定义的那个。

graph LR
	id1[这是框中的文字]
这是框中的文字
图形

该语句声明了流程图的方向。

这声明流程图从上到下（TD或TB）定向。

graph TD
	开始-->停止
开始
停止

这表明流程图是从左到右的（LR）。

graph LR
	开始-->停止
开始
停止

流程图方向

  • TB - 从上到下
  • TD - 自上而下/与自上而下相同
  • BT - 自下而上
  • RL - 从右到左
  • LR-从左到右

节点形状

具有圆边的节点
graph LR
	id1([这是框中的文字])
这是框中的文字
子程序形状中的节点
graph LR
	id1[[这是框中的文字]]
这是框中的文字
圆柱形节点
graph LR
	id1[(Database)]
Database
圆形节点
graph LR
	id1((这是圈中的文字))
这是圈中的文字
不对称形状的节点
graph LR
	id1>这是框中的文字]
这是框中的文字
一个节点（菱形）
graph LR
	id1{这是框中的文本}
这是框中的文本
六边形节点
graph LR
	id1{{这是框中文本}}
这是框中文本
平行四边形
graph LR
	id1[/这是框中文本/]
这是框中文本
反向平行四边形
graph LR
	id1[\这是框中文本\]
这是框中文本
梯形
graph LR
	id1[/这是框中文本\]
这是框中文本
倒梯形
graph LR
	id1[\这是框中文本/]
这是框中文本

节点之间的链接

节点可以与链接/边连接。可以有不同类型的链接或将文本字符串附加到链接。

带箭头的链接
graph LR
	A-->B
A
B
一个开放的链接
graph LR
	A --- B
A
B
链接上的文字
graph LR
	A-- 这是正文 ---B
这是正文
A
B

或者

graph LR
	A--- |这是正文|B
这是正文
A
B
带箭头和文本的链接
graph LR
	A -->|文本|B
文本
A
B

或者

graph LR
	A -- 文本 -->B
文本
A
B
虚线链接
graph LR;
	A -.-> B;
A
B
带文本的虚线链接
graph LR;
	A -.文本.-> B;
文本
A
B
粗线链接
graph LR;
	A ==> B;
A
B
带文本的粗线链接
graph LR;
	A ==文本==> B;
文本
A
B
链接的链接

可以在同一行中声明许多链接，如下所示

graph LR
	A --  text  --> B --  text2  --> C
text
text2
A
B
C

也可以在同一行中声明多个节点链接，如下所示

graph LR
	a --> b & c --> d
a
b
c
d

然后，您可以以非常有表现力的方式描述依赖关系。就像下面的单线：

graph TB
	A & B --> C & D
A
B
C
D

如果您使用基本语法描述相同的图表，则需要四行。警告一句，这可能会使流程图更难以降价形式阅读。瑞典词lagom浮现在脑海。这意味着，不要太多也不要太少。这也适用于表达性语法。

graph TB
	A --> C 
	A --> D 
	B --> C 
	B --> D
A
C
D
B
新的箭头类型
graph LR
	A --. B 
	B --x C
A
B
C
多向箭头
graph LR
    A o--o B
    B <--> C
    C x--x D
A
B
C
D
链接的最小长度

流程图中的每个节点最终被指定给渲染图中的一个等级，即基于其链接到的节点的垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量的列组，但您可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接长。

在下面的示例中，在从节点B到节点E的链接中添加了两个额外的破折号，以便它比常规链接跨越两个以上的列组：

graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
Yes
No
Start
Is it?
OK
Rethink
End

注意：为了适应其他请求，渲染引擎可能会使链接的长度超过请求的列组数。

当链接标签写在链接的中间时，必须在链接的右侧添加额外的破折号。以下示例与前一个示例等效：

graph TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]
Yes
No
Start
Is it?
OK
Rethink
End

对于点或粗链接，要添加的字符是等号或点，如下表所示：

Length123
Normal------------
Normal with arrow-->--->---->
Thick============
Thick with arrow==>===>====>
Dotted-.--..--...-
Dotted with arrow-.->-..->-...->
打破语法的特殊字符

为了呈现更麻烦的字符，可以将文本置于引号内。如下例所示：

graph LR
    id1["This is the (text) in the box"]
This is the (text) in the box
转义字符的实体代码

可以使用此处示例的语法转义字符。

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

给定的数字以10为基数，因此#可以编码为#35;。还支持使用HTML字符名。

子图
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
three
one
c2
c1
two
b2
b1
a2
a1

还可以为子图设置显式id。

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end
one
a2
a1
c1
流程图

使用graphtype流程图，还可以设置与子图之间的边，如下面的流程图所示。

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2
three
one
c2
c1
two
b2
b1
a2
a1
子图中的方向

使用graphtype流程图，可以使用direction语句设置子图将呈现的方向，如本例所示。

因为在Typora 不支持direction，所以这里的展示结果修改了这部分内容

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
TOP
B1
f1
i1
B2
f2
i2
A
B
相互作用
flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank
    click C href "http://www.github.com" _blank
    click D href "http://www.github.com" "Open this in a new tab" _blank
A
B
C
D
E 
graph LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C
text
text2
A
B
C

设置节点的样式

可以对节点应用特定样式，例如较厚的边框或不同的背景色。

flowchart LR
    id1(Start)-->id2(Stop)
    id3(Start)-->id4(Stop)
    id5(Start)-->id6(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:1px,height:50
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 3,width:100
    style id3 fill:#f6e,stroke:#103,stroke-width:3px
    style id4 fill:#5af,stroke:#f16,stroke-width:4px,color:#fff,stroke-dasharray: 6
    style id5 fill:#f3f,stroke:#933,stroke-width:5px
    style id6 fill:#b4f,stroke:#361,stroke-width:6px,color:#fff,stroke-dasharray: 9
Start
Stop
Start
Stop
Start
Stop
类
flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;
A
B
CSS类
flowchart LR;
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass
A
AAABBB
D
对图标字体的支持
flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?)
for peace
forbidden
A perhaps?
顶点和链接之间有空格且不带分号的图声明
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

时序图

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
Alice John Hello John, how are you? Great! See you later! Alice John

语法

参与者
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hi Bob
    Bob->>Alice: Hi Alice
Alice Bob Hi Bob Hi Alice Alice Bob
Aliases

参与者可以有一个方便的标识符和一个描述性标签。

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!
Alice John Hello John, how are you? Great! Alice John

箭头类型

目前支持六种类型的箭头：

TypeDescription
->Solid line without arrow
–>Dotted line without arrow
->>Solid line with arrowhead
–>>Dotted line with arrowhead
-xSolid line with a cross at the end
–xDotted line with a cross at the end.
-)Solid line with an open arrow at the end (async)
–)Dotted line with a open arrow at the end (async)

激活

可以激活和停用参与者。（反）激活可以是专用声明：

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
Alice John Hello John, how are you? Great! Alice John

还有一种快捷方式，在消息箭头后添加+/-后缀：

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!
Alice John Hello John, how are you? Great! Alice John

可以为同一参与者叠加激活：

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

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Fragment 的使用
k8s学习配置harbor的nfs对接以及配置为helm仓库
机器数，真值，原码，补码，反码
js 去除数组中为0的元素
挨踢人生路 记我的10年18家工作经历
最佳实践丨企业上云后资源容量如何规划和实施
postgre怎么写个存储过程实现找到每个月第一天的函数
Zoom视频会议软件
正则表达式
ssm在线教学质量评价系统毕业设计源码141550
;