Markdown图表：流程图：从左到右

[mermaid]
graph LR
A[主题开始]
B[主题第二]
C[子题第一]
D[子题第二]
A --> B
B -->|否| C
B -->|是| D
[/mermaid]

graph LR
A[主题开始]
B[主题第二]
C[子题第一]
D[子题第二]
A --> B
B -->|否| C
B -->|是| D

---

[mermaid]graph LR
start[开始] --> input[输入A,B,C]
input --> conditionA[A是否大于B]
conditionA -- YES --> conditionC[A是否大于C]
conditionA -- NO --> conditionB[B是否大于C]
conditionC -- YES --> printA[输出A]
conditionC -- NO --> printC[输出C]
conditionB -- YES --> printB[输出B]
conditionB -- NO --> printC[输出C]
printA --> stop[结束]
printC --> stop
printB --> stop
[/mermaid]

graph LR
start[开始] --> input[输入A,B,C]
input --> conditionA[A是否大于B]
conditionA -- YES --> conditionC[A是否大于C]
conditionA -- NO --> conditionB[B是否大于C]
conditionC -- YES --> printA[输出A]
conditionC -- NO --> printC[输出C]
conditionB -- YES --> printB[输出B]
conditionB -- NO --> printC[输出C]
printA --> stop[结束]
printC --> stop
printB --> stop

---

[mermaid]
graph LR
start[开始] --> input[输入A,B,C]
input --> conditionA[A是否大于B]
conditionA -- YES --> conditionC[A是否大于C]
conditionA -- NO --> conditionB[B是否大于C]
conditionC -- YES --> printA[输出A]
conditionC -- NO --> printC[输出C]
conditionB -- YES --> printB[输出B]
conditionB -- NO --> printC[输出C]
printA --> stop[结束]
printC --> again[重来]
printB --> pause[暂停]
[/mermaid]

graph LR
start[开始] --> input[输入A,B,C]
input --> conditionA[A是否大于B]
conditionA -- YES --> conditionC[A是否大于C]
conditionA -- NO --> conditionB[B是否大于C]
conditionC -- YES --> printA[输出A]
conditionC -- NO --> printC[输出C]
conditionB -- YES --> printB[输出B]
conditionB -- NO --> printC[输出C]
printA --> stop[结束]
printC --> again[重来]
printB --> pause[暂停]

---

[mermaid]graph LR;
client-->core;
client-->common;
core-->common;
common-->portal;
common-->Biz;
Biz-->ConfigService;
Biz-->AdminService;
[/mermaid]

graph LR;
client-->core;
client-->common;
core-->common;
common-->portal;
common-->Biz;
Biz-->ConfigService;
Biz-->AdminService;

---

[mermaid]
graph LR
a-->b
b-->c
b-->d
linkStyle 0 stroke-width:2px;
linkStyle 1 stroke:#008000,stroke-width:2px;
linkStyle 2 stroke:#008000,stroke-width:2px;
[/mermaid]

graph LR
a-->b
b-->c
b-->d
linkStyle 0 stroke-width:2px;
linkStyle 1 stroke:#008000,stroke-width:2px;
linkStyle 2 stroke:#008000,stroke-width:2px;

---

[mermaid]
graph LR
a-->b
linkStyle 0 stroke:#4b4b4b,stroke-width:1px;
[/mermaid]

graph LR
a-->b
linkStyle 0 stroke:#4b4b4b,stroke-width:1px;

---

[mermaid]
graph LR
a-->b
linkStyle 0 stroke:#FF0000,stroke-width:1px;
[/mermaid]
graph LR
a-->b
linkStyle 0 stroke:#FF0000,stroke-width:1px;

微信扫二维码转发分享

[mermaid]
graph LR
id1[Snow#FFFAFA]
id2[WhiteSmoke#F5F5F5]
id3[FloralWhite#FFFAF0]
id4[PapayaWhip#FFEFD5]
id5[Ivory#FFFFF0]
id6[LemonChiffon#FFFACD]
id7[Seashell#FFF5EE]
id8[Honeydew#F0FFF0]
id9[Azure#F0FFFF]
id10[AliceBlue#F0F8FF]
id11[MistyRose#FFE4E1]
id12[CornflowerBlue#6495ED]
id13[SkyBlue#87CEEB]
id14[Green#00FF00]
id15[MedSpringGreen#00FA9A]
id16[Yellow#FFFF00]
id17[Gold#FFD700]
id18[Red#FF0000]
id19[Tomato#FF6347]
id20[MediumPurple#9370DB]
id1-->id2
id2-->id3
id3-->id4
id4-->id5

id6-->id7
id7-->id8
id8-->id9
id9-->id10

id11-->id12
id12-->id13
id13-->id14
id14-->id15

id16-->id17
id17-->id18
id18-->id19
id19-->id20

style id1 fill:#FFFAFA
style id2 fill:#F5F5F5
style id3 fill:#FFFAF0
style id4 fill:#FFEFD5
style id5 fill:#FFFFF0
style id6 fill:#FFFACD
style id7 fill:#FFF5EE
style id8 fill:#F0FFF0
style id9 fill:#F0FFFF
style id10 fill:#F0F8FF
style id11 fill:#FFE4E1
style id12 fill:#6495ED
style id13 fill:#87CEEB
style id14 fill:#00FF00
style id15 fill:#00FA9A
style id16 fill:#FFFF00
style id17 fill:#FFD700
style id18 fill:#FF0000
style id19 fill:#FF6347
style id20 fill:#9370DB
[/mermaid]

[mermaid]
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#F0FFF0,stroke:#333,stroke-width:4px
style id2 fill:#F0FFF0,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
[/mermaid]

graph LR
id1(Start)-->id2(Stop)
style id1 fill:#F0FFF0,stroke:#333,stroke-width:4px
style id2 fill:#F0FFF0,stroke:#333,stroke-width:4px

用一个style起头来引导对节点形状的设置语句.

​ 后面跟着的是节点的名称.

​ fill表示设置填充的颜色，#号后面引导16位RGB色阶标注，例如#f9f表明RGB通道是15，9，15.

​ stroke表示字体的设置，颜色标注方式和fill的表示方法一致.

​ stroke-width表示线框的粗细，px表示像素，color表示设置线框的颜色.

​ stroke-dasharray表示的是线框的虚线线型，用两个数来表示段落的划分数量