阳光肺科

 找回密码
 立即注册

微信扫码登录

搜索

[排版] Markdown图表:流程图模板:从上向下

   火.. [复制链接]
阳光网络 发表于 2024-8-7 23:20:27 | 显示全部楼层 |阅读模式

马上注册,阅读更多内容,享用更多功能!

您需要 登录 才可以下载或查看,没有账号?立即注册

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

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

[mermaid]
graph TB
A[主题开始]
B[主题第二]
C[子题第一]
D[子题第二]
A --> B
B --> C
B --> D
[/mermaid]

graph TB
A[主题开始]
B[主题第二]
C[子题第一]
D[子题第二]
A --> B
B --> C
B --> D


[mermaid]
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
[/mermaid]
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;










[mermaid]graph TB
    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 TD
    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 TD
    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 TD
    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 TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C[Let me think]
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
[/mermaid]

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C[Let me think]
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]


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



[mermaid]graph TD;
  Portal-->|发布/更新配置|Apollo配置中心;
  Apollo配置中心-->|实时推送|App;
  App-->|实时查询|Apollo配置中心;
[/mermaid]

graph TD;
  Portal-->|发布/更新配置|Apollo配置中心;
  Apollo配置中心-->|实时推送|App;
  App-->|实时查询|Apollo配置中心;




[mermaid]
graph TD
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 TD
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 TD
a-->b
linkStyle 0 stroke:#4b4b4b,stroke-width:1px;
[/mermaid]

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





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



graph TD
a-->b
linkStyle 0 stroke:#FF0000,stroke-width:1px;






微信扫二维码转发分享

阳光肺科 发表于 2024-12-13 14:25:59 | 显示全部楼层
[mermaid]
graph TB
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 TB
    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表示的是线框的虚线线型,用两个数来表示段落的划分数量









您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

给我们建议|手机版|阳光肺科 ( 粤ICP备2020077405号-1 )

GMT+8, 2025-4-11 02:06

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表