mermaid应用案例
介绍
关于mermaid
Mermaid 允许您使用文本和代码创建图表和可视化。
它是一个基于 Javascript 的图表和图表工具，它呈现受 Markdown 启发的文本定义以动态创建和修改图表。
参考地址：https://mermaid-js.github.io/mermaid/#/
图标类型
流程图
graph TD;
A-->B;
A-->C;
B-->D;
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!
甘特图
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
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
类图
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
Git图 --！实验
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
实体关系图 --！ 实验
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : 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"
用户旅程图
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
图表语法
flowchart与graph所显示的图形基本相同，但前者在绘制曲线时更加圆润一些。
图形
一个节点（默认）
graph LR
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)]
圆形节点
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
一个开放的链接
graph LR
A --- B
链接上的文字
graph LR
A-- 这是正文 ---B
或者
graph LR
A--- |这是正文|B
带箭头和文本的链接
graph LR
A -->|文本|B
或者
graph LR
A -- 文本 -->B
虚线链接
graph LR;
A -.-> B;
带文本的虚线链接
graph LR;
A -.文本.-> B;
粗线链接
graph LR;
A ==> B;
带文本的粗线链接
graph LR;
A ==文本==> B;
链接的链接
可以在同一行中声明许多链接，如下所示
graph LR
A -- text --> B -- text2 --> C
也可以在同一行中声明多个节点链接，如下所示
graph LR
a --> b & c --> d
然后，您可以以非常有表现力的方式描述依赖关系。就像下面的单线：
graph TB
A & B --> C & D
如果您使用基本语法描述相同的图表，则需要四行。警告一句，这可能会使流程图更难以降价形式阅读。瑞典词lagom浮现在脑海。这意味着，不要太多也不要太少。这也适用于表达性语法。
graph TB
A --> C
A --> D
B --> C
B --> D
新的箭头类型
graph LR
A --. B
B --x C
多向箭头
graph LR
A o--o B
B <--> C
C x--x D
链接的最小长度
流程图中的每个节点最终被指定给渲染图中的一个等级，即基于其链接到的节点的垂直或水平级别（取决于流程图方向）。默认情况下，链接可以跨越任意数量的列组，但您可以通过在链接定义中添加额外的破折号来要求任何链接比其他链接长。
在下面的示例中，在从节点B到节点E的链接中添加了两个额外的破折号，以便它比常规链接跨越两个以上的列组：
graph TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
注意：为了适应其他请求，渲染引擎可能会使链接的长度超过请求的列组数。
当链接标签写在链接的中间时，必须在链接的右侧添加额外的破折号。以下示例与前一个示例等效：
graph TD
A[Start] --> B{Is it?}
B -- Yes --> C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
对于点或粗链接，要添加的字符是等号或点，如下表所示：
| Length | 1 | 2 | 3 |
|---|---|---|---|
| Normal | --- | ---- | ----- |
| Normal with arrow | --> | ---> | ----> |
| Thick | === | ==== | ===== |
| Thick with arrow | ==> | ===> | ====> |
| Dotted | -.- | -..- | -...- |
| Dotted with arrow | -.-> | -..-> | -...-> |
打破语法的特殊字符
为了呈现更麻烦的字符，可以将文本置于引号内。如下例所示：
graph LR
id1["This is the (text) in the box"]
转义字符的实体代码
可以使用此处示例的语法转义字符。
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
给定的数字以10为基数，因此#可以编码为#35;。还支持使用HTML字符名。
子图
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
还可以为子图设置显式id。
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
流程图
使用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
子图中的方向
使用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
相互作用
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
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> 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
类
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96;
CSS类
flowchart LR;
A-->B[AAA<span>BBB</span>]
B-->D
class A cssClass
对图标字体的支持
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?)
顶点和链接之间有空格且不带分号的图声明
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
时序图
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
语法
参与者
sequenceDiagram
participant Alice
participant Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Aliases
参与者可以有一个方便的标识符和一个描述性标签。
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
箭头类型
目前支持六种类型的箭头：
| Type | Description |
|---|---|
| -> | Solid line without arrow |
| –> | Dotted line without arrow |
| ->> | Solid line with arrowhead |
| –>> | Dotted line with arrowhead |
| -x | Solid line with a cross at the end |
| –x | Dotted 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
还有一种快捷方式，在消息箭头后添加+/-后缀：
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
可以为同一参与者叠加激活：
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!
